【图文学习】小程序新手体验:如何快速在本地运行小程序及后台

记录一下本小白在学习本地搭建小程序开发环境时的步骤,下面是已经本地编好后上线了的版本:


第一步,准备资源 ——

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 里修改域名为之前创建网站的域名:

之后保存刷新就可以了。

发布了3 篇原创文章 · 获赞 1 · 访问量 817

猜你喜欢

转载自blog.csdn.net/Cocoa_Cat/article/details/104018849