注册 登录

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

最近一段时间一直在研究守望轩的微信小程序,基于wordpress博客内容的展示

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

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

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

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

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

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

《小程序如何读取 WordPress 博客内容?》

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

《小程序如何读取 WordPress 博客内容?》

现在,让我将上面的 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 的例子与个人需求,将项目结构如下分好:

. ├── app.js

├── app.json

├── app.wxss

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

├── image // 图片目录

├── pages // 页面目录

├── utils // 实用 untils 类

└── wxParse // 第三方库wxParse

《小程序如何读取 WordPress 博客内容?》

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 进行渲染

点赞

发表评论

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