前言


微信小程序是前后端分离的开发模式,就像APP开发一样,所有的数据都是通过接口来交互,并不像传统网页由服务端渲染页面,响应到浏览器HTML页面。 有很多不懂后端的同学想要开发微信小程序,但奈何不会写后端接口,难倒了很多人。 第三方也有很多在线的Mock工具,但由于微信小程序的安全机制,无法进行发布,显然不太适合,那么有没有更好的办法来实现呢? 下面我来教大家一个简单的方法,利用Nginx来搭建一个简易版微信小程序HTTP接口的服务端。(当然这个服务端也是一个Mock形式的)

使用这种方式的优缺点


优点

1、无需后端经验 2、接口数据可控 3、支持手机预览 4、可发布

缺点

1、无法进行增删改查操作

使用这种方式的限制虽然很大,但也是一种不错的选择
如果你的小程序只是一些信息展示,但需要不定期更新数据,这种方式成本很低
其他的类型的小程序,可以在有后端服务之后进行迁移
完全不需要修改任何小程序代码进行后端迁移[无需重新发布小程序]
需要准备的东西

1、一台Linux系统的服务器 2、一个已经备案通过的域名 3、HTTPS证书

Windows服务器也可以,但配置方法有少许不同,可以使用其他容器代替Nginx
备案过的域名需要解析到该服务器,并且已经在微信小程序后台配置过该域名为安全域名
相信要开发小程序的同学这两样东西应该都已经具备 
[如果你使用的是腾讯云的wafer解决方案,且自己无法操作这台服务器,还是老老实实的写后端吧]

下面开始进入正题

安装Nginx


本人比较喜欢源码编译安装,下面就介绍如何源码编译安装Nginx 该文档编写时最新的Nginx版本下载地址为:http://nginx.org/download/nginx-1.13.9.tar.gz

以CentOS 7为例, 其他系统的安装方法这里不介绍,请出门左拐去百度

在编译Nginx前需要安装一些依赖,具体记不太清了,下面只能凭印象来列举一下所需依赖

pcre-*、openssl、openssl-devel、gcc、gcc-c++、ncurses-devel、perl

开始安装

# 在服务器使用`wget`命令下载下来
wget http://nginx.org/download/nginx-1.13.9.tar.gz
# 如果服务器上没有`wget`命令请执行下面的命令进行安装,然后再下载
yum install -y wget
# 安装编译所需依赖
yum install -y pcre-* openssl openssl-devel gcc gcc-c++ ncurses-devel perl
# 解压下载下来的压缩包
tar zxf nginx-1.13.9.tar.gz
# 进入到解压出来的文件夹
cd nginx-1.13.9
# 配置编译的选项
# 安装到 /usr/local/nginx 目录,且开启SSL(HTTPS)功能
./configure --prefix=/usr/local/nginx --with-http_ssl_module
# 编译
make
# 安装
make install

以上命令执行完成之后Nginx就已经安装完成了,下面还需配置一些东西,用来操作Nginx

开机自启动

# 新建一个配置文件放在/etc/systemd/system目录中文件名为nginx.service
# 个人习惯直接使用vim命令进行新建和编辑
vim /etc/systemd/system/nginx.service
# 如果服务器上没有`vim`命令请执行下面的命令进行安装,然后再新建和编辑配置文件
yum install -y vim
# 在这个配置文件中写入以下代码
[Unit]
Description=Nginx
After=network.target remote-fs.target nss-lookup.target

[Service]
ExecStart=/usr/local/nginx/sbin/nginx -p /usr/local/nginx
ExecReload=/usr/local/nginx/sbin/nginx -p /usr/local/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -p /usr/local/nginx -s stop
Restart=always
Type=forking
PIDFile=/usr/local/nginx/logs/nginx.pid
KillMode=process
RestartSec=60s

[Install]
WantedBy=multi-user.target
# 代码编写完之后按下 esc 然后输入 :wq 进行保存和退出编辑
# 退出编辑后运行以下命令即可
systemctl enable nginx.service 

Nginx的常用操作命令

# 启动服务
systemctl start nginx.service
# 查看状态
systemctl status nginx.service
# 重启
systemctl restart nginx.service
# 重载
systemctl reload nginx.service
# 停止
systemctl stop nginx.service

到此为止Nginx算是已经安装完成了,当然别忘了开启防火墙端口,这里就不多做介绍了

配置Nginx


编辑Nginx配置文件

# 新建一个文件夹用于存放自己的配置文件
mkdir /usr/local/nginx/vhosts
# 编辑Nginx的配置文件
vim /usr/local/nginx/conf/nginx.conf
# 然后在最后一个反大括号前添加一行代码
include /usr/local/nginx/vhosts/*.conf;
# 代码编写完之后按下 esc 然后输入 :wq 进行保存和退出编辑

以后所有的Nginx配置文件直接在 /usr/local/nginx/vhosts 文件夹下管理就好了

下面开始创建我们需要的HTTP接口服务端吧

# 创建这个HTTP接口服务端的配置文件
vim /usr/local/nginx/vhosts/api.conf
# 写入以下代码
server {
    listen  443;
    server_name 域名;
    ssl on;
    ssl_certificate HTTPS证书 .crt 文件存放路径;
    ssl_certificate_key HTTPS证书 .key 文件存放路径;
    ssl_session_timeout 5m;
    ssl_protocols   TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers   on;

    location / {
        root    /opt/api;
        index   index.html;
    }

    error_page 405 =200 @405; 

    location @405  { 
        root /opt/api;
        proxy_method GET; 
        proxy_pass https://域名;  
    }
}
# 其中域名的填写不要写http或者https,直接写你解析在这台服务器的域名
# 关于HTTPS的证书,每个机构发放的文件都有所不同,具体还需资讯发放机构
# loaation 下面的 root 是存放接口文件的目录
# 代码编写完之后按下 esc 然后输入 :wq 进行保存和退出编辑

到这里Nginx的所有配置都已经做完了,下面可以启动Nginx来试验一下了

# 启动命令
systemctl start nginx.service

测试


在 /opt/api 目录下新建一个 json 文件, 或者在本地编写完之后上传到服务器

# 测试文件的内容
[
    {
        id: 1,
        title: "微信订阅号"
    },
    {
        id: 2,
        title: "微信服务号"
    },
    {
        id: 3,
        title: "微信小程序"
    },
    {
        id: 4,
        title: "微信小游戏"
    },
    {
        id: 5,
        title: "企业微信"
    }
]

我把这个文件放在了 /opt/api/sys 目录下, 文件名叫 product.json

wx.request 去请求这个伪接口,地址为: https://域名/sys/product.json 成功响应json文件中的内容

接口的地址就是 https://域名/你存放在服务器的路径 从/opt/api后面开始

最后修改日期: 2022年7月10日

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。