关注的几个大佬都陆续用上了自己网站的微信小程序,那咱也不能落后,对吧。于是,经过折腾→郁闷→排查问题→解决,最后也实现了一个微信小程序,♪(^∀^●)ノ。本文来说明一下实现的过程:
前提
- 有一个微信小程序帐号(用来调试发布微信小程序)
- 一个配置了SSL的域名(小程序的request等请求是强制https)
- WordPress4.7级以上的版本(低版本不支持rest json api )
- wordpress要实现伪静态(实现伪静态的方法)
- github下载
winxin-app-watch-life.net
(小程序主体程序,文末附下载地址) - 安装
wp-rest-api-for-app
插件(基于官方的rest json api 定制,文末附下载地址)
过程
登录微信小程序设置一些小程序的事项,比如:名字,头像,服务类目等等,然后下载微信开发者工具,导入下载的winxin-app-watch-life.net
文件夹,如图所示:
按照步骤一步一步来,导入下载的文件夹的位置,然后输入自己的appid(在微信小程序后台,设置→开发设置里面),然后确定就可以开始了。
注意:下载的winxin-app-watch-life.net
目录结构是这样的,文件名字→文件名字→程序内容,所以导入程序的时候要导入第二个文件名字,不然会报错。
进入调试界面,打开config.js文件,config.js文件的路径如下图:
文中红框的地方修改为自己的内容,剩下的就是一些修修改改为自己喜欢的样子。
小程序代码配置完成后,去自己的网站配置一下插件,插件要怎么安装呢,这个插件因为没有上传到wordpress商店,所以商店是没有的,需要自己解压后上传到服务器的插件目录,然后登录到网站后台开启该插件。
AppID和AppSecret都在微信小程序的后台界面可以找到,路径是设置→开发设置。小程序的首页会有轮播图,把你想要放到轮播的文章ID输入里面就可以了。
最后
开始编译,如果报错可以看console的错误是什么,然后对症下药。
注意:
- 如 果你的网站开启了css,js压缩代码,小程序可能会提示无法访问网络。
- 如果无法生成海报检查一下该插件目录下的
qrcode
是否开启读写权限 - 如果无法生成文章图片的海报,检查一下downloadFile合法域名是否有文章图片的域名
本站小程序,扫一扫体验
感谢
winxin-app-watch-life.net
下载地址:https://github.com/iamxjb/winxin-app-watch-life.netwp-rest-api-for-app插件
下载地址:https://github.com/iamxjb/winxin-app-watch-life.net- 造了一个这么厉害轮子以及该定制插件的作者:守望轩 https://www.watch-life.net
完。

微信小程序
互联网开发,终身学习者,欢迎您的关注!
2018年9月27日 下午3:58 第4楼
好羡慕呀,没备案就不用想了。
2018年9月27日 下午4:00
@值品分享 想还是可以的~![[略]](https://img.haoht123.com/smilies/70.png)
2018年8月12日 下午10:50
这个小程序唯一的不足就是需要 WordPress 的特色图像支持!
2018年8月12日 下午11:07
@明月登楼 还有个不足,就是网站源代码压缩的话,小程序那边调用不了网站数据![[无奈哭]](https://img.haoht123.com/smilies/72.png)
2018年8月15日 下午9:51
@舍得 事实上不影响的,接口就是基于wp自带的rest api,但是rest api比较冗余,所以原作者开发了那个api插件,而网站源代码压缩大都是插件实现的前端代码压缩,并没有修改数据库,所以基于数据库的rest api内容就没有问题,只是不同的主题对内容有些更改,无非也是数据库字段可能不一致,修改原作者那个api插件就ok了。
2018年8月15日 下午9:57
@小白不吃菜 我的代码压缩没用插件是加的代码实现的,具体当时没研究是什么原理,我在IDE调试小程序一直提示无法访问网络,我把代码压缩去掉就好了,话说你源代码压缩是用的什么啊 。
2018年8月4日 下午10:40
关键是域名必须备案,没备案的我杯具了
2018年7月28日 上午9:51