depy

It is a long and beautiful life.

博客小程序开发

项目

概述

小程序名:depyWxapp

版本:v2.1.0

体验地址:

开发过程

因为已经上线了,写代码的时候也没有做过多的记录,所以我把核心的开发思想和一些踩坑点记录一下。

首先是选择框架,我这里用的是colorui,并且在开发前思考需要哪些页面和组件。

就和上面的差不多,每个界面写代码前,先思考你想怎么布局,会用到什么组件,这样的话在后续的开发中会从容很多。所以我就抽一个和文章浏览、展示相关的界面代码来思考怎么写好了。


小程序开发并不难,核心就是接口获取数据,数据模版循环渲染嵌套即可。

如果愿意可以做一个开关配置,获取初始化内容后判断是否渲染文章列表,达到后台远程开关文章显示功能。(当然这是拓展)

直接上这两天写的代码吧,比如我把文章的page相关文件放在 /pages/basis/list下

js代码如下:

const app = getApp();
Page({
data: {
list:[],
page: 1,
imagelist:[],
flag: "文章加载中~(请上拉)"
},
getCategoryPostLists(id) {
let that = this;
wx.request({
url: 'https://blog.happysec.cn/wxappapi/content/?page='+id,
header: {
'content-type': 'application/json'
},
success: res => {
        // wx.hideLoading()
if(res.data.data.list != null){
this.setData({
            //第一个data为固定用法
list:that.data.list.concat(res.data.data.list)
})
}else{
this.setData({
            //第一个data为固定用法
flag:"加载完毕"
})
console.log(that.data.flag)
}

}  
}); 
},
onLoad: function(e){
wx.showLoading({
title: '加载中...',
mask: true
});
wx.request({
url: '文章列表接口',
header: {
'content-type': 'application/json'
},
success: res => {
        // wx.hideLoading()
this.setData({
          //第一个data为固定用法
list: res.data.data.list
})
wx.hideLoading()
}  
}); 

wx.request({
url: '开关api',
header: {
'content-type': 'application/json'
},
success: res => {
wx.hideLoading()
this.setData({
      //第一个data为固定用法
imagelist : res.data.data.list
})
    // console.log(this.data)
}
});
},
onReachBottom: function(e) {
let that = this;
that.data.page += 1;
that.getCategoryPostLists(that.data.page);
},

})

可以慢慢来阅读这个js。

首先第一步,定义data下一个数组list,代表从远程接口获取数据后存储文章数据的数组。

请求接口可以用wx.request这个默认功能,要记得随时随地console.log,打印出data来看一下数据结构和请求结果,更容易debug。

接口取值这里就不赘述了,一般来说res.data就是获取到你接口显示的json内容。

接着就是往下取,比如我的接口给的格式是{count:"20",data:[id:1,title:""]}这样的形式,那么取到文章list就是res.data.data,以此类推。

前端渲染如下:

<view wx:for="{{list}}" wx:key="index">
<view wx:if="{{item.status != 0}}">
<navigator url="/pages/basics/layout/layout?id={{item.content_id}}">
<view class="cu-card article {{isCard?'no-card':''}}" >
<view class="cu-item shadow">
<view class="title">
<view class="text-cut" >{{item.title}}</view>
</view>
<view class="content">
<image lazy-load="true" src="https://api.sgk.pub/index/api/wallpaper?id={{item.content_id}}" mode="aspectFill"></image>
<view class="desc">
<view class="text-content"> {{item.title}}</view>
<view>
<view class="cu-tag bg-red light sm round">depy</view>
<view class="cu-tag bg-green light sm round">{{item.create_time}}</view>
</view>
</view>
</view>
</view>
</view>
</navigator>
</view>
</view>

前面已经给list赋值了,那么通过wx:for进行循环,那么多少篇文章就有多少个文章块。

并且通过item的id,代表每一篇文章传递给navigator导航,导航会携带最关键的文章参数跳转到layout文章详情页就可以了。

在文章详情页通过下面的代码获取到文章id,然后通过文章id拼接接口获取文章内容就好了。

var pages = getCurrentPages()    //获取加载的页面
var currentPage = pages[pages.length - 1]    //获取当前页面的对象
var url = currentPage.route    //当前页面url
var options = currentPage.options    //如果要获取url中所带的参数

但是呢,如果你的博客有很多文章,那么分页是必不可少的,为此我查阅了很多开发代码,最终在得到同事的一些帮助下解决了这个问题。

其实也就是下拉加载合并数组,page界面有个事件叫onreachbottom,字面意思就是触底事件。当触底事件触发的时候调用

getCategoryPostLists

使得当前的page+1(默认是1),加1之后使用

list:that.data.list.concat(res.data.data.list)

把旧数组和新数组合并,这样前端就可以重新渲染了。

但是要做个判断,比如到底了就根据list是否有内容来判断,没有内容了就暂停,并且更改flag文字成“我也是有底线的”这种滑稽的文字。


文章浏览部分大同小异,只要api写好就行了。前面已经介绍了怎么获取id的代码了,拼接接口后获取文章的json,来进行渲染即可。无非就是{{list.detail}}这样的形式。

但是博客给的api内容是富文本,也就是html的代码。

而微信小程序并不能解析,所以我用到了一个第三方组件html2wxml,并且为了稳定性把接口移植到自己的服务器了,接口:https://blog.happysec.cn/wxapp/html2wxml/

项目地址:https://github.com/qwqoffice/html2wxml/,根据文档来一步步做就行了,很简单。

最后只要<htmltowxml text="{{list.detail}}" ></htmltowxml>就可以看到和网页差不多的文章样式了。

但我没有研究过markdown的转换,有兴趣可以自己去研究下,官方有自带的富文本解析,但是并不好用。

最终浏览文章时,效果如下:

607688fb0a5f7.png

并且这个组件还有我博客没有的代码高亮XD。

后记

这样一个很基础的文章列表、文章分页合并、文章内容浏览就写好了。

至于其他界面,无非是类似的操作,只要循环、判断、渲染就可以了,文章部分是我开发中觉得比较难的地方,所以写出来给大家指明方向。

如果是js大神应该分分钟就做完了,就略过吧。其实微信小程序还有很多好玩的组件,还没试过,以后开发交互功能的时候再慢慢研究了。

之后应该会把重心放到知识库认证浏览小程序的开发上去了。