WordPress 网站基于REST API 开发“微信小程序”实战

本文原连接：https://devework.com/wordpres...，转载请明链注明原始来源谢谢！

---

几周前，Jeff 花了两天将本身的WordPress 网站作了个微信小程序版本（详细见该文）。这篇文章主要记录本身在开发初版的过程，顺便为有兴趣的你剖析如何将一个WordPress 网站借助 REST API 开发微信小程序版。本文目标受众为了解WordPress 且有初级前端知识的同窗。

原理篇

WordPress 与 REST API

WordPress 在4.6 版本后推出了 REST API， REST API 简单来讲就是一种经过 HTTP 请求来获取、更新、删除数据的一种链接客户端与服务端的交互方式。咱们访问日常的普通 WordPress 网页，在没有开启静态缓存的状况下，大概是走“从数据库拉取数据—> 服务端 PHP 进程拼成 HTML 直接输出 —> 用户浏览器界面”的过程， REST API 也是相似步骤，但后面两步稍微不一样：输出的是 JSON 格式的数据且通常是给客户端使用。有了REST API，一个网站制做各类网站版本（安卓版、iOS 版、以及接下来讲的小程序版）而共享一个数据库成为了可能。

（原图来自wisdmlabs，稍做修改）

以本站为例，可经过浏览器直接访问REST API 的其中一种URL：https://devework.com/wp-json/wp/v2/posts?per_page=5&page=1 （若是你如今直接访问是403 报错，那是我为了安全而设置的拦截，请自行替换为本身网站的域名），你可能会看到以下图左侧的界面；若是你使用Chrome 浏览器且安装JSONView 插件则为下图右侧的界面。

且让Jeff 将上面的URL 解释下，/wp-json/wp/v2/ 这个是WordPress 定义的REST API 的“路由”（router）与版本号等的组合，posts 在WordPress中称为“终点” （endpoint），per_page 与page 则是相关参数。 关于REST API 的名词解释能够参考阮老师的文章。上面的URL 即表示输出第1页最新5篇文章的数据（5篇为1页）。这个URL 接下来将要用到。

微信小程序

微信小程序就很少介绍了，虽然刚开始不温不火，但接下来必然是在国内互联网占据必定的地位。本文在这里也很少谈什么小程序前景如何这些空大话，既然你看到这儿必然是对小程序有兴趣且在某种程度上有必定的确定。

WordPress + 小程序

微信小程序经过 REST API 获取到 WordPress 网站上的数据，而后经过必定的方式进行数据处理后经过前端代码渲染，而后就是你在微信客户端上看到的界面。

WordPress 的REST API 如今开发得已经很完善了，什么文章数据、页面数据、用户数据等都不在话下，把 WordPress 做为小程序的后端实在是省了很多人力，至少对咱们这些前端狗来讲不用写苦逼的后端代码。

开发篇

上一章节大体介绍了原理后，接下来就以本站开发的“DeveWork+”小程序初版v1.0 为例，介绍三个页面（首页、内容页、阅读记录页）大致上是如何作出来的。能够扫描下面的小程序码体验一下，注意看文章的此时你扫描进入的版本可能不是否是初版了。要看懂本章节的内容，须要你对小程序开发有必定的了解（不要求看完文档，但至少也跑一下官方的例子吧）。另外本章节也不会涉及如何写CSS（WXSS）的部分，默认读者有这方面的基础。

准备工做

准备工做就不细说，大致上包括以下操做：一是微信公众平台管理后台上注册小程序帐号，配置域名等信息；二是服务端确保配置好HTTPS、“合法域名”这块是已经备案的域名。

另外在开始开发以前，我在服务端对WordPress REST API 进行了一些定制化的输出。

项目结构

结合微信官方quick start 的例子与我的需求，将项目结构以下分好：

├── app.js

├── app.json

├── app.wxss 

├── config.js // 配置文件

├── image // 图片目录

├── pages // 页面目录

├── utils // 实用untils 类

└── wxParse // 第三方库wxParse

小程序首页（文章列表页面）

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

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

// https://devework.com/wordpress-rest-api-weixin-weapp.html

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组件（官方文档）。

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

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// 下拉刷新

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/post/{id}。也是相似，经过wx.request 接口访问URL 而后渲染数据到WXML 页面上。代码与上面的相似就不重复了。

这里其实涉及到个如何将富文本转为微信小程序可识别的WXML 的问题。由于获取的JSON 数据文章正文部分是一段HTML 代码，若是直接输出是会报错的，须要将这段HTML 代码（俗称富文本）转化为微信小程序WXML 语言。Jeff 使用的是WxParse 这个第三方库，下一章节会有介绍。

阅读记录页面

阅读记录页面是用来展现用户浏览历史，直接照着官方的Hello World 例子就作起来了。这个页面用到的主要以下两种接口：LocalStorage 相关接口、用户受权相关接口（wx.login，wx.getUserInfo等）。

从用户体验上考虑，不该该一开始就向用户申请受权，而是有须要的页面才申请；同时也应该作好用户不容许受权的优雅处理。在这里由于小程序的坑以及我的关系初版处理得不是很完美，代码就不展现了。

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

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// 调用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才同时获取这两种数据。

最后还须要在log.js 的onShow生命周期绑定一个更新数据的函数：

// https://devework.com/wordpress-rest-api-weixin-weapp.html

updateData: function(cb){

        var that = this;

        // readlog 

        this.setData({

            readLogs: (wx.getStorageSync('readLogs') || []).map(function (log) {

                return log;

            })

        })

    },

踩坑篇

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

TabBar 的图片问题

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

图片防盗链的referer 设置

若是你托管图片的服务器有防盗链处理，那么得将servicewechat.com放入白名单中，并非想固然的qq.com。

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

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

服务端数据侧很差处理的话能够经过下面的util 处理：

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// 补全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 多解析出一个逗号

看图说话：

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

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// Fix: img 标签数组含有空字符的问题

if (imgUrl[0] == ''){

  imgUrl.splice(0, 1);

}

关于富文本这个，好消息是官方的富文本组件已经在路上。

总结篇

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

但愿本文对你有帮助，若是有疑问能够留言讨论，谢谢~ 本站后续也会有一系列关于小程序开发的文章，欢迎关注。

本站有关小程序的文章：https://devework.com/tag/weapp

---

本文原连接：https://devework.com/wordpres...，转载请明链注明原始来源谢谢！