& 正文内容
基于wordpress REST API开发微信小程序实践教程(一)
WordPress REST API功能开发趋于完善，通过REST API可以轻易获取wordpress网站的文章数据、页面数据、用户数据等。基于wordpress开发微信小程序其实就是通过wordpress的REST API获取这些数据，然后以一定的方式在小程序端进行数据处理后使用前端代码渲染，因此基于WordPress开发微信小程序，对于不擅长写后端代码的开发者就省去了不少的烦恼。
接下来就以DeveWork开发的“DeveWork极客小程序”第一版v1.0 为例，介绍三个页面（首页、内容页、阅读记录页）大体上是如何做出来的。可以扫描下面的小程序码体验一下DeveWork极客小程序（已经不是v1.0版）
注意：要看懂本章节的内容，需要把一遍微信小程序官方开发文档，先对小程序开发有一定的了解，另外本章节也不会涉及如何写CSS（WXSS）的部分。
在微信公众平台管理后台上注册小程序账号，并配置域名等信息
配置好服务端HTTPS、
准备已经备案的域名（即“合法域名”）
提示：本例作者开发之前对WordPress REST API 进行了一些定制化的输出（如：禁止文章某些字段显示、输出post meta所有字段、输出post meta特定字段等）
结合微信官方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 供后续数据渲染：
wx.request({
success: function (response) {
self.setData({
posts: self.data.posts.concat(response.data.map(function (item) {
// 数据过滤/格式化等
return item;
}))
});
});
上面的代码我是抽出在一个函数中，方便后续重复调用。设置的数据通过index.wxml 循环输出，当前在此之前因为要做滚动加载，所以采用了小程序的scroll-view组件（）。
&scroll-view scroll-y=&true& bindscrolltolower=&pullDownRefresh&&
&block wx:for-items=&{{posts}}& wx:key=&{{item.id}}&&
&view class=&entry& index=&{{index}}& id=&{{item.id}}& catchtap=&redictSingle&&
&!--文章数据的展示，细节代码略过--&
&/scroll-view&
上面的WXML 代码中绑定了两个事件函数：一是下拉事件pullDownRefresh()，一个是点击事件redictSingle()，即点击后跳转到文章详情页。
// 下拉刷新
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({
})
文章内页（文章详情页面）
文章页使用到的REST API URL是your-site.com/wp-json/wp/v2/posts/{id}。也是类似，通过wx.request接口访问URL 然后渲染数据到WXML 页面上。代码与上面的类似就不重复了。
这里其实涉及到个如何将富文本转为微信小程序可识别的WXML的问题。因为获取的JSON 数据文章正文部分是一段HTML 代码，如果直接输出是会报错的，需要将这段HTML代码（俗称富文本）转化为微信小程序WXML语言。Jeff使用的是WxParse这个第三方库，不过这个库目前来说依然不是很完善，接上去之后发现有不少bug，还好凭借自己的技术给打补丁般一个个修复了。
使用上，按照WxParse的文档，在获取到文章数据后，经过html to wxml的步骤后赋值到page data:
// html to wxml
let article = res.data.content.rendered;
WxParse.wxParse('article', 'html', article, self, 5);
self.setData({
wxParseData: article.nodes
});
wxml上，import导入wxParse.wxml并调用：
// html to wxml
&import src=&../../wxParse/wxParse.wxml&/&
&view class=&entry__cotent &&
&template is=&wxParse& data=&{{wxParseData:article.nodes}}&/&
以上就是接入WxParse 的过程粗略介绍。
提示：小程序现在出了富文本组件（rech-text），个人评价么，暂时还比不上 wxParse。当前支持的标签有限（如pre标签不支持）且不支持绑定事件，暂时还是先用着wxParse。
阅读记录页面
阅读记录页面是用来展示用户浏览历史，直接照着官方的Hello World例子就做起来了。这个页面用到的主要如下两种接口：LocalStorage 相关接口、用户授权相关接口（wx.login，wx.getUserInfo等）。
从用户体验上考虑，不应该一开始就向用户申请授权，而是有需要的页面才申请；同时也应该做好用户不允许授权的优雅处理。在这里因为小程序的坑以及个人关系第一版处理得不是很完美，代码就不展示了。
提示：处理授权相关的内容参考本文《提升用户体验，微信小程序“授权失败”场景的优雅处理》
记录的文章阅读历史数据是以LocalStorage的形式保存在客户端而非云端，一句“阅读记录仅保存在本设备”的提示是有必要的。同时基于容量上的考虑将最多数目限制为20条。
// 调用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生命周期绑定一个更新数据的函数：
updateData: function(cb){
var that = this;
// readlog
this.setData({
readLogs: (wx.getStorageSync('readLogs') || []).map(function (log) {
return log;
})
})
主要记录在开发过程中的一些坑以及解决方案。
TabBar 的图片问题
小程序官方宣称支持SVG 图片，但在tabBar 里面的图片并不支持SVG 图片。官方推荐采用81×81 尺寸的png 图片，但这个依然有点坑。建议在设计icon 的时候稍微留点透明的padding 占位，不然会导致图标在真机上会放得很大。
图片防盗链的referer 设置
如果你托管图片的服务器有防盗链处理，那么得将servicewechat.com放入白名单中，并不是想当然的qq.com。
Image 的绝对路径必须以https 开头
image 的src 绝对路径，在web 开发中是允许类似//example.com/pic.png的以//开头的存在，这种图片路径在微信web 开发者工具也能正常显示，但在真机上就不能正常加载了，必须是https 开头的绝对路径。
服务端数据侧不好处理的话可以通过下面的util 处理：
// 补全URL 中缺失的 HTTPS
function addhttps(url) {
if (!/^(f|ht)tps?:\/\//i.test(url)) {
url = &https:& + url;
return url;
开发者工具的小程序UA 与实际UA 不同
开发工具中模拟的小程序UA 是类似：
… Chrome/53.0. 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 下：
// Fix: img 标签数组含有空字符的问题
if (imgUrl[0] == ''){
imgUrl.splice(0, 1);
至此详略得当地介绍了开发这个WordPress 版小程序的过程，接下来的工作自然是提交到官方并耐心等待审核结果的通知。整个开发过程其实并不太有难度，如果之前有使用过Angular、Vue 这类MVVM 框架，整个开发过程基本上只是看官方文档的问题。
原文链接：
相关推荐：用微信小程序连接WordPress网站 – 守望轩
70后中年大叔写程序，读书，写字，跑步关注每一天的生活和成长。
关注IT,审视自我,守望生活，宁静雅致的小轩馆。
Follow me on twitter
Follow me on facebook
微信：iamxjb
寻找遗失儿童！
“守望轩”官方小程序
微信扫描二维码，打开“守望轩”官方小程序
WordPress微信小程序知识星球
WordPress和微信小程序的知识社区
本站微信公众号
微信公众号名称：守望轩
微信公众号：iwatchlife
朋友的网站
工作并快乐着,职业并休闲着
专业设计师的笔记
远方地平线，闪耀着光芒
君看一叶舟，出没风波里。
我爱水煮鱼
万物有情，人间有味
一个基于内容分享的独立文艺情绪博客
混迹在创业圈和技术圈的原创博客
专注教育领域，分享创业、管理、个人感悟。
专注网站SEO优化、网络营销推广、策划运营的自媒体博客
自由平等，分享贡献
关注互联网，专注 WordPress 建站
wordpress中文主题
小孔的个人主页
本站所用VPS
本站使用的是的VPS,性价比还不错，每月2.5刀,512m内存,20gSSD,500g流量,有想试试这个VPS的,点击下方链接:.嘿嘿,我顺便也赚点美刀。:-)教你从零开始使用wordpress做为后台生成小程序（小白版教程）
教你从零开始使用wordpress做为后台生成小程序（小白版教程）
1服务器 最好使用Linux服务器，小白推荐安装宝塔面板。
3.小程序账号 建议注册企业账号，可以使用已认证的公众号快速创建。
4.七牛账号 CDN使用，加快网站访问速度。如需使用小程序发帖，也会用到。
1服务器 最好使用Linux服务器，小白推荐安装宝塔面板。
3.小程序账号 建议注册企业账号，可以使用已认证的公众号快速创建。
4.七牛账号 CDN使用，加快网站访问速度。如需使用小程序发帖，也会用到。
5.下载小程序源码 源码下载地址（由jianbo开发，如果大家按照此教程搭建成功，请记得赞赏jianbo，只有这样才会良性循环。记住，懂得感恩的人或获得更多，越吝啬的人越赚不了大钱。）
6.规划内容和分类 网站必须有3个以上分类，10篇以上文章（置顶两篇文章并评论）
教程目录：
一，注册并认证小程序
自己去看官方教程
二，服务器安装linux+宝塔面板+lnmp环境
1.安装纯净的centos
2.安装宝塔面板（）
3.安装lnmp环境，最好编译安装
4.解析网站到服务器，并在宝塔面板新建网站
三，安装wordpress并配置ssl
我是以宝塔面板作为案例，其他请自行百度。
宝塔面板——网站——点击网站后的设置按钮
选择你要部署ssl的域名，点击申请，稍等一会证书即可申请and自动部署。
部署好之后就可以安装wordpress了，我使用的是最新版wp+php7.0。注意不要使用5.6以下的php。
安装好之后新建三个分类目录 每个目录发表三篇以上文章，将其中几篇置顶并评论下。新建一个页面，用于关于我们页面。
四，wordpress伪静态+缓存优化+CDN加速
安装好wp后，进入后台，选择设置--固定连接-自定义，填入/%post_id%.html
进宝塔面板设置一下伪静态规则
location / {
if (-f $request_filename/index.html){
rewrite (.*) $1/index.
if (-f $request_filename/index.php){
rewrite (.*) $1/index.
if (!-f $request_filename){
rewrite (.*) /index.
rewrite /wp-admin$ $scheme://$host$uri/
2.缓存优化
所需文件下载地址：
缓存的优点和其他乱七八糟的就不说了，直接上步骤
a 宝塔面板 php版本里安装memcached（php7.0的 opcache也可以安装）
b上传两个文件到wp-content目录下
c上传memcache.php到根目录 访问这个文件就可以看到缓存信息（记得改文件里边的用户名密码）
3.使用七牛cdn加速静态资源
五：安装插件
1.安装wp-rest-api-for-app，下载地址：
下载后在后台直接安装即可
2.安装插件后会在文章分类目录里新增一个选项 ，这里可以放分类的图片地址，在小程序里体现为专题页面的专题封面
六，修改小程序源码
1.显示网站内容：修改utils-api.js下的域名为你自己的域名，基本就可以拉取内容了
2.关于我们页面：
新建一个页面并取到id
在pages-about-about.js下修改id
3.一些简单的ui美化
4.点击分享生成 【带小程序二维码的分享卡片 】用来分享到朋友圈
分享朋友圈卡片制作六，高级版模版源码修改
主页修改，动态修改，地图修改
用云栖社区APP，舒服~
【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题，通过回答传承技术知识、经验、心得，问答专家期待你加入！&&
一种高性能、高可靠、可平滑扩容的分布式内存数据库服务。
云数据库 HBase 版（ApsaraDB for HBase）是基于 Hadoop 的一个...
基于飞天分布式系统和高性能存储，提供三节点副本集的高可用架构，容灾切换，故障迁移完全透明化。...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效...
阿里云总监课正式启航全部项目分类
<ins class="adsbygoogle"
style="display:inline-width:250height:250px"
data-ad-client="ca-pub-9510"
data-ad-slot=""
<ins class="adsbygoogle"
style="display:inline-width:250height:250px"
data-ad-client="ca-pub-9510"
data-ad-slot=""
WordPress连接微信小程序介绍：
使用WordPress的Api做微信小应用（实现了数据的读取、展示加载）
本微信小程序主要通过来完成的
WP微信小程序图片：
更新历史：
1、第一版本。
1、修复视频的问题
2、加入分享 （详述可以打开我的微信小程序）
1、优化代码
2、下一个版本，不再公布
WordPress 微信小程序
选择将代码托管在码云你还在等什么
可能是中国最大最好的代码托管平台
{{ repayCom.commentTime }}
8个月前发布&&
0 评 / 131 阅
0 评 / 90 阅
发送私信给: 李光春
评论 WordPress 微信小程序
还可以输入字
评论 WordPress 微信小程序注册 | 登录
产品经理、新媒体、数据分析三栖玩家
产品经理就业班，12周特训，测、练、实战，22位导师全程带班，200+名企内推，保障就业！
小程序能否成为新的流量入口，只有试了才会知道。
最近一段时间加班很凶，但我还是抽出3小时的时间做了一个小程序。是的，3小时从建网站到申请https访问到生成小程序体验版（个人开发者暂时不能提供资讯类服务，所以只能停留在体验版本了）。
更重要的是，这个3小时生成的小程序五脏俱全：
内容与网站实时同步；
用户可评论、点赞，甚至赞赏（用户赞赏后自动显示头像）；
文章数据实时同步，可根据阅读、评论、点赞和赞赏数对文章进行排行；
可自定义首页轮播图、内容栏目（主题），以及在小程序内进行搜索。
你也不需要编程知识，点击十几次“下一步”，然后修改几行代码（主要是名称、AppID之类个性化内容）就可以入手一枚属于自己的小程序了。如果了解一些CSS和HTML知识，还可以自定义修改一些样式，比如做成这样：
更更重要的是，除了服务器费用，不需要任何其他花销，代码是完全开源的。
前面说的这么神，该兜底了：
这个3小时把网站转换成的小程序是基于WordPress建站的开源代码，由@Jianbo开源。截止目前正在使用Jianbo开源代码搭建小程序的开发者至少已有350个。
这是一件非常伟大的事情，对小程序来说是一次“跃进”，它把为小程序与内容链接的桥梁铺的更平坦：不再需要繁杂的内容搬运，也不再需要钻研代码（或者投入开发）。
WordPress的强大之处已无需多言，以博客建站为起点，现在已经丰富到了商城、企业官网、论坛等多种形式。WordPress的官方网站每天有目3亿的访问量，目前约有上百万开发者仍在持续的维护着近千万个主题及插件。
因为它是完全开源的，并且基于PHP语言开发，理论上你可以使用它实现你的所有建站设想。即便没有任何编程知识，凭借其可视化的操作指引，你也可以分分钟搭建一个UI出色的个人站点。此外，它的主题修改和插件安装都是基于独立代码包的，这在后台可以实现秒级的安装和切换。
为WordPress安装API插件后，你便可以实时同步网站的所有内容，而这也是一键生成小程序的关键所在。
小程序的所有数据均可通过数据绑定（{{data}}用法）在页面之间传递，使用这个传递规则，我们便可以把网站服务器端的数据通过API的形式请求到小程序的页面中显示出来。
除了开放小程序源码外，该小程序的开源者还发布了为微信小程序、app提供定制WordPress rest API（插件还未通过官方审核，目前仅支持自定义上传代码包方式安装），这就为WordPress与小程序的连接打下了坚实的基础。
小程序能否通过与网站的连接，再次繁荣呢？
前段时间曾发文讨论过小程序的爆发点会在什么地方。随着双十一的结束，关于小程序电商的讨论逐渐冷却下来，工具又逐渐成为小程序的主要发力点。但是，小程序工具的开发是存在难度的，定制化的功能需要多个组件和API组合才能完成，这需要非常复杂的代码逻辑，对一般开发者来说是一个不低的门槛。
除此以外，工具的使用频次也是限制其成为小程序爆发点的关键因素：频次足够高的时候开发者完全可以把它作为一款独立的APP去运营推广，而低频的工具对于开发者来说又没有足够的驱动力。
已经有很多小程序获得了融资，这表示工具类小程序越来越得到资本和市场的重视。但我们仍需思考：当用户量达到千万级别时，小程序还足够承载他们的“野心”么？
与工具从小程序与APP之间的转换相同，“内容”也在多种介质之间不断转换。
“内容创业”这个词，经过2016年的宣传，已经被越来越多的人熟知。随着今日头条、阿里、腾讯、百度等内容巨头的重金投入，经过两年的发展，内容已经成为互联网行业中至关重要的一环。
内容从博客走到了微信公众号再走向各大自媒体平台，但内容生产者们似乎从来不曾真正的拥有过它们。除了生产内容外，作者还需要花费大量的心思去研究平台的分发规则、传播红线以及流量收益。一步走错，满盘皆输已经在6个月前大规模出现过一次，除了丰富内容矩阵、创建“小号”外，大量自媒体人开始维护自己的站点（比如毒舌电影）。
多渠道分发已成为内容行业的“标准格式”
百度似乎也窥探到了这个趋势，在今年的百度世界大会上宣布开通了“熊掌号”，站长可以通过熊掌号将自己网站的数据共享给百度搜索引擎，用户搜索时可以获取到网站结构化的数据展示。
内容开始有了更多元化的展示，从公众号到APP到网站，作者也拥有了更多的内容所有权。内容行业会不会向着更“私有”的方式发展，我们不知道。但目前来看，作者把内容控制在自己手里的欲望变得越来越强。
当然，是否有必要在微信生态上同步两次仍然有待商榷，但至少作为扩展阅读，小程序比“阅读原文”更好用。（注：此处使用扫码替代，在微信原生图文环境下，可直接点击小程序卡片进入）
微信扫描小程序码阅读更多WordPress相关文章
在当前形势下，没有一个创业者会拒绝更多的流量，多渠道分发已经成为内容行业的常态，恰好微信在不断地为小程序赋能。
小程序的开发者们也在不断的尝试着如何把内容通过小程序以更好的形式展示给用户，比如布本智能团队开发的“轻刊”小程序，就以群早报的形式，由人工对公众号的内容进行聚合，为公众号的文章带来二次传播：
微信扫描小程序码阅读“轻刊”小程序早报
除了内容的分发，小程序向公众号的逆向引流也已逐渐探索出了道路，知乎团队开源了weapp-redux插件（），当用户使用小城的客服功能时，可以自动接收到小程序推送的链接，该链接为知乎公众号的历史文章页面。这个页面是除了公众号账号信息页面外，最容易引导用户关注的地方。
当用户可以在公众号-网站-小程序三者中间无障碍双向流动时，小程序就已经成为内容生态中的一环了。
小程序能否成为新的流量入口，只有试了才会知道。
作者：野蛮人诺基亚，公众号：喜新（ID：noyanjiu）
本文由 @野蛮人诺基亚 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 unsplash，基于 CC0 协议
赞赏是对原创者的最大认可
赞赏4人打赏
收藏已收藏 | 59赞已赞 | 15
产品经理、新媒体、数据分析三栖玩家
产品经理群
运营交流群
品牌营销群
文案交流群
Axure交流群
关注微信公众号
大家都在问
7个回答1人关注
6个回答1人关注
3个回答0人关注
8个回答9人关注
6个回答2人关注
17个回答26人关注}