在此篇教程之前需要准备好的东西
- 一台阿里云服务器(其他的也可以,不过教程是基于阿里云写的)
- 服务器上已安装宝塔面板(买轻量应用服务器的时候可以选)
服务器端
安装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地址访问
开放端口
服务器提供商处(阿里云为例)
- 进入控制台
- 选中自己的服务(ECS或者轻量级应用服务器)
- 点击自己的机子
- 点击左侧安全→防火墙
- 添加规则,自定义 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与反代
- 打开宝塔
- 点击左侧网站
- 添加站点
- 域名:wx-test.你的域名,其余保持默认,提交
- 点击你刚才创建的网站,左侧SSL,上侧Let's Encrypt,申请并开启强制HTTPS(此步骤可能需要实名认证)
- 左侧点击反向代理,添加反向代理,目标url填写为你在python和小程序中使用的那个
浏览器输入https://wx-test.你的域名,看看是否生效
小程序的设置
- 打开网页端的微信小程序开发界面,进入开发设置,将https://wx-test.你的域名填入request合法域名中
- 打开开发者工具,将url更换为新的,并取消不校验合法域名复选框,刷新项目配置
像刚才一样进行测试,如果成功看到消息,则您已完全掌握了此教程内容