前言
微信小程序是前后端分离的开发模式,就像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后面开始