用微信小程序链接WordPress网站

随着微信小程序的功能愈来愈强,特别对我的开发者的开放,让我的开发者有机会尝试微信小程序。若是你有本身的我的网站,就能够把我的网站搬到微信小程序里,经过小程序直接访问网站的内容。html

要想微信小程序能够获取网站的内容,这就要求网站提供web服务的api,好比提供获取内容的json api,这些api包括查询、添加、更新等操做。个人网站是使用WordPress 4.7.4 版本,提供REST API,这样就不用本身开发api了,直接使用便可。条件具有,说干就干,我先拿本身的网站练手,也算是真正动手实践一下小程序。前端

winxinapp-wordpress.jpg

注意:以我的开发者申请的小程序,因为没法提交“文娱-资讯”类的小程序,所以若是提交非“娱乐-资讯”类时,在审核的时候会被拒绝,如下是我第一次提交时被拒的反馈git

小程序”守望轩网站”代码发布审核结果github

你的小程序”守望轩网站”代码发布审核未经过,缘由以下:
1:小程序内容不符合规则:
(1):小程序服务内容涉及文娱-资讯,属未开放类目,建议选择企业小程序
根据反馈的审核结果来看,只有企业类小程序才能够发布“文娱-资讯”类的小程序。不过2017年4月28日开始,通过认证的企业公众号能够快速注册并认证新的小程序,若是你能够找个认证的企业公众号帮忙快速注册一个小程序,通过这样注册的小程序是能够发布“文娱-资讯”类的小程序。web

基本设置json

首先配置微信小程序的基本信息,这部分配置必定要谨慎,由于每个月修改次数是有限定的,特别小程序名称在发布后是须要认证才能修改的,起名字前必定要认真想好,发布后再来修改,就比较麻烦了。小程序

xiaochengxuconfig2.png

首先须要到小程序的后台管理去获取小程序的开发者ID和密钥,同时设置提供web服务api的域名连接地址,特别注意的是该域名的连接地址须要是HTTPS。(关于如何WordPress类型的网站如何开启HTTPS,见文章:WordPress整站轻松开启HTTPS)
xiaochengxuconfig1.png微信小程序

小程序开发api

小程序的开发能够参考官方的文档:https://mp.weixin.qq.com/debu...。针WordPress类型的网站,主要得到如下的内容:服务器

1、获取文章(posts)的列表

  1. rest api连接:https://www.watch-life.net/wp... ,per_page参数表示每页的记录条数,page参数表示第几页。

2.获取文章列表的主要代码:

xiaochengxucode1.png

考虑显示文章列表时,不是完整显示文章内容,只是显示摘要,因而获取了文章内容的一部份内容做为摘要,同时,考虑到文章中有html的代码,所以去掉了文章中有关html的代码,这样显示起来就比较干净整洁。

3.前端(wxml文件)显示文章列表的主要代码:
xiaochengxucode2.png

以上代码主要实现对文章标题和摘要的显示。

2、获取文章(posts)的内容

1.rest api连接:https://www.watch-life.net/wp...,id表示的是文章的id

2.获取文章内容的主要代码:

xiaochengxucode3.png
因为文章内包含大量的html标签,在微信小程序里是没法显示的,所以采用了一个把html解析为wxml的第三方程序:wxParse,上图中用红框标识的代码就是采用该程序的调用方法。

3.前端(wxml文件)显示文章内容的主要代码:

xiaochengxucode4.png
2、获取页面(pages)的分类
1.rest api连接:https://www.watch-life.net/wp...

2.获取页面分类的代码能够参考获取文章列表的程序。

2、获取页面(pages)的内容
1.rest api连接:https://www.watch-life.net/wp...,id表示的是页面的id

2.获取页面内容的代码能够参考获取文章内容的程序。

至此一个简单的小程序连接wordpress网站的程序开发完毕。最后就是提交小程序并审核。审核经过后,就能够发布了。小程序发布后,就能够把我的的公众号绑定小程序了。绑定后就能够在公众号里看到小程序,以下图所示:

weixinapp.jpg

最后小程序显示以下:
weixinapp2.jpg

个人网站服务器在国外,在速度上访问有些慢,所以小程序显示也会有些慢,另外文章的正文在处理的时候格式上还有些问题,后续我会继续完善,尽快更新版本。

“守望轩”网站小程序的源代码我已经放在github开源:https://github.com/iamxjb/win...

本文首发地址:https://www.watch-life.net/wo...

相关文章
相关标签/搜索