最近新做一个功能，需要在小程序中显示文章，那么后台编辑，肯定就会采用富文本编辑器。返回到小程序的将会是html。可以使用两个方法，第一个使用小程序引入 web-view页面，这么做会很方便，但是如果文章图片比较多,而且又没有什么规则的话，适配起来就比较蛋疼，后台编辑也比较蛋疼，而且我是一个后端工程师哟，你懂得。所以采用了第二个方法，使用 wxParse,那么图片我就可以很方便处理了。还有我小程序使用了wepy框架。
简单说一下wepy
这个自己看一下文档就知道了，我主要是不想写一堆回调，而且它支持async/await,不使用这些话，我估计登录就能让你callback到崩溃，app.wpy几个主要函数：
伪代码哟，你懂得，如果对你有帮助，不要复制粘贴
构造函数方法：
constructor () {
super()
//这两个是引入promise,还有修复微信原生同时发送多个请求可能会出现错误的bug
this.use('requestfix');
this.use('promisify');
//全局拦截与后端请求的数据，这也是为什么会在app.wpy我要写一个commentRequest方法的原因
this.intercept('request', {
config (p) {
return p;
},
success (response) {
if (response.data.code == 200) {
return response.data.data
}
if(response.data.code==400){
wepy.showModal({
title:'出错了。。',
content:'请下拉重新加载页面'
});
wepy.clearStorageSync();
}
},
fail (response) {
return response;
}
});
}1. onShow方法中：
//全局中设置isRefresh为false
globalData = {
userInfo: null, //用户信息
isRefresh:false
}
//当用户进入小程序的时候，查看是否需要refresh_token,如果能获取到缓存中的reflresh_token,那么重新请求后端，获取access_token和reflresh_token,如果reflesh_token都没有获取到，说明用户登录出现问题了，重新调取login,这里的is_reflesh是结合下文中的commonRequest使用。
onShow(){
let refreshToken = wx.getStorageSync('refresh_token');
console.log('小程序初始化---------------')
if (refreshToken) this.globalData.isRefresh=true;
}2.全局请求函数
这个函数的作用是：当你在
pages页面和后端交互时，可以全局控制
async commonRequest (url, data = '', method = 'POST') {
//结合onshow,如果isRefresh为true,重新请求后端接口获取数据
if(this.globalData.isRefresh){
if( ! await this.refreshTokenFunc()){
return false;
}
this.globalData.isRefresh=false;
}
let value = wx.getStorageSync('access_token')
let params = {
url: url,
data: data,
method: method,
header: {
'Authorization': value ? ('Bearer ' + value) : '',
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
return await wepy.request(params);
}refleshTokenFunc方法：
async refreshTokenFunc(){
let refreshToken = wx.getStorageSync('refresh_token')
let params={
url:urlList.refreshToken,
data:{
refresh_token: refreshToken
},
method:"POST"
}
return await wepy.request(params).then(res => {
console.log('刷新token 中');
try {
wepy.setStorageSync('access_token', res.access_token)
wepy.setStorageSync('refresh_token', res.refresh_token);
return true;
} catch (e) {
return false;
}
}).catch(res => {
return false;
});
}3.login方法：
自己维护用户登录状态：
async login () {
try {
let {code: code} = await wepy.login();
let {iv: iv, encryptedData: encryptedData, userInfo: userInfo} = await wepy.getUserInfo({withCredentials: true})
let loginData = {code: code, iv: iv, encryptedData: encryptedData}
let params={
url:urlList.miniLogin, //自己服务器维护用户登录状态地址
data:loginData,
method:"POST",
header: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
return await wepy.request(params).then(res => {
this.globalData.userInfo = userInfo
try {
wepy.setStorageSync('access_token', res.access_token)
wepy.setStorageSync('refresh_token', res.refresh_token)
return true;
} catch (e) {
return false;
}
}).catch(res => {
console.log('error');
return false;
})
} catch (err) {
return await this.checkSettingStatus();
}
}
4.检查登录状态：
async checkLoginState () {
try {
//微信自己的code 状态
let wxLoginState = await wepy.checkSession().then(res => {return true}, res => {return false});
//自己服务器的状态
let token = wx.getStorageSync('access_token')
if (!wxLoginState || !token) {
return await this.login();
} else {
return true;
}
} catch (res) {
console.log('检查登录状态---checkLoginState');
}
}5.判断是否授权：
async checkSettingStatus () {
// 判断是否是第一次授权，非第一次授权且授权失败则进行提醒
try {
let auth = await wepy.getSetting();
let authSetting = auth.authSetting;
if (authSetting['scope.userInfo'] === false) {
let confirm = await wepy.showModal({
title: '用户未授权',
content: '如需正常使用功能，请按确定并在授权管理中选中“用户信息”，然后点按确定。最后再重新进入小程序即可正常使用。',
showCancel: false,
});
if (confirm.confirm) {
await wepy.openSetting();
return await this.login();
} else {
return false;
}
} else {
return true;
}
} catch (res) {
}
}主页面app.wpy就这么多东西，在pages页面中怎么使用呢,比如下面就是你小程序的入口pages文件了，用户访问的时候会首先进入：
onLoad () {
this.list();
wx.showLoading({
title: '加载中',
icon:'loading',
mask:true
})
}
onShareAppMessage(res){
return {
title:'xxx服务欢迎您的使用',
path:'/pages/list'
}
}
onPullDownRefresh () {
wx.showNavigationBarLoading()
this.list();
wx.showToast({
title:'加载中',
icon:'loading',
mask:true
})
wx.hideNavigationBarLoading()
wx.stopPullDownRefresh()
}
async list () {
//检查小程序登录,查看上文中的checkLoginState,如果登录状态失效，那么重新掉起login 方法登录
await this.$parent.checkLoginState();
//调用全局的请求函数
await this.$parent.commonRequest(url.list).then(res => {
this.xxx = res;
this.$apply();
wx.hideLoading();
}).catch(err=>{
wepy.showModal({
title:'走神了。。',
content:'请下拉重新加载页面'
})
wx.clearStorageSync('access_token')
})
}我们来说一下整个访问流程，用户一打开小程序，首先经过app.wpy中的onLauch方法，而我没有写任何东西，那么就会访问onShow方法，在这个函数里，第一次访问肯定没有reflesh_token,所以isRefresh肯定为false,那么接下来进入pages中的首页了，就会进入上面的list函数，就会调用 await this.$parent.checkLoginState(),自然就会调用login了，是不是很机智。
wepy就简单介绍这么点了
引入wxParse
按照官网引入就可以了，但是结合wepy,就会出现问题，那么下面就是解决bug问题：
如果已经安装官网引入了，发现图片不能自适应，或者内容都不能显示，为什么呢，找到wxParse.js文件中wxParse函数，最下面看到：
问题就出在这里，wepy和微信自带的数据绑定有冲突，wxParseImgLoad和wxParseImgTap是自动适应图片和图片加上点击事件的，改成下面：
that[bindName]=transData发现图片还是不能使用，那么去掉wxParseImgLoad和wxParseImgTap，把这两个函数放到pages中需要使用wxparse的页面中：
methods={
// 图片点击事件
wxParseImgTap(e) {
let that = this;
let nowImgUrl = e.target.dataset.src;
let tagFrom = e.target.dataset.from;
if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
wx.previewImage({
current: nowImgUrl, // 当前显示图片的http链接
urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
})
}
},
/**
* 图片视觉宽高计算函数区
**/
wxParseImgLoad(e) {
}修改wxparse.wxml中的img模板，原来是：
改成：
我这里使用了微信图片image组件自适应的功能，而不用上面那个wxParseImgLoad(e)去动态计算了。现在知道我为什么去掉那个函数了吧
其实就改动了wxparse插件中的wxparse.wxml和wxparse.js两个文件。那么怎么使用呢：
//-------------------------模板使用-------------------------------
至于后台怎么抓取微信文章，把图片上传到七牛，有时间另写吧