几周前，我花了两天韶光，将自己的%20WordPress%20网站做了个微信小程序版本。
这篇文章，记录的便是我自己在开拓初版小程序的过程。
知晓程序（微旗子暗记%20zxcx0101）本日禀享的这篇文章，将一步步讲解，如何将一个%20WordPress%20网站借助%20REST%20API%20开拓微信小程序版。
关注「知晓程序」"大众年夜众号，在微信后台回答「开拓」，获取小程序开拓技巧精选文章。
小程序如何读取%20WordPress%20博客内容？
WordPress%20在%204.6%20版本推出了%20REST%20API。大略来说，它是一种通过%20HTTP%20要求完成的客户端与做事端数据交互方案。
我们访问平常的普通%20WordPress%20网站，在没有开启静态缓存的情形下，大致须要「从数据库拉取数据%20→%20做事端%20PHP%20进程拼成%20HTML%20→%20用户浏览器界面」的过程。
REST%20API%20的处理过程类似，但轻微不同的是：输出的是%20JSON%20格式的数据，且一样平常是给客户端（非网页浏览器）利用。
有了%20REST%20API，一个网站制作不同客户端（Android%20或%20iOS%20的%20app，以及微信小程序），而共享一个数据库成为了可能。
我们可通过浏览器，直接访问%20WordPress%20的个中一个接口地址：
your-site.com/wp-json/wp/v2/posts?per_page=5&page=1
，你可能会看到类似这样的返回。
现在，让我将上面的%20URL%20阐明下。
/wp-json/wp/v2/
是WordPress%20定义的%20REST%20API%20路由（router）与版本号等的组合。
posts
在%20WordPress%20中，称为「终点」（endpoint）。
per_page
与
page
则是参数。
上面的%20URL，表示输出第%201%20页最新%205%20篇文章的数据（5%20篇为%201%20页）。
微信小程序通过%20REST%20API，可以获取到%20WordPress%20网站上的数据。对数据进行处理后，通过前端代码渲染，便是你在微信客户端上看到的界面。
WordPress%20的%20REST%20API%20已经很完善了，什么文章数据、页面数据、用户数据等都不在话下。
把%20WordPress%20作为小程序的后端，实在是省了不少人力，至少对我们这些前端狗来说，不用写苦逼的后端代码。
开始动手，做一个%20WP%20小程序
上一章节大致先容了事理后，接下来就以本站开拓的「DeveWork%20极客」小程序初版为例，先容三个页面（首页、内容页、阅读记录页）大体上是如何做出来的。
1.%20准备事情
准备事情就不细说，大体上包括如下操作。
在微信"大众年夜众平台管理后台上注册小程序账号，配置合法域名等信息。
二是做事端确保配置好%20HTTPS（但不一定哀求备案）。
其余在开始开拓之前，我在做事端对%20WordPress%20REST%20API%20进行了一些定制化的输出。
2.%20项目构造
结合微信官方%20quick%20start%20的例子与个人需求，将项目构造如下分好：
.├──%20app.js├──%20app.json├──%20app.wxss%20├──%20config.js%20//%20配置文件├──%20image%20//%20图片目录├──%20pages%20//%20页面孔录├──%20utils%20//%20实用%20untils%20类└──%20wxParse%20//%20第三方库wxParse
3.%20构建文章列表页面
小程序的首页，便是文章列表页面。启动小程序时，会展示最新的%205%20篇文章，然后通过下拉流式加载更多文章。
在这里，我们用到的%20WordPress%20REST%20API%20便是
your-site.com/wp-json/wp/v2/posts?per_page={num}&page={num}
。
index.js
文件的核心，是通过
wx.request
接口，访问上面的%20API%20URL%20获取到文章数据，再
setData
进行渲染。
//%20https://devework.com/wordpress-rest-api-weixin-weapp.htmlwx.request({%20%20%20%20url:%20url,%20%20%20%20success:%20function%20(response)%20{%20%20%20%20%20%20%20%20self.setData({%20%20%20%20%20%20%20%20%20%20%20%20posts:%20self.data.posts.concat(response.data.map(function%20(item)%20{%20%20%20%20%20%20%20%20%20%20%20%20%20...%20%20%20%20%20%20%20%20%20%20%20%20%20//%20数据过滤/格式化等%20%20%20%20%20%20%20%20%20%20%20%20%20...%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20item;%20%20%20%20%20%20%20%20%20%20%20%20}))%20%20%20%20%20%20%20%20});%20%20%20%20}%20%20});}
我将这些代码封装在函数中，方便后续重复调用。
设置的数据通过
index.wxml
循环输出。由于要做滚动加载，以是采取了小程序的
scroll-view
组件。
上面的%20WXML%20代码中，绑定了两个事宜函数：一是下拉事宜
pullDownRefresh
，一个是点击跳转至文章页面的事宜
redictSingle
。
//%20下拉刷新pullDownRefresh:%20function%20(event)%20{%20%20%20%20var%20self%20=%20this;%20%20%20%20self.setData({%20%20%20%20%20%20%20%20page:%20self.data.page%20+%201%20//页面+1%20%20%20%20});%20%20%20%20console.log('current%20page:'%20+%20self.data.page);%20%20%20%20this.fetchData({%20page:%20self.data.page%20});},%20//%20路由导航到文章内页redictSingle:%20function%20(event)%20{%20%20%20%20console.log('redictSingle');%20%20%20%20var%20id%20=%20event.currentTarget.id;%20//%20这里的id%20实在是WordPress%20中的文章id，须要通报到single%20页面%20%20%20%20var%20url%20=%20'../single/single?id='%20+%20id;%20%20%20%20wx.navigateTo({%20%20%20%20%20%20%20%20url:%20url%20%20%20%20})}
4.%20构建文章详情页
文章页利用到的%20API%20地址是
your-site.com/wp-json/wp/v2/posts/{id}
。类似地，通过
wx.request
接口访问%20URL，然后渲染数据到%20WXML%20页面上。
代码与上面的类似，就不再重复。但须要提醒的是，这里涉及到如何将富文本转为微信小程序可识别的%20WXML%20的问题。
由于获取的%20JSON%20数据中，文章正文部分是一段%20HTML%20代码。如果将%20HTML%20直接输出到小程序中，是会报错的。
我们须要将这段%20HTML%20代码转化为微信小程序%20WXML%20措辞，下一章节我会先容这个过程。
4.%20阅读记录页面
阅读记录页面是用来展示用户浏览历史，直接照着官方的%20Hello%20World%20例子就做起来了。
这个页面用到的紧张如下两种接口：本地缓存干系接口、用户授权干系接口（
wx.login
，
wx.getUserInfo
等）。
从用户体验上考虑，不应该一开始就向用户申请授权，而是有须要的页面才申请。同时，也该当做好用户谢绝授权的优雅处理。
关注「知晓程序」微信"大众号，在微信后台回答「用户信息」，查看小程序如何精确地获取用户资料。
记录的文章阅读历史数据因此本地缓存的形式保存在客户端，而非云端。以是，一句「阅读记录仅保存在本设备」的提示，是有必要的。
同时，基于小程序缓存限定的考虑，我将记录上限设为%2020%20篇。
//%20调用API从本地缓存中获取阅读记录并记录var%20logs%20=%20wx.getStorageSync('readLogs')%20||%20;//%20过滤重复值if%20(logs.length%20>%200)%20{%20%20%20%20logs%20=%20logs.filter(function%20(log)%20{%20%20%20%20%20%20%20%20return%20log[0]%20!==%20id;%20%20%20%20});}//%20如果超过指天命量if%20(logs.length%20>%2019)%20{%20%20%20%20logs.pop;//去除末了一个}%20logs.unshift([id,%20response.data.title.rendered]);wx.setStorageSync('readLogs',%20logs);
上面的代码，实在是放在
single.js
里面的。由于我须要将文章%20ID%20与标题保存，而只有
single.js
，才会同时获取这两种数据。
末了，我还须要在
log.js
的
onShow
生命周期函数中，绑定一个更新数据的函数：
updateData:%20function(cb){%20%20var%20that%20=%20this;%20%20//%20readlog%20%20%20this.setData({%20%20%20%20readLogs:%20(wx.getStorageSync('readLogs')%20||%20).map(function%20(log)%20{%20%20%20%20%20%20return%20log;%20%20%20%20})%20%20})},
开拓过程中，我踩的坑
这个章节紧张记录在开拓过程中的一些坑，以及我所采取的办理方案。
1.%20Tab%20Bar%20的图片问题
小程序官方流传宣传支持%20SVG%20图片，但%20tab%20bar%20并不支持%20SVG%20图片。
官方推举采取%2081%20px%20×%2081%20px%20尺寸的%20PNG%20图片，但这个依然有点坑。
建议在设计%20icon%20的时候，为%20tab%20bar%20的图标轻微留点透明的%20padding，不然，图标在真机上会放得很大。
2.%20图片防盗链的%20referer%20设置
如果你托管图片的做事器有防盗链处理，那么得将
servicewechat.com
放入白名单中。记得，这个白名单不是
qq.com
。
3.
image
组件的绝对路径，必须以%20HTTPS%20开头
image
组件的
src
绝对路径，在%20web%20开拓中是许可类似
//example.com/pic.png
这种省略协议名的存在。
这种图片路径，在微信 web 开拓者工具也能正常显示。但是，在真机上就不能正常加载了。在真机上必须是 HTTPS 开头的绝对路径。
做事端数据侧不好处理的话，可以通过下面的函数处理：
// 补全URL 中缺失落的 HTTPSfunction addhttps(url) { if (!/^(f|ht)tps?:\/\//i.test(url)) { url = \"大众https:\"大众 + url; } return url;}
4. 开拓者工具的小程序 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
某些情形下须要把稳这些不同。
5. 默认的 Flex 布局
如果你是在官方例子的代码根本上开拓你的小程序的，建议先删掉
app.wxss
的 Flex 布局干系代码。这样做，会降落你碰着奇葩样式问题的概率。
6. wxParse 的坑
小程序利用到的富文本转化是用 wxParse 这个第三方库，用的时候创造有不少坑（但目前是这个库最为实用了）。
个中一个，便是全局的 code 字符都被更换为
wx-codexxx
，作者本意该当是对 code 标签进行这个更换，但可能一欠妥心写错了。
办理方案，只能是暂时删掉那段代码。
其余，利用 wxParse 的时候，
image
组件中的
src
属性，会多解析出一个逗号。
看图说话：
上图也很好阐明了上面的 referer 坑与图片路径 HTTPS 开头的坑。办理方案，只能先改动源码（
html2json.js
）来修复：
// Fix: img 标签数组含有空字符的问题if (imgUrl[0] == ''){ imgUrl.splice(0, 1);}
关于富文本，好是，官方的富文本组件已经发布。
关注「知晓程序」微信"大众年夜众号，在微信后台回答「富文本」，查看小程序富文本组件新能力解读。
末了的话
至此，我也算是详略得当地，先容了开拓 WordPress 版小程序的过程。接下来的事情，自然是提交到官方并耐心等待审核结果的关照。
全体开拓过程实在并不太有难度，如果之前有利用过 Angular、Vue 这类 MVVM 框架，全体开拓过程基本上只是看官方文档的问题。
「DeveWork 极客」小程序利用链接
https://minapp.com/miniapp/3016/
原文地址：https://devework.com/wordpress-rest-api-weixin-weapp.html
以下为网友评论：
网友“小103224036”：官方的富文本也不好用
网友“FG云视频”：你以为说这么详细我就懂了吗，太天真了[来看我][来看我]
网友“偶偶30498586”：太高大上了 看不懂
网友“詹姆士张”：小程序能推送吗？
网友“一抹天真丢失在了曾经”：[爱慕]
