基于wordpress REST API开发微信小程序实践教程(一)

WordPress REST API功能开发趋于完善,通过REST API可以轻易获取wordpress网站的文章数据、页面数据、用户数据等。基于wordpress开发微信小程序其实就是通过wordpress的REST API获取这些数据,然后以一定的方式在小程序端进行数据处理后使用前端代码渲染,因此基于WordPress开发微信小程序,对于不擅长写后端代码的开发者就省去了不少的烦恼。

接下来就以DeveWork开发的“DeveWork极客小程序”第一版v1.0 为例,介绍三个页面(首页、内容页、阅读记录页)大体上是如何做出来的。可以扫描下面的小程序码体验一下DeveWork极客小程序(已经不是v1.0版)

基于wordpress REST API开发微信小程序实践教程(一)

注意:要看懂本章节的内容,需要把一遍微信小程序官方开发文档,先对小程序开发有一定的了解,另外本章节也不会涉及如何写CSS(WXSS)的部分。

准备工作

  • 在微信公众平台管理后台上注册小程序账号,并配置域名等信息
  • 配置好服务端HTTPS、
  • 准备已经备案的域名(即“合法域名”)

提示:本例作者开发之前对WordPress REST API 进行了一些定制化的输出(如:禁止文章某些字段显示、输出post meta所有字段、输出post meta特定字段等)

项目结构

结合微信官方quick start 的例子与个人需求,将项目结构如下分好:

.
├── app.js
├── app.json
├── app.wxss
├── config.js // 配置文件
├── image // 图片目录
├── pages // 页面目录
├── utils // 实用untils 类
└── wxParse // 第三方库wxParse

基于wordpress REST API开发微信小程序实践教程(一)

小程序首页(文章列表页面)

首页即文章列表页面, 即展示最新的5篇文章,然后通过下拉流式加载更多文章(有点无限加载的意味)。使用到WordPress 的REST API 就是your-site.com/wp-json/wp/v2/posts?per_page={num}&page={num}

index.js文件里面核心是通过wx.request接口访问上面的API URL获取到文章数据并setData 供后续数据渲染:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
wx.request({
    url: url,
    success: function (response) {
        self.setData({
            posts: self.data.posts.concat(response.data.map(function (item) {
            	 ...
            	 // 数据过滤/格式化等
            	 ...
                return item;
            }))
        });
    }
  });
}

上面的代码我是抽出在一个函数中,方便后续重复调用。设置的数据通过index.wxml 循环输出,当前在此之前因为要做滚动加载,所以采用了小程序的scroll-view组件(官方文档)。

1
2
3
4
5
6
7
<scroll-view scroll-y="true" bindscrolltolower="pullDownRefresh">
     <block wx:for-items="{{posts}}" wx:key="{{item.id}}">
     	<view class="entry" index="{{index}}" id="{{item.id}}" catchtap="redictSingle">
          <!--文章数据的展示,细节代码略过-->
	     </view>
    </block>
</scroll-view>

上面的WXML 代码中绑定了两个事件函数:一是下拉事件pullDownRefresh(),一个是点击事件redictSingle(),即点击后跳转到文章详情页。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 下拉刷新
pullDownRefresh: function (event) {
    var self = this;
    self.setData({
        page: self.data.page + 1 //页面+1
    });
    console.log('current page:' + self.data.page);
    this.fetchData({ page: self.data.page });
},
 
// 路由导航到文章内页
redictSingle: function (event) {
    console.log('redictSingle');
    var id = event.currentTarget.id; // 这里的id 其实是WordPress 中的文章id,需要传递到single 页面
    var url = '../single/single?id=' + id;
    wx.navigateTo({
        url: url
    })
}

文章内页(文章详情页面)

文章页使用到的REST API URL是your-site.com/wp-json/wp/v2/posts/{id}。也是类似,通过wx.request接口访问URL 然后渲染数据到WXML 页面上。代码与上面的类似就不重复了。

这里其实涉及到个如何将富文本转为微信小程序可识别的WXML的问题。因为获取的JSON 数据文章正文部分是一段HTML 代码,如果直接输出是会报错的,需要将这段HTML代码(俗称富文本)转化为微信小程序WXML语言。Jeff使用的是WxParse这个第三方库,不过这个库目前来说依然不是很完善,接上去之后发现有不少bug,还好凭借自己的技术给打补丁般一个个修复了。

使用上,按照WxParse的文档,在获取到文章数据后,经过html to wxml的步骤后赋值到page data:

1
2
3
4
5
6
7
// html to wxml
let article = res.data.content.rendered;
WxParse.wxParse('article', 'html', article, self, 5);
 
self.setData({
    wxParseData: article.nodes
});

wxml上,import导入wxParse.wxml并调用:

1
2
3
4
5
// html to wxml
<import src="../../wxParse/wxParse.wxml"/>
<view class="entry__cotent ">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

以上就是接入WxParse 的过程粗略介绍。

