微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享

微信小程序研发问题梳理

最近鼓捣小程序的时候，着实遇到了一些问题，尽管有些再翻看文档几遍，就能找到答案，但还是要发挥下烂笔头的功效，顺便梳理下。

问题列表

登录流程
小程序标签页地址无法跳转问题
页面翻页内容加载问题
页面下拉无法触发的问题
小程序本地缓存的使用
Canvas制图横向滚动
富文本内容无法解析
小程序分享功能

1.登录流程

通过小程序登录时获取的 code 和 appid 及 secret 请求微信开放接口 sns/jscode2session 获取登录校验信息(session-key|unionid)

<只简单举例，微信小程序开发文档上有具体说明>

    wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdthis.getLoginInfoByCode(res.code);}})

//用code获取登录session-key
getLoginInfoByCode: function (code){var that = this;wx.request({url: 'https://wx.xxx.com/api/wx/user/getLoginCode',method: 'POST',data:{code: code},success: function(dta){if (dta.data) {var dt = dta.data;// console.log(dt);// console.log('openid:' + dt.data.openid);// console.log('session_key:' + dt.data.session_key);}}})},

//通过session-key和小程序附加信息获取用户信息
getUserInfoBySessKey: function (param) {wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdwx.request({url: 'https://wx.xxx.com/api/wx/user/saveUserData',method: 'POST',data: {encryptedData: res.encryptedData,sessionKey: param.session_key,iv: res.iv,openid: param.openid},success: function (dt) {// console.log('detail:');// console.log(dt.data);}})// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}

注1：此处的参数在后台获取时，过滤参数验证需要谨慎，最好先实验通过后，再过滤。（比如：配置后台验证服务器环境时）

注2：所有api.weixin.com的接口请求，都要打缓存。

注3：确保小程序的js没有报错，不然会有接口请求不到数据的情况！

2.小程序标签页地址无法跳转问题

也是从网上前辈们处得知：页面内的跳转地址，如果和标签栏里的地址一样，那么是不生效的，需要更换地址。

//app.json
{"pages": ["pages/index",],"tabBar": {"list" : [{"pagePath" : "pages/index","text" : "首页",}]},"debug": true
}

<!-- pages: index -->
<navigator url='/pages/index' hover-class='navigator-hover'></navigator>

我的处理方式是本办法，将目标页面copy到一个新目录，换个地址路径

<!-- pages:detail -->
<navigator url='/pages/detail' hover-class='navigator-hover'></navigator>

3.页面翻页内容加载问题

后加载到页面的内容需要堆积到之前的变量里。

getList: function () {var that = this;if (bPageSum < curPage && curPage != 1) {return false;}wx.request({url: 'https://wx.xxx.com/api/wx/area',data: {startDate: that.data.startDate,endDate: that.data.endDate,page: curPage,pageSize: pageSize,},header: {'content-type': 'application/json'},success: function (dt) {curPage = curPage + 1;bTotal = dt.data.total;bPageSum = dt.data.pageSum;//堆积var len = dt.data.list.length;for (var i = 0; i < len; i++) {bAllList.push(dt.data.list[i]);}//页面初始化时的变量that.setData({list: bAllList});}})},

<这里如果有好的方法，欢迎留言>

4.页面下拉无法触发的问题

要在应用页面（ pages/index.json）里开启配置；

//pages: index.json{"navigationBarTitleText": "首页","enablePullDownRefresh": true
}

//pages: index.js/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {...wx.stopPullDownRefresh();},

5.小程序本地缓存的使用

在用户驻留时间较长的时候会对接口请求后的数据加本地缓存，减少请求。

//pages: index.jsgetInfo: function () {var that = this;wx.request({url: 'https://wx.xxx.com/api/wx/info',method: 'POST',dataType: 'json',data: {date: that.data.curDate},header: {'content-type': 'application/json'},success: function (dt) {//将结果打入本地缓存wx.setStorage({'key': 'wx_' + that.data.curDate,'data': dt.data});that.logic(dt);}})},//.../** * 清除本地缓存*/clearCache: function (){wx.removeStorage({key:  'wx_'+this.data.curDate,success: function (res) {return true;}})  },//.../*** 生命周期函数--监听页面显示*/onShow: function() {//同步本地缓存var dt = wx.getStorageSync(k);that.logic(dt);},

6.Canvas制图横向滚动

参考资料 > 微信小程序canvas超出屏幕实现左右滑动的方法

方案一

将绘制出的canvas 保存为本地路径的一个img 路径.然后将图片放到 scroll-view 里面,进行滑动.

<!-- wxml -->
<scroll-view class="temp_day_box" scroll-x><view class="canvas_height"><image class="canvas_img" src='{{canvasSaveimg}}'></image></view>
</scroll-view>
<canvas canvas-id="canvasWeather" class="canvasHigh"></canvas>

/* wxss */
.canvasHigh {width: 2250rpx;height: 270rpx;transform: translateX(-200%);
}
.canvas_img{width: 2250rpx;height: 270rpx;
}

[注] 这里的canvasHigh的css属性可以用很多其他的方式隐藏,但是这里注意的是一定不能用display:none;或者标签里面加hidden,wx:if属性,这样保存下来的图片路径是不会显示出来的.

/* js */
//前面的写法这里就不再编写,可以查看相关文档和官方api
ctx.draw();
wx.canvasToTempFilePath({canvasId: 'canvasWeather',//canvasId和标签里面的id对应success: (res) => {var shareTempFilePath = res.tempFilePath;_this.setData({//将获取到的图片临时路径set到canvasSaveimg中canvasSaveimg:shareTempFilePath})}
})

方案二

在scroll-view标签中绑定一个滚动时触发的事件,这里就不需要保存为图片,但是动画效果有点小小的僵硬.

<!-- wxml -->
<scroll-view class="temp_day_box" scroll-x bindscroll='scrollCanvas'> <view class="canvas_height" style='transform: translateX(-{{canvasLen}}px);'><canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> </view>
</scroll-view>

/* js */
scrollCanvas: function(e) {console.log(e);var canvasLen = e.detail.scrollLeft;this.setData({canvasLen: canvasLen})
}

7. 富文本内容无法解析

在抓取数据展示或者后台添加了富文本内容要通过变量展示到页面时，会出现内容源码出现在页面，html标签没有被解析的情况，推荐使用WXParse插件

插件资源

github-wxParse

应用实例

下载资源，将wxParse目录copy至pages同级；

① 引入插件js脚本

// js//引入插件JS脚本
var WxParse = require('../../wxParse/wxParse.js');Page({data: {aid : ''},/*** 根据文章ID获取资讯**/getArticleInfo: function () {var that = this;wx.request({url: 'https://wx.xxx.com/api/wx/getInfo',data: {aid: that.data.aid},header: {'content-type': 'application/json'},success: function (dt) {//插件实例var article = dt.data.content;WxParse.wxParse('article', 'html', article, that, 5);}})}}

② 引入插件模板

<!-- wxml --><!-- 引入插件模板 -->
<import src="../../wxParse/wxParse.wxml"/><view class="block"><view class="content"><!-- 文章内容：START --><view class="content-text"><template is="wxParse" data="{{wxParseData:article.nodes}}"/></view><!-- 文章内容：END --></view></view>

③ 引入插件样式；

/* wxss *//* 引入插件样式 */
@import "../../wxParse/wxParse.wxss";

这样就可以展示了。大概的原理：将富文本内容通过js解析节点内容，再加载到页面。

可能会遇到的问题

Error: html.replace is no a funciton ...

i. 找到wxParse/html2json.js 文件，将其中的 console.dir()替换为 console.log();

ii. 在wxParse插件目录中全局搜索console，将打印全部注释掉；

8. 小程序分享功能

<!-- pages/index.wxml -->
<button open-type="share">分享给好友</button>

/* pages/js *//*** 用户点击右上角分享*/onShareAppMessage: function() {return {title: '彩票双色球开奖结果查询分析预测',path: '/pages/index/ball_index',imageUrl: '../../images/color_ball.png',success: function(e){//要求小程序返回分享目标信息wx.showShareMenu({withShareTicket: true});},fail(e){return false;}};}