快速搭建微信小程序前后端(小白向)-基础篇

本教程发布于2020/06/06,只保证在此刻本教程无误

在此篇教程之前需要准备好的东西

  1. 一台阿里云服务器(其他的也可以,不过教程是基于阿里云写的)
  2. 服务器上已安装宝塔面板(买轻量应用服务器的时候可以选)

服务器端

安装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.jsindex.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更换为新的,并取消不校验合法域名复选框,刷新项目配置

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

点赞
  1. nemo说道:
    Google Chrome Windows 10

    Fatal error: Uncaught ArgumentCountError: Too few arguments to function Walker_Comment::filter_comment_text(), 1 passed in /www/wwwroot/duya112233/wp-includes/class-wp-hook.php on line 287 and exactly 2 expected in /www/wwwroot/duya112233/wp-includes/class-walker-comment.php:267 Stack trace: #0 /www/wwwroot/duya112233/wp-includes/class-wp-hook.php(287): Walker_Comment->filter_comment_text('<p>\xE7\x89\x9B\xE9\x80\xBCplus</...') #1 /www/wwwroot/duya112233/wp-includes/plugin.php(206): WP_Hook->apply_filters('<p>\xE7\x89\x9B\xE9\x80\xBCplus</...', Array) #2 /www/wwwroot/duya112233/wp-content/themes/kratos-pjax-master/inc/ua.php(432): apply_filters('comment_text', '\xE7\x89\x9B\xE9\x80\xBCplus') #3 /www/wwwroot/duya112233/wp-content/themes/kratos-pjax-master/inc/ua.php(436): user_agent_display_comment() #4 /www/wwwroot/duya112233/wp-includes/class-wp-hook.php(289): user_agent('\xE7\x89\x9B\xE9\x80\xBCplus') #5 /www/wwwroot/duya112233/wp-includes/plugin.php(206): WP_Hook->apply_filters('\xE7\x89\x9B\xE9\x80\xBCplus', Array) #6 in /www/wwwroot/duya112233/wp-includes/class-walker-comment.php on line 267