利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:《用微信小程序连接WordPress网站》讲述过一些基本的要点,不过仍然有不少人对一些细节不明白,于是我就想着再写一篇比较全面而基础的教程,主要针对入门级别用户,高手就不用看了。

WordPress版“守望轩”微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net

至于标题,请原谅我,我标题党了。

WordPress REST API

WordPress 在4.4 版本开始推出了 REST API,如果你使用的是最新版本的WordPress应该会提供REST API的功能。至于REST API是什么?要讲清楚估计要写一篇文章了,推荐你看看阮一峰写的:RESTful API 设计指南,看完就基本懂了。简单来说WordPress REST API,就是用浏览器通过http的方式访问WordPress提供的REST API 链接 ,可以获取WordPress网站的"内容",这个"内容"是以json的格式返回到浏览器。

比如用chrome浏览器访问我的网站文章的api地址:https://www.watch-life.net/wp-json/wp/v2/posts,会看到如下图一样的结果:

有关WordPress REST API 详细的介绍详见链接:https://developer.wordpress.org/rest-api/

WordPress REST API 链接通常和WordPress的安装路径、Url重写有关,因此WordPress REST API 链接可能有差异,主要差异在WordPress 本身的链接规则上,相同的部分是REST API 路由部分。

通常一个WordPress网站安装成功,如果没有对URL 进行重写,那么WordPress REST API 的访问URL 应该是这样的:

https://www.youdomain.com/index.php/wp-json/wp/v2/

而我的网站的WordPress已经经过URL重写所以,REST API的URL是直接访问网站的根目录:https://www.watch-life.net/wp-json/wp/v2

通常 WordPress REST API 链接 是这样的:

.../wp-json/wp/v2/posts
?per_page=8&page=1&orderby=date&order=desc

...(省略号部分):依据WordPress网站自身规则。

wp-json:对REST API 进行详细的描述说明,例如直接访问https://www.watch-life.net/wp-json,就可以看到这些说明

wp/v2:是对REST API 的版本进行说明,这里说明的V2版本,例如直接访问https://www.watch-life.net/wp-json/wp/v2,就可以看到有关v2版本的功能说明。

posts:是对REST API的路由终点(endpoint),也是用于表述获取WordPress什么样内容,"posts"表明是获取文章的内容。这里的路由终点还有其他的,比如:Categories(分类),Tags(标签),Pages(页面),Comments(评论),那么相应的如果获取这些内容的api链接如下:

获取分类api链接:https://www.watch-life.net/wp-json/wp/v2/categories
获取标签api链接:https://www.watch-life.net/wp-json/wp/v2/tags
获取页面api链接:https://www.watch-life.net/wp-json/wp/v2/pages
获取评论api链接:https://www.watch-life.net/wp-json/wp/v2/comments

更多的路由终点请查阅api的说明文档。

?per_page=8&page=1&orderby=date&order=desc:这部分就是各种参数,per_page是每页记录数,page是当前第几页,orderby是通过什么方式排序,order 是排序方式。不同的路由终点参数也会有所不同。

WordPress REST API 已经相当完善,利用它可以作为后端服务,可以获取基本可以获取WordPress大部分的内容,这样就不必再写后端服务代码,可以在 Android,iOS,小程序里直接调用。

微信小程序

1.准备工作
有关小程序的注册、服务器域名配置见我以前写的文章:用微信小程序连接WordPress网站,这里就不再重复了,需要说明的一点是,在微信小程序中域名的配置,目前看来未备案的域名也可以通过审核。将来会不会严格起来,必须备案的域名才可以使用,就不得而知了。

2.程序工程结构

我开发的WordPress版本的小程序的工程结构如下:

有关app.js,app.json ,app.wxss的微信小程序核心的文件不具体介绍,可以参考微信的相关开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201767。这里只介绍与WordPress版本的小程序相关的目录及文件。

(1)"image"文件夹:显而易见这是存放图片的文件夹。
(2)"pages"文件夹:用于存放小程序的功能的页面。这个文件夹里的文件整个项目最核心的文件夹,主要功能的实现都是这个文件夹里包含的页面实现的。
(3)"templates"文件夹:用于存放通用模版页面。
(4)"utils"文件夹:用于存放公共的js api 文件。
(5)"wxParse"文件夹:第三方用于html转wxml的解析库文件。

下面重点介绍"pages"和"utils"文件夹

(注意本文出现的代码,如果复制使用的时候,请把中文引号修改为英文引号。)

一."utils"文件夹

"utils" 文件夹里核心的文件是api.js,在这个js文件里提供程序需要调用 WordPress REST API 的公用接口方法,如果你使用本小程序来加载自己网站的REST API 只需要修改下面代码的域名部分(蓝色部分)即可:

var HOST_URI = 'https://www.watch-life.net/wp-json/wp/v2/';

如果api 链接正常,其他部分不修改,就可以直接运行。api.js 提供的接口方法包括:

(1)获取文章列表。
(2)获取文章详情。
(3)获取页面列表。
(4)获取页面详情。
(5)获取文章分类。
(6)获取文章评论。
(7)获取文章第一张图片。

二."pages"文件夹

"pages" 文件夹包含小程序里所有的功能页面:首页列表(index)、文章详情(detail)、按分类、搜索的文章列表(list),页面详情(page),关于页面(about),logs(日志页面,此页面可以去掉)

按照微信小程序的开发规则,每个页面功能都会包括三个文件:js,json ,wxml,wxss。简单来说:js文件控制小程序加载的程序以及发送数据请求,同时把获取的数据提供给wxml来显示,json文件是配置文件,wxml是小程序的前端显示页面(相当于web程序的 html),wxss就是样式文件(相当于web程序的css)。有关这些文件更详细的说明见官方的文档。

