服务器端

安装python3+flask

要用python3的flask框架，所以安装

sudo yum install epel-release  #安装epel仓库
sudo yum install python36  #安装python36
sudo pip3 install flask  #安装flask库

往服务器里按顺序输入这三句话并回车（请等待并确认上一句话成功执行后再使用下一句），在任何看到(y/d/N)的情况下，输入y并回车

python36是在本篇教程发布的时候的可用版本，若后来者发现无法使用，请加大数字尝试有无新的版本号可用

在服务器中建立代码文件

在你认为可以的地方（就是服务器的任意文件夹下）建立一个名为test.py的文件，写三种常用方法吧

1.在服务器中直接创建文件

可能使用到的命令：

• pwd 无参数，查询当前绝对路径
• ls 无参数时查询列出文件夹下文件，可以带绝对路径或相对路径参数，列出指向文件夹下文件
• cd 带绝对路径或相对路径参数，定位至那个文件夹
• mkdir 直接输入文件夹名，在当前路径下创建新文件夹
• vi 带文件名参数，编辑文件（若路径下没有此文件，则自动新建）

参考命令：

mkdir /home/code  #在/home路径下，新建code文件夹
cd /home/code  #进入此新建文件夹
vi test.py  #在code目录下，新建test.py文件并打开编辑

2.本地编辑并上传

在window下新建记事本，编辑文件后重命名为test.py，将它拖进xshell窗口

如果拖进去之后没有速度，说明你没安装rz/sz命令，请先使用sudo yum install lrzsz

3.使用vscode插件（推荐）

为什么推荐这种方式呢？因为这样可以在vscode中写完代码后保存的同时，在服务器上也更新最新的代码，再配合上flask的debug模式，一个ctrl+s直接运行新代码，在调试的时候简直是神器啊！

默认你有vscode了，在vscode插件商城中搜索SFTP。安装后按F1，在上面弹出的搜索框中搜索SFTP:Config，选择你正在使用的工作区文件夹，进入json设置界面

{
    "name": "xxx",             //配置名字，随便填
    "host": "xxx.xxx.xxx.xxx", //主机域名或ip
    "protocol": "sftp",        //不用动
    "port": 22,                //不用动
    "username": "root",        //你的服务器用户名，要是没改过就是root
    "password": "xxxxxxxxxxxx",//上面那个账户的密码
    "remotePath": "/home/code",//你要把这个工作区文件夹映射到服务器的哪个位置，自己改
    "uploadOnSave": true       //自动上传，建议打开
}

Json不支持注释，上面所有//以及之后内容请自行删除，我没想到其他什么好办法来说明每行的内容。设置完之后对你的工作区文件夹右键，Sync Local->Remote，若无报错，那就应该是成了，以后在此工作区文件夹内编辑的文件保存后自动同步服务器

 

使用上面任意一种方式，将以下python代码弄进你的服务器里去

from flask import Flask  #导入flask库中的Flask模块

Myport = 39101  #填写你想使用的端口号

app = Flask(__name__)  #建立一个Flask的app对象
@app.route('/', methods=['GET'])  #开放一个'/'路径的可以用get方式访问的api
def start():
    return 'Ok, you did it!'  #对访问客户端返回此字符串

if __name__ == '__main__':  #主程序下运行以下内容
    app.run(host='0.0.0.0', port=Myport)  #使用自定义端口，接受所有ip地址访问

开放端口

服务器提供商处（阿里云为例）

1. 进入控制台
2. 选中自己的服务（ECS或者轻量级应用服务器）
3. 点击自己的机子
4. 点击左侧安全→防火墙
5. 添加规则，自定义  tcp  你上面python代码里的端口（多添加点也可以，方便以后操作）

宝塔处

点击左侧安全，在防火墙处输入端口号，点击放行

运行代码并尝试访问

shell中输入python3 test.py，回车，运行你刚上传的代码

打开浏览器，输入'http://"+ 你的服务器ip地址/服务器域名（如果有的话）+ ‘:’+ 你的端口号

比如这样：http://duya12345.top:39101

如果能看到显示 Ok, you did it! 的话，恭喜你，到目前为止操作完全正确

当然，上面的启动程序命令是使前台运行，也就是说断开shell连接会导致程序关闭，如果想让程序长久运行的话，请使用此后台运行命令nohup python3 test.py &

 

客户端（小程序端）

获取小程序开发码

进入这个网站：https://mp.weixin.qq.com/，新建一个小程序，这部分微信官方的导航已经很清晰，就不再赘述了

编写小程序并测试

下载安装并打开微信开发者工具，新建一个工程，然后修改index.js与index.wxml文件

index.js

const app = getApp()  //获取应用实例

Page({
  //事件处理函数
  submit: function(data) {
    wx.request({
        url:"http://duya12345.top:39101", //指定访问网页
        success:function(res){  //如果成功访问，执行以下内容
            console.log(res.data) //打印获取到的数据
        },
        fail:function(res){ //若失败
          console.log(res.errMsg) //打印错误信息
        }
    })
  }
})

index.wxml

<view class="btn-area" id="buttonContainer">
    <button type="primary" bindtap="submit">测试</button>
</view>

由于此时端口还是http，并未在小程序白名单中，所以需要点击右上角详情，本地设置，勾选不校验合法域名、web-view……的那项

保存并编译，可以看到左边屏幕上有个叫测试的按钮，点一下。如果没有出岔子的话，能看到右下角console栏中显示出了那句话

将域名合法化

设置解析

如果设置过域名泛解析的话，跳过这步

进入域名控制台，添加一条记录，类型为A记录，主机记录为*，记录值为你的服务器ip，然后等待一段时间才生效

宝塔设置ssl与反代

1. 打开宝塔
2. 点击左侧网站
3. 添加站点
4. 域名：wx-test.你的域名，其余保持默认，提交
5. 点击你刚才创建的网站，左侧SSL，上侧Let's Encrypt，申请并开启强制HTTPS（此步骤可能需要实名认证）
6. 左侧点击反向代理，添加反向代理，目标url填写为你在python和小程序中使用的那个

浏览器输入https://wx-test.你的域名，看看是否生效

小程序的设置

1. 打开网页端的微信小程序开发界面，进入开发设置，将https://wx-test.你的域名填入request合法域名中
2. 打开开发者工具，将url更换为新的，并取消不校验合法域名复选框，刷新项目配置

像刚才一样进行测试，如果成功看到消息，则您已完全掌握了此教程内容