我用WordPress做了一款小而美的博客小程序

关于丸子Mini版

上半年已经结束了，丸子的各大产品都在不断的更新迭代，之前大家一直喊着做一款小众的小程序主题，最近抽空做了一套出来，目前命名为[丸子Mini版]，主要是简洁哈哈~

关于WordPress等一些配置我们看上一篇文章的说明。

在线体验

直接扫码体验即可哈哈~欢迎大家建议。

开发技术栈

后端为基于强大的WordPress系统驱动+丸子自主研发的API插件驱动数据，前端技术为原生小程序语言开发+wxParse 文章富文本解析第三方库，当然你也可以选择其他的，看个人使用习惯。

准备工作

准备工作就不细说，大体上包括如下操作：一是微信公众平台管理后台上注册小程序账号，配置域名等信息；二是服务端确保配置好HTTPS、“合法域名”这块是已经备案的域名。

另外在开始开发之前，我在服务端对WordPress REST API 进行了一些定制化的输出，这个很早就写了接下来几天我专门写个关于这个的文章吧这里就不细说了。

项目结构

结合微信官方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 供后续数据渲染：

// https://devework.com/wordpress-rest-api-weixin-weapp.html
wx.request({
    url: url,
    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">
          <!--文章数据的展示，细节代码略过-->
	     </view>
    </block>
</scroll-view>

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

// https://devework.com/wordpress-rest-api-weixin-weapp.html
// 下拉刷新
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({
        url: url
    })
}

文章内页（文章详情页面）

文章页使用到的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:

// https://devework.com/wordpress-rest-api-weixin-weapp.html
// 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 并调用：

// https://devework.com/wordpress-rest-api-weixin-weapp.html
// html to wxml
<import src="../../wxParse/wxParse.wxml"/>
<view class="entry__cotent ">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

以上就是接入WxParse 的过程粗略介绍，更多开发技术分享下期我们在详细说。

分类板块

首页主要是首页推荐跟分类两大板块，以及我的模块。

功能模块

首页功能

首页置顶文章、以及文章阅读数量展示、点赞数量展示、

首页信息流文章转发微信好友以及微信群功能；

首页信息流穿插流量主广告展示、热门标签展示可直接跳转对应的文章信息；

文章详情页最顶部展示了分类板块(分类图标、分类简介、分类跳转按钮)可直接跳转分类版本，良好的用户体验；

详情页功能

文章详情页第一部分展示作者昵称、发文时间(年月日时分秒信息)，方便查看者记录时间，中间就是内容展示；

文章详情页右下角跳转下一篇按钮，这个功能很适合写日记或者做小说的朋友；

文章详情页内容下面为本篇文章标签，点击可以查看这一类型的所有文章方便用户体验；

文章详情页标签下面为好友(转发好友/微信群)、海报生成、链接(当前文章网页版对应连接方便倒流)很棒的功能；

文章详情页最底部就是评论(接入安全信息校验)、点赞功能、收藏功能。

分类页功能

实时同步网站分类信息，展示分类下面的文章数量以及信息，可以转发当前分类到微信好友/朋友圈。

我的页面功能

我的：用户登录(昵称跟头像展示)、我点赞的(你点赞过的文章)、我的评论(你评论过的文章)、关于小程序(小程序名称介绍)、我点赞的(你点赞过的文章)、订阅更新(用户点击订阅以后你更新文章小程序会推送用户提醒)、联系客服(小程序原生功能)、清除缓存(清理小程序缓存)