基于wordpress实现一个微信小程序

2018年7月27日22:09:58 6 85 阅读

关注的几个大佬都陆续用上了自己网站的微信小程序,那咱也不能落后,对吧。于是,经过折腾→郁闷→排查问题→解决,最后也实现了一个微信小程序,♪(^∀^●)ノ。本文来说明一下实现的过程:

前提

  1. 有一个微信小程序帐号(用来调试发布微信小程序)
  2. 一个配置了SSL的域名(小程序的request等请求是强制https)
  3. WordPress4.7级以上的版本(低版本不支持rest json api )
  4. wordpress要实现伪静态(实现伪静态的方法)
  5. github下载 winxin-app-watch-life.net(小程序主体程序,文末附下载地址)
  6. 安装wp-rest-api-for-app插件(基于官方的rest json api 定制,文末附下载地址)

过程

登录微信小程序设置一些小程序的事项,比如:名字,头像,服务类目等等,然后下载微信开发者工具,导入下载的winxin-app-watch-life.net文件夹,如图所示:基于wordpress实现一个微信小程序

按照步骤一步一步来,导入下载的文件夹的位置,然后输入自己的appid(在微信小程序后台,设置→开发设置里面),然后确定就可以开始了。

注意:下载的winxin-app-watch-life.net目录结构是这样的,文件名字→文件名字→程序内容,所以导入程序的时候要导入第二个文件名字,不然会报错。

进入调试界面,打开config.js文件,config.js文件的路径如下图:

基于wordpress实现一个微信小程序

文中红框的地方修改为自己的内容,剩下的就是一些修修改改为自己喜欢的样子。

小程序代码配置完成后,去自己的网站配置一下插件,插件要怎么安装呢,这个插件因为没有上传到wordpress商店,所以商店是没有的,需要自己解压后上传到服务器的插件目录,然后登录到网站后台开启该插件。

AppID和AppSecret都在微信小程序的后台界面可以找到,路径是设置→开发设置。小程序的首页会有轮播图,把你想要放到轮播的文章ID输入里面就可以了。

基于wordpress实现一个微信小程序

最后

开始编译,如果报错可以看console的错误是什么,然后对症下药。

注意:

  1. 如 果你的网站开启了css,js压缩代码,小程序可能会提示无法访问网络。
  2. 如果无法生成海报检查一下该插件目录下的qrcode是否开启读写权限
  3. 如果无法生成文章图片的海报,检查一下downloadFile合法域名是否有文章图片的域名

本站小程序,扫一扫体验

基于wordpress实现一个微信小程序

感谢

  1. winxin-app-watch-life.net下载地址:https://github.com/iamxjb/winxin-app-watch-life.net
  2. wp-rest-api-for-app插件 下载地址:https://github.com/iamxjb/winxin-app-watch-life.net
  3. 造了一个这么厉害轮子以及该定制插件的作者:守望轩 https://www.watch-life.net

 

 

完。


 

weinxin
来找我玩~
这是我的微信扫一扫~
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:6   其中:访客  4   博主  2

    • avatar 明月登楼 1

      这个小程序唯一的不足就是需要 WordPress 的特色图像支持!

        • avatar 舍得 博主

          @明月登楼 还有个不足,就是网站源代码压缩的话,小程序那边调用不了网站数据 [无奈哭]

            • avatar 小白不吃菜 1

              @舍得 事实上不影响的,接口就是基于wp自带的rest api,但是rest api比较冗余,所以原作者开发了那个api插件,而网站源代码压缩大都是插件实现的前端代码压缩,并没有修改数据库,所以基于数据库的rest api内容就没有问题,只是不同的主题对内容有些更改,无非也是数据库字段可能不一致,修改原作者那个api插件就ok了。

                • avatar 舍得 博主

                  @小白不吃菜 我的代码压缩没用插件是加的代码实现的,具体当时没研究是什么原理,我在IDE调试小程序一直提示无法访问网络,我把代码压缩去掉就好了,话说你源代码压缩是用的什么啊 。

            • avatar 职业群主 1

              关键是域名必须备案,没备案的我杯具了

              • avatar 夏天烤洋芋 1

                [帅吗?] 原来公司弄过一个垃圾小程序。哈哈哈 [挤眼]