小程序版博客——整体框架搭建
本篇主要记录下自己搭建小程序版博客的整体框架过程及自己在搭建过程中学习到点和一些坑。
开发前的一些思考
在开发前，还是要稍微想下到底需要哪些功能，哪些页面，尽量有一些计划性（这对所有着手做的事都是一个道理）。
利用Xmind稍微梳理下，明确下主要开发内容，后期开发过程中有问题点或者需要扩展也可以简单在树形图中扩展，至于画原型就省略了，基本按照自己的审美来吧。
然后就是找个UI库了，像我这种半吊子的前端渣渣，还是需要找个轮子用下的，看了开源的有赞UI库，感觉还不错，就用它了。
最后还需要一个第三方插件，将html格式的富文本内容转换成小程序可展示的内容，在网上找了一大圈，貌似只找到wxParse，先尝试着使用，但后面接入后发现，展示文章的样式效果不是特别理想。
框架搭建
页面创建及引入组件
下面就正式开始搭建项目，新增项目之后，在pages把对应的页面加好（首页，专题，我的，详情页）。
接着引入有赞UI库，在github上下载后，在dist文件夹引入项目，在app.wxss引入有赞全局样式：
/**app.wxss**/
@import "dist/index.wxss";最后引入wxParse，同样在github上下载之后，将对应的文件copy你的项目中即可，在需要引用的页面引入即可。
配置
创建的页面需要串联起来，根据官方文档，需要配置app.json。
app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
我的配置供参考：
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/mine/mine",
"pages/topic/topic",
"pages/detail/detail"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Bug生活2048",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#959394",
"selectedColor": "#959394",
"backgroundColor": "#f0f0f0",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/tabbar/home.png",
"selectedIconPath": "images/tabbar/home_click.png",
"text": "首页"
},
{
"pagePath": "pages/topic/topic",
"iconPath": "images/tabbar/like.png",
"selectedIconPath": "images/tabbar/like_click.png",
"text": "专题"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "images/tabbar/about.png",
"selectedIconPath": "images/tabbar/about_click.png",
"text": "我的"
}
]
}
}到这里，你可以尝试着运行调试一下了，点击底部tab按钮，可以进行页面跳转了，接下来就是丰富页面了。
首页页面搭建
对于页面设计这里没什么好说的，主要是一个列表页，主要利用可滚动视图区域（scroll-view），结合有赞UI和一些CSS样式，自行设计，整体页面效果如下：
专题页面搭建
专题部分比较尴尬，由于ghost目前没有类似文章分类的功能，所以只能取巧根据标签来作为专题的分类，把一些常用的标签整理出来。
结合有赞提供的tab组件和card组件，拼凑出专题页面，页面效果如下：
用户中心页面搭建
用户中心页面样式相对比较简单了，基本上大同小异，主要利用有赞UI的cell组件，页面效果如下：
好啦，到这里，小程序的架子基本上有了，通过手机预览感觉也还不错。
数据请求
页面基本上有点样子了，接着需要实现下数据交互了。这里需要用到小程序的APIwx.request，具体参数说明可以参考官方文档。
这里简单封装了下：
const wxRequest = (params, url) => {
wx.request({
url,
method: params.method || 'GET',
data: params.data || {},
header: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
success(res) {
if (params.success) {
params.success(res);
}
},
fail(res) {
if (params.fail) {
params.fail(res);
}
},
complete(res) {
if (params.complete) {
params.complete(res);
}
},
});
};页面注册可参考文档Page()的具体说明，这里主要用到属性data，其实就是定义些提供给页面的数据变量，同过setData来实现改变数据变量的值。
通过onLoad属性来初始化页面加载。代码参考：
const util = require('../../utils/util.js');
const api = require('../../utils/api.js');
var page = 0
var app = getApp()
Page({
//初始化一些变量
data: {
posts: [],//具体实体
page: 0
},
//初始化页面加载
onLoad: function () {
console.log('onLoad')
var that = this
this.getData();
},
getData: function () {
let that = this;
let page = that.data.page;
api.getBlogList({
query: {
limit: 10,
page: page + 1,
fields: 'id,title,custom_excerpt,created_at'
},
success: (res) => {
const posts = res.data.posts;
this.setData({
posts: this.data.posts.concat(posts),
page: res.data.meta.pagination.page,
});
},
});
}
})这样在wxml下就可以接收对应的数据了：
<block wx:for="{{posts}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
......小结
搭建过程中主要熟悉下小程序的API以及有赞UI库的使用，相关细节可以参考对应的文档，还是比较详细的。
由于目前博客小程序还在开发中，后期等上线后源码会分享出来。
Ps.由于公众号里无法跳转链接，可点击原文直接浏览我的博客，体验会好一丢丢。