手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序

开始动手,做一个 WP 小程序
上一章节大致介绍了原理后,接下来就以本站开发的「DeveWork 极客」小程序第一版为例,介绍三个页面(首页、内容页、阅读记录页)大体上是如何做出来的。
1. 准备工作
准备工作就不细说,大体上包括如下操作。
  • 在微信公众平台管理后台上注册小程序账号,配置合法域名等信息。
  • 二是服务端确保配置好 HTTPS(但不一定要求备案)。
另外在开始开发之前,我在服务端对 WordPress REST API 进行了一些定制化的输出。
2. 项目结构
结合微信官方 quick start 的例子与个人需求,将项目结构如下分好:

手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序

手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序
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 进行渲染

手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序

我将这些代码封装在函数中,方便后续重复调用。
设置的数据通过 index.wxml 循环输出。因为要做滚动加载,所以采用了小程序的 scroll-view 组件。

手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序

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

手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序

4. 构建文章详情页
文章页使用到的 API 地址是 your-site.com/wp-json/wp/v2/posts/{id}类似地,通过 wx.request 接口访问 URL,然后渲染数据到 WXML 页面上。
代码与上面的类似,就不再重复。但需要提醒的是,这里涉及到如何将富文本转为微信小程序可识别的 WXML 的问题。
因为获取的 JSON 数据中,文章正文部分是一段 HTML 代码。如果将 HTML 直接输出到小程序中,是会报错的。
我们需要将这段 HTML 代码转化为微信小程序 WXML 语言,下一章节我会介绍这个过程。
5. 阅读记录页面
手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序
阅读记录页面是用来展示用户浏览历史,直接照着官方的 Hello World 例子就做起来了。
这个页面用到的主要如下两种接口:本地缓存相关接口、用户授权相关接口(wx.loginwx.getUserInfo 等)。
从用户体验上考虑,不应该一开始就向用户申请授权,而是有需要的页面才申请。同时,也应该做好用户拒绝授权的优雅处理。
关注「知晓程序」微信公众号,在微信后台回复「用户信息」,查看小程序如何正确地获取用户资料。
记录的文章阅读历史数据是以本地缓存的形式保存在客户端,而非云端。所以,一句「阅读记录仅保存在本设备」的提示,是有必要的。
同时,基于小程序缓存限制的考虑,我将记录上限设为 20 篇。

手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序

上面的代码,其实是放在 single.js 里面的。因为我需要将文章 ID 与标题保存,而只有 single.js,才会同时获取这两种数据。
手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序
最后,我还需要在 log.jsonShow 生命周期函数中,绑定一个更新数据的函数:

手把手教你把 WordPress 做成小程序:开始动手,做一个 WP 小程序

 

点赞

发表评论

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