快速搭建微信小程序,假设您已经有微信的小程序账号,并已获得了微信小程序的 APP ID 和 APP SECRET,若不知道怎么申请微信小程序账号及获取APP ID 和 APP SECRET 请参考文档 微信小程序申请设置指南 。
1.wordpress后台上传启用插件
将获取到的插件zip文件包(文件名称 wp-app.zip),通过wordpress后台直接上传启用插件,启用插件后,大部分选项设置已经自动设置好默认值,有需要参考后可自行再修改(比如需要开启的组件及显示样式)。
2.wordpress后台插件小程序管理菜单设置 APP ID 和 APP SECRET
进入wordpress后台”微信小程序”管理菜单页面,设置好 APP ID 和 APP SECRET
3.下载微信开发者工具安装后新建项目导入前端代码
下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
解压获取到的微信小程序前端代码(文件名wp-app-mp-weixin.zip)到本地计算机上
比如解压到本地 D:\wechat_app\wp-app-mp-weixin
安装好微信开发者工具后新建小程序项目,选择 “导入项目”,填写项目名称,AppID,选择目录路径D:\wechat_app\wp-app-mp-weixin
4.修改前端代码域名配置信息
导入项目成功后,在该文件下 common/main.js
,找到该段代码(前端代码已做压缩优化)
n.default.prototype.serverUrl="https://your_wordpress_url"
将 your_wordpress_url 替换为您的wordpress网站主页地址
比如:
n.default.prototype.serverUrl="https://wp-autoblog.net"
或
n.default.prototype.serverUrl="https://wp-autoblog.net/wordpress"
5.修改小程序主色调颜色
在该文件下 common/main.wxss
,找到该段代码
page{--mainColor:#00b3db;--mainColorLight:#01c5f1;--mainColorShadow:rgba(0,179,219,0.2)}
可修改小程序主色调颜色
--mainColor
为主色调颜色 --mainColorLight
为主色调浅色系颜色 --mainColorShadow
为主色调阴影颜色
6.修改小程序名称,底部导航栏信息等
在该文件下 app.json
,可对微信小程序进行全局配置,更多详细配置可参考https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
比如,修改小程序名称
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "修改为您的小程序名称",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F8F8F8"
},
7.上传前端代码包,等待审核通过后上线
基本信息修改完毕,开发工具左边小程序预览正常后即可上传代码,上传代码后,登陆小程序管理后台,https://mp.weixin.qq.com/ 提交审核,等待审核通过后登陆小程序管理后台布上线即可。
快速过审技巧
保证小程序标题和注册的小程序名称保持一致,选择的服务类目和网站主题保持一致,wordpress后台本插件选项菜单可先设置关闭评论功能,等审核通过上线后再开启评论功能即可。