这里要说明一下,之所以要把文章列表页和按分类、搜索的文章列表分开来,是基于两个原因:

(1)两个页面略有不同,首页列表页有轮转的图片,分类、搜索的文章列表页没有这个。
(2)在页面里就无法通过navigator跳转到tabbar导航的页面,于是就把两个页面分开来。

3.数据请求
无论是获取文章列表,还是显示文章的详情,都是需要微信小程序去调用WordPress REST API去获取数据,在微信小程序里提供的发送http请求的api是:wx.request,通过这个接口发送请求,获取数据并赋值(setData)给小程序的页面数据对象(data),小程序前端(wxml文件)基于这个页面数据对象来渲染显示页面。wx.request接口调用代码如下:

wx.request({
url: url,
success: function (response) {
self.setData({
postsList: self.data.postsList.concat(response.data.map(function (item) {
...
//数据处理
...
return item;
}))
});
}
});
}

上述代码中的"postsList"就是页面数据变量,前端页面(wxml页面)可以使用这个变量来显示数据

<view class="common-list">
<block wx:key="id" wx:for="{{postsList}}">
<view class="list-item has-img" index="{{index}}" id="{{item.id}}" bindtap="redictDetail">
</view>
... //数据显示的略过
</block>
</view>

因为postsList变量是一个数据集变量,因此利用它做循环结合block组件来显示数据列表。

在列表页面如果数据项多就考虑要分页显示数据,在手机端的应用一般不采用通过页码点击的方式来分页,通常采用下拉刷新获取新页面的方式。代码如下:

lower: function (e) {
var self = this;
self.setData({
page: self.data.page + 1
});
this.fetchPostsData(self.data);
},

对于文章详情(包括WordPress页面详情),数据请求的方式和上面类似,只不过和列表略有不同的是,文章内容在添加的时候,是通过WordPress的编辑器录入的,那么数据里包含大量的html标签代码,在微信小程序是无法解析的。因此需要把html转成小程序支持的wxml,在本小程序里采用一个开源的第三方解析库:WxParse,虽然这个解析库还存在若干问题,但总算可以正常显示文章的内容。目前看来,在html转换为wxml上还没有完美的解决方案,希望官方能出相关富文本组件。

小结

尽管我很想把WordPress REST API 开发微信小程序每个细节都清楚明白地写出来,给入门者一个很好的指导,但在撰写的过程中,我觉得如果写得过于细节就有些琐碎了,于是我就把比较关键一些重点内容写出来供参考。小程序开发难度并不大,如果认真看了官方的文档,基本上可以忽略本文章了。

但是,我仍然希望通过阅读本文,对于想利用WordPress REST API 开发微信小程序的开发者,能有所帮助,而不是如本文标题所说的,看了文章反而想放弃了。

如果有朋友想参与到这个小程序的开发,或者对这个小程序功能提出建议意见,欢迎添加我的微信,也可以加入微信群进行讨论

我的微信号:iamxjb,二维码如下:

 我的微信



微信扫描下方的二维码阅读本文

那年今日

2009-06-16 web developer tips (7):在ListView控件里对数据排序 (1 个评论)

利用WordPress REST API 开发微信小程序从入门到放弃》有106个想法

  1. 屹腾

    wp-json/watch-life-net/v1/category/ids 404 (Not Found)(env: Windows,mp,1.05.2204250; lib: 2.23.4)
    最新的WP和你这个插件,会出现这个提示~

    回复
  2. 金标

    站长,问下是否有您开发这个项目的全部教程呢?我认为开源后二次开源很重要。有利于我们在次定义,把您的开源项目向Wordpress发展光大,或许我们二次开发还能做更多项目,api插件的7m字体文件我表示不

    回复
    1. xjb 文章作者

      1、这个阶段我还没有时间写开发教程,不过你的建议我会考虑,找时间专门写一个教程,包括安装的指南。
      2、那个字体文件是以前版本需要的,不过目前的版本不需要,你可以不必下载那个文件。

      谢谢你的建议。

      回复
      1. 柒小懿

        嗯嗯,反馈一个问题(应该算是吧…也许是微信的关系…),就是留言通知点进去了不能直接跳转到留言处么

        回复
  3. 一个奕

    请问博主,你在小程序这里边的评论插件是第三方的吗?我看api只有查看评论,好像没有添加评论这接口。是吗?我第一次接触,不太懂。希望可以提供一下思路,谢谢!

    回复
  4. btmouse

    我的固定链接 格式是 ?p=123 ,然后/wp-json/wp/v2/ 这个地址找不到了怎么决解呀

    回复
  5. Nasching

    作者你好,感谢你的分享。
    我仔细看了你写的说明,有一个问题没搞懂,如何修改你的代码,让小程序首页输出我指定的分类目录文章呢?
    您这个代码是默认输出最新文章,比如我要让小程序首页输出“推荐阅读”这个分类目录下的文章,该如何做呢?

    回复
  6. Nasching

    作则你好,感谢你的分享。
    我仔细看了你写的说明,有一个问题没搞懂,如何修改你的代码,让小程序首页输出我制定的分类目录文章呢?

    回复
    1. xjb 文章作者

      考虑在手机上输入,不会有太多的文字,所以给的评论框就比较小巧。

      回复
  7. 评论功能老说提示WORDPRESS匿名没开,在主题中也加入了相应的代码,什么原因导致的呢?

    回复
  8. pimgeek

    我是来自 Google 搜索的用户,一个多月前就想把个人文集与微信小程序等渠道打通。
    最近正在研究博主的源码,非常感谢博主这么用心的介绍。

    回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注