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

Posted 2020-09-23 守望轩

自从我发布并开源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，二维码如下：

讨论微信群：WordPress版微信小程序 ，二维码如下：

 

----------------------------------------------------------------------------

欢迎关注我的网站和微信公众号，文章会在我的网站和微信公众号上同步发布。

本文首发链接：https://www.watch-life.net/wordpress/wordpress-rest-api-weixin-weapp.html

我的网站：守望轩

微信公众号名称：守望轩

微信公众号：iwatchlife

你也可以扫描或长按以下二维码