记录一下本小白在学习本地搭建小程序开发环境时的步骤,下面是已经本地编好后上线了的版本:
第一步,准备资源 ——
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 里修改域名为之前创建网站的域名:
之后保存刷新就可以了。