基于wp实现一个微信小程序demo

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

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

前提

  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文件夹,如图所示:基于wp实现一个微信小程序demo 第1张

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

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

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

基于wp实现一个微信小程序demo 第2张

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

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

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

基于wp实现一个微信小程序demo 第3张

最后

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

注意:

  1. 如 果你的网站开启了css,js压缩代码,小程序可能会提示无法访问网络。

  2. 如果无法生成海报检查一下该插件目录下的qrcode是否开启读写权限

  3. 如果无法生成文章图片的海报,检查一下downloadFile合法域名是否有文章图片的域名

这篇文章由DurkBlue发布,转载请注明来处

分享到:
0
赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论取消回复

快捷回复:

评论列表 (暂无评论,106人围观)参与讨论