微信小程序研發問題梳理
最近鼓搗小程序的時候，著實遇到了一些問題，盡管有些再翻看文檔幾遍，就能找到答案，但還是要發揮下爛筆頭的功效，順便梳理下。
問題列表
- 登錄流程
- 小程序標簽頁地址無法跳轉問題
- 頁面翻頁內容加載問題
- 頁面下拉無法觸發的問題
- 小程序本地緩存的使用
- 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;}};}?
?
歡迎訪問小程序：DoubleColorBall
?
成長的路上有你有我
<歡迎關注留言討論?!>
?
?