提示:小程序现在出了富文本组件(rech-text),个人评价么,暂时还比不上 wxParse。当前支持的标签有限(如pre标签不支持)且不支持绑定事件,暂时还是先用着wxParse。

阅读记录页面

基于wordpress REST API开发微信小程序实践教程(一)

阅读记录页面是用来展示用户浏览历史,直接照着官方的Hello World例子就做起来了。这个页面用到的主要如下两种接口:LocalStorage 相关接口、用户授权相关接口(wx.loginwx.getUserInfo等)。

从用户体验上考虑,不应该一开始就向用户申请授权,而是有需要的页面才申请;同时也应该做好用户不允许授权的优雅处理。在这里因为小程序的坑以及个人关系第一版处理得不是很完美,代码就不展示了。

提示:处理授权相关的内容参考本文《提升用户体验,微信小程序“授权失败”场景的优雅处理》

记录的文章阅读历史数据是以LocalStorage的形式保存在客户端而非云端,一句“阅读记录仅保存在本设备”的提示是有必要的。同时基于容量上的考虑将最多数目限制为20条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 调用API从本地缓存中获取阅读记录并记录
var logs = wx.getStorageSync('readLogs') || [];
// 过滤重复值
if (logs.length > 0) {
    logs = logs.filter(function (log) {
        return log[0] !== id;
    });
}
// 如果超过指定数量
if (logs.length > 19) {
    logs.pop();//去除最后一个
} 
logs.unshift([id, response.data.title.rendered]);
wx.setStorageSync('readLogs', logs);

上面的代码其实是放在single.js里面的,因为需要将文章id与标题保存在LocalStorage 上,只有single.js才同时获取这两种数据。

基于wordpress REST API开发微信小程序实践教程(一)

最后还需要在log.jsonShow生命周期绑定一个更新数据的函数:

1
2
3
4
5
6
7
8
9
updateData: function(cb){
        var that = this;
        // readlog 
        this.setData({
            readLogs: (wx.getStorageSync('readLogs') || []).map(function (log) {
                return log;
            })
        })
    },

经验篇

主要记录在开发过程中的一些坑以及解决方案。

TabBar 的图片问题

小程序官方宣称支持SVG 图片,但在tabBar 里面的图片并不支持SVG 图片。官方推荐采用81×81 尺寸的png 图片,但这个依然有点坑。建议在设计icon 的时候稍微留点透明的padding 占位,不然会导致图标在真机上会放得很大。

图片防盗链的referer 设置

如果你托管图片的服务器有防盗链处理,那么得将servicewechat.com放入白名单中,并不是想当然的qq.com

Image 的绝对路径必须以https 开头

image 的src 绝对路径,在web 开发中是允许类似//example.com/pic.png的以//开头的存在,这种图片路径在微信web 开发者工具也能正常显示,但在真机上就不能正常加载了,必须是https 开头的绝对路径。

服务端数据侧不好处理的话可以通过下面的util 处理:

1
2
3
4
5
6
7
// 补全URL 中缺失的 HTTPS
function addhttps(url) {
  if (!/^(f|ht)tps?:\/\//i.test(url)) {
    url = "https:" + url;
  }
  return url;
}
开发者工具的小程序UA 与实际UA 不同

开发工具中模拟的小程序UA 是类似:

… Chrome/53.0.2785.143 Safari/537.36 appservice webview/100000

而通过Nginx 的log 可以查看到实际的UA 是类似(其实就是微信的UA):

… Mobile/14E304 MicroMessenger/6.6.0 NetType/WIFI Language/zh_CN

某些情况下需要注意这些不同。

默认的Flex 布局

如果你是在官方例子的代码基础上开发你的小程序的,建议先删掉app.wxss的flex布局相关代码,会降低你遇到奇葩样式问题的概率。

wxParse 的坑1:code 字符被错误替换

小程序使用到的富文本转化是用wxParse 这个第三方库,用的时候发现有不少坑(但目前是这个库最为实用了)。其中一个就是全局的code 字符都被替换为wx-codexxx 类似的坑,作者本意应该是对code 标签进行这个替换,但可能一不小心写错了。解决方案是暂时删掉那段代码。

wxParse 的坑2:image的src多解析出一个逗号

看图说话:

基于wordpress REST API开发微信小程序实践教程(一)

上图也很好解释了上面的referer 坑与图片路径https 开头的坑。解决方案只能先改动源码(html2json.js 约L130)Fix 下:

1
2
3
4
// Fix: img 标签数组含有空字符的问题
if (imgUrl[0] == ''){
  imgUrl.splice(0, 1);
}

总结篇

至此详略得当地介绍了开发这个WordPress 版小程序的过程,接下来的工作自然是提交到官方并耐心等待审核结果的通知。整个开发过程其实并不太有难度,如果之前有使用过Angular、Vue 这类MVVM 框架,整个开发过程基本上只是看官方文档的问题。

原文链接:https://devework.com/wordpress-rest-api-weixin-weapp.html

发表留言