开发 | 无需后端编码，手把手教你把 WordPress 做成小程序

文 | Jeff

这篇文章，记录的就是我自己在开发第一版小程序的过程。

知晓程序（微信号 zxcx0101）今天分享的这篇文章，将一步步讲解，如何将一个 WordPress 网站借助 REST API 开发微信小程序版。

关注「知晓程序」公众号，在微信后台回复「开发」，获取小程序开发技巧精选文章。

小程序如何读取 WordPress 博客内容？

WordPress 在 4.6 版本推出了 REST API。简单来说，它是一种通过 HTTP 请求完成的客户端与服务端数据交互方案。

我们访问平常的普通 WordPress 网站，在没有开启静态缓存的情况下，大致需要「从数据库拉取数据 → 服务端 PHP 进程拼成 HTML → 用户浏览器界面」的过程。

REST API 的处理过程类似，但稍微不同的是：输出的是 JSON 格式的数据，且一般是给客户端（非网页浏览器）使用。

有了 REST API，一个网站制作不同客户端（Android 或 iOS 的 app，以及微信小程序），而共享一个数据库成为了可能。

我们可通过浏览器，直接访问 WordPress 的其中一个接口地址：your-site.com/wp-json/wp/v2/posts?per_page=5&page=1，你可能会看到类似这样的返回。

现在，让我将上面的 URL 解释下。

• /wp-json/wp/v2/ 是WordPress 定义的 REST API 路由（router）与版本号等的组合。

• posts 在 WordPress 中，称为「终点」（endpoint）。

• per_page 与 page 则是参数。

上面的 URL，表示输出第 1 页最新 5 篇文章的数据（5 篇为 1 页）。

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

WordPress 的 REST API 已经很完善了，什么文章数据、页面数据、用户数据等都不在话下。

把 WordPress 作为小程序的后端，实在是省了不少人力，至少对我们这些前端狗来说，不用写苦逼的后端代码。

开始动手，做一个 WP 小程序

上一章节大致介绍了原理后，接下来就以本站开发的「DeveWork 极客」小程序第一版为例，介绍三个页面（首页、内容页、阅读记录页）大体上是如何做出来的。

1. 准备工作

准备工作就不细说，大体上包括如下操作。

• 在微信公众平台管理后台上注册小程序账号，配置合法域名等信息。

• 二是服务端确保配置好 HTTPS（但不一定要求备案）。

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

2. 项目结构

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

3. 构建文章列表页面

小程序的首页，就是文章列表页面。启动小程序时，会展示最新的 5 篇文章，然后通过下拉流式加载更多文章。

在这里，我们用到的 WordPress REST API 就是 your-site.com/wp-json/wp/v2/posts?per_page={num}&page={num}。

index.js 文件的核心，是通过 wx.request 接口，访问上面的 API URL 获取到文章数据，再 setData 进行渲染。

我将这些代码封装在函数中，方便后续重复调用。

设置的数据通过 index.wxml 循环输出。因为要做滚动加载，所以采用了小程序的 scroll-view 组件。

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

4. 构建文章详情页

文章页使用到的 API 地址是 your-site.com/wp-json/wp/v2/posts/{id}。类似地，通过 wx.request 接口访问 URL，然后渲染数据到 WXML 页面上。

代码与上面的类似，就不再重复。但需要提醒的是，这里涉及到如何将富文本转为微信小程序可识别的 WXML 的问题。

因为获取的 JSON 数据中，文章正文部分是一段 HTML 代码。如果将 HTML 直接输出到小程序中，是会报错的。

我们需要将这段 HTML 代码转化为微信小程序 WXML 语言，下一章节我会介绍这个过程。

5. 阅读记录页面

阅读记录页面是用来展示用户浏览历史，直接照着官方的 Hello World 例子就做起来了。

这个页面用到的主要如下两种接口：本地缓存相关接口、用户授权相关接口（wx.login，wx.getUserInfo 等）。

从用户体验上考虑，不应该一开始就向用户申请授权，而是有需要的页面才申请。同时，也应该做好用户拒绝授权的优雅处理。