【图文学习】如何基于WordPress快速打造一个小程序？

记录一下本小白在学习本地搭建小程序开发环境时的步骤，下面先放一个已经上线的程序用于预览：

 

---

第一步，准备资源 ——

1、主机环境 —— 推荐使用大家比较熟悉的 phpstudy 搭建服务器环境，下载后简单安装就可以启用，由它提供本地【域名】配置、【https 协议链接】以及【数据库】，下载地址：https://www.xp.cn/；

2、后台框架 —— WordPress，很好很强大，下载地址：http://wpchina.org/downloads/；

3、小程序框架 —— 微慕WordPress小程序开源版，与 WP 配套使用，下载地址：https://github.com/iamxjb/winxin-app-watch-life.net；

4、小程序开发工具 —— 官方的微信开发者工具，下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html；

5、个人小程序账号，申请很简单的，需要准备的资料有：邮箱（用于返回验证链接）、手机号（用于短信验证）、个人身份证信息、微信号（用于扫描绑定管理员）等，我们需要官方提供的 appid 和密钥：

---

第二步，配置后台 ——

1、启动安装好的 phpstudy，在首页确定 apache 跟 mysql 都已开启，如下图：

2、创建网站并写好域名，我这里填的是 wordpress：

3、开启 https 端口，最后再点确认网站就创建好了：

4、记得给网站配置好数据库，别乱填，后面要用到：

---

第三步，安装 WordPress ——

1、打开网站根目录：

2、将下载解压后的 wordpress 文件放进根目录，左边是解压后的文件目录，右边是网站根目录：

3、打开网站：

4、拉到最下面，选择“简体中文”，之后的提示页面直接“开始”就好：

5、填入之前创建数据库时的信息，后面两项不用管，直接提交：

6、填写管理员信息，密码可以改成简单的，之后登录就行：

---

第四步，配置小程序插件 ——

1、后台搜索 REST API TO MiniProgram 插件，安装失败的话就刷新多尝试安装几次：

2、启用插件：

3、填写 appid 和密钥后保存即可，若无 appid 可以花5分钟注册，需要的信息在第一步第5点已说明：

---

第五步，安装小程序框架 ——

1、打开安装好的微信开发者工具，填入 appid：

2、进入开发页面，打开根目录：

3、删除原根目录下的文件，记得先把微信工具关掉，不然删除会报错：

4、将下载解压后的小程序框架文件放入根目录，左边为解压后的框架文件目录，右边为删除后的根目录：

5、启动微信开发都工具打开项目，在 utils/config.js 里修改域名为之前创建网站的域名：

之后保存刷新就可以了~

如果不能正常运行的话，欢迎在评论提出问题，大家一起学习。