小程序開發(fā)問題
一、常見問題
1、navigator點(diǎn)擊無效果(已解決)
因為跳轉(zhuǎn)到tab欄沖突，加上open-type="switchTab"
<navigator url="/page/index/index" open-type="switchTab"><navigator>
或者使用編程式導(dǎo)航wepy.switchTab(),跳轉(zhuǎn)tab欄
wepy.switchTab({
url:'/pages/tabs/home'
})
2、頁面跳轉(zhuǎn)微信付款碼(待解決)
小程序有個點(diǎn)擊使用微信支付。
微信的文檔是wx.openOfflinePayView({})
但是此功能為內(nèi)測，暫不可用
3、小程序下拉刷新(已解決)
在當(dāng)前頁面配置，wepy中是配置config
config = {
enablePullDownRefresh:true,
backgroundTextStyle:'dark'
}
函數(shù)中
onPullDownRefresh(){
請求數(shù)據(jù)成功后停止刷新動作
wx.stopPullDownRefresh()
}
4、去除button,input默認(rèn)樣式
說明：原理：hover-class樣式顯示的原理是點(diǎn)擊時把樣式加到class的樣式中，
沖突時，誰在后面就顯示誰!
<button class="btn" hover-class="btn-hover" disabled="{{flagbtn}}"
bindtap="subMessUser" >提交</button>
-------------------wxss----------------------------
button::after{
border:none;
}
button{
box-sizing:content-box!important;// 原先是border-box
overflow:none!important;// 原先是hiddren
border-radius:0;
background-color:#fff;
}
//按下時的樣式
.btn-hover{
color:#fff;
background-color:#fff !important;
}
//禁用后的樣式
button[disabled] {
background-color:#fff!important;
}
input{
outline:none;
border:none;
list-style:none;
}
5、wx:for wx:key 相關(guān)
wx:for 需要攜帶wx:key，如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。
在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項的變量名默認(rèn)為 item
<viewwx:for="{{array}}">
{{index}}: {{item.message}}
</view>
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，
使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：
<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:key是用來告訴程序按照某個key去排序這個組件，例如wx:key="item.id"。id為唯一值，而如果沒有這個wx:key的話，當(dāng)渲染時框架會去查找這個"key"，造成資源的浪費(fèi)。以及報警告。
wx:key=" *this" 在沒有唯一值的時候，可以使用此來替代
保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數(shù)字
?
1.需要wx:key的情況
//列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中
//希望列表中的項目保持自己的特征和狀態(tài)
（如 <input/> 中的輸入內(nèi)容，<switch/> 的選中狀態(tài)）
2.可不需要wx:key的情況
如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以不用加wx:key
轉(zhuǎn)載：https://www.cnblogs.com/chenzhiran/p/11160702.html
6、小程序分包加載(例：wepy)
微信 6.6.0 版本開始支持分包加載，而對于低于這個版本的客戶端，我們做了兼容處理，開發(fā)者不需要對老版本微信客戶端做兼容。
對于老版本的客戶端，編譯后臺會將所有的分包打包成一個整包，老版本的客戶端依然按照整包的方式進(jìn)行加載。
目前小程序分包大小有以下限制：
整個小程序所有分包大小不超過 16M
單個分包/主包大小不能超過 2M
對小程序進(jìn)行分包，可以優(yōu)化小程序首次啟動的下載時間，以及在多團(tuán)隊共同開發(fā)時可以更好的解耦協(xié)作。
方法：
在pages同目錄下創(chuàng)建其他分包，包名為packageA,packageB.....
app.wpy中配置config
pages: [
'pages/tabs/home',
'pages/tabs/coupon',
'pages/other/register',
'pages/other/mydetail'
],
subPackages: [
{
root:'packageA',
pages: ['pages/other/mycoupon','pages/other/coupondetail']
},
{
root:'packageB',
pages: ['pages/other/order','pages/other/information']
}
]
7、wepy雙向數(shù)據(jù)綁定this.$apply()
因為數(shù)據(jù)更新是異步操作，無法在第一時間同步賦值，所以需要這個方法
在你為data里面的數(shù)據(jù)進(jìn)行綁定的時候，是需要的。
比如data里面你定義了一個x=''，然后你在自定義的方法里面用this.x=200之后，需要用this.$apply()來進(jìn)行數(shù)據(jù)綁定。這樣你在view中綁定data中的x變量時，才會有200，不然就是空。
不過有個前提，method里面的方法是不用這個的，但methods里面只能放bindtap這類方法，所以你自己定義的其他方法，或者寫在onshow里面，就必須得用this.$apply()。
8、微信小程序圖片寬度100%，高度自適應(yīng)
做法如下：
樣式設(shè)置寬度100%，
添加屬性 mode="widthFix"，
即可實現(xiàn)！
9、小程序觸摸事件
WXML的冒泡事件列表：
類型 觸發(fā)條件
touchstart 手指觸摸動作開始
touchmove 手指觸摸后移動
touchcancel 手指觸摸動作被打斷，如來電提醒，彈窗
touchend 手指觸摸動作結(jié)束
tap 手指觸摸后馬上離開
longtap 手指觸摸后，超過350ms再離開
注：除上表之外的其他組件自定義事件如無特殊申明都是非冒泡事件，如<form/>
的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個組件)
10、小程序獲取手機(jī)號登錄注冊出現(xiàn)解密失敗
當(dāng)前小程序邏輯是
-getuserInfo-getPhoneNumber-wx.login-請求服務(wù)器登錄/注冊
但是獲取getPhoneNumber的加密信息之前就必須wx.login
官方說法：
使用方法
需要將 button 組件 open-type 的值設(shè)置為 getPhoneNumber，當(dāng)用戶點(diǎn)擊并同意之后，可以通過 bindgetphonenumber 事件回調(diào)獲取到微信服務(wù)器返回的加密數(shù)據(jù)， 然后在第三方服務(wù)端結(jié)合 session_key 以及 app_id 進(jìn)行解密獲取手機(jī)號。
注意
在回調(diào)中調(diào)用 wx.login 登錄，可能會刷新登錄態(tài)。此時服務(wù)器使用 code 換取的 sessionKey 不是加密時使用的 sessionKey，導(dǎo)致解密失敗。建議開發(fā)者提前進(jìn)行 login；或者在回調(diào)中先使用 checkSession 進(jìn)行登錄態(tài)檢查，避免 login 刷新登錄態(tài)。
請求邏輯反了，所以code出現(xiàn)無效的情況
正確邏輯-wx.login--getuserInfo-getPhoneNumber-請求服務(wù)器登錄/注冊
11、webSocket 實現(xiàn)聊天的技術(shù)點(diǎn)
詳見chat/chat.js
使用websocket將小程序和服務(wù)器建立長連接，目的是能夠?qū)崟r收發(fā)消息
再利用接口保存聊天消息
websocket地址實例
url = 'wss://*********.com/wss/ws/webSocketServer?token='+this.openid
12、小程序wepy分包報錯---
總是提示"pages/XX/XX" has not been registered yet?
安裝插件
npm install wepy-cli@1.6.1-alpha4 -g
然后刪除依賴包和dist文件后重新編譯
13、小程序畫布繪制圖片無法正常顯示
由于 canvas標(biāo)簽 加了個hidden部分手機(jī) wx.canvasToTempFilePath 走fail canvasToTempFilePath:fail:create bitmap failed"
解決辦法：畫布加transfrom right:-10000000,然后將生成的圖片顯示在另一個和畫布同大小的標(biāo)簽上
14、小程序樣式兼容性問題
input:text-align:end/right,無效，需給input設(shè)置寬度
二、小程序封裝工具函數(shù)
github鏈接工具庫
------------------tool-------------------------------------
time---time.js 時間戳轉(zhuǎn)時間字符串
canvas---barcode.js
qrcode.js
tool.js 小程序畫布，二維碼，條形碼
wxqrcode.js 畫布轉(zhuǎn)base64圖片緩存地址
（解決小程序二維碼在華為手機(jī)不顯示問題）
wxcode_base64.js內(nèi)有說明條碼轉(zhuǎn)圖片的方法
base64.js 加密的工具
baseApi.js 小程序封裝api工具
request.js 小程序發(fā)請求工具
wxchat_time wxchattime.js/wxchattime2.js 時間戳轉(zhuǎn)微信聊天格式
------------------wxParse-------------------------------------
商品詳情頁---html轉(zhuǎn)小程序頁面格式
?
1、時間戳轉(zhuǎn)聊天和表單相關(guān)時間格式
三、小程序開發(fā)抽離并封裝的規(guī)范
說明：抽離和封裝的目的是便于二次開發(fā)修改功能點(diǎn)
壓縮和復(fù)用代碼，減少不必要的代碼量
?
四、小程序登錄邏輯
微信小程序獲取用戶信息并保存登錄狀態(tài)詳解
?
微信小程序的運(yùn)行環(huán)境不是在瀏覽器下運(yùn)行的。所以不能以cookie來維護(hù)登錄態(tài)。下面我就來說說我根據(jù)官方給出的方法來寫出的維護(hù)登錄態(tài)的方法吧。
?
一、登錄態(tài)維護(hù)
?
官方的文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject
?
通過 wx.login() 獲取到用戶登錄態(tài)之后，需要維護(hù)登錄態(tài)。開發(fā)者要注意不應(yīng)該直接把 session_key、openid 等字段作為用戶的標(biāo)識或者 session 的標(biāo)識，而應(yīng)該自己派發(fā)一個 session 登錄態(tài)（請參考登錄時序圖）。對于開發(fā)者自己生成的 session，應(yīng)該保證其安全性且不應(yīng)該設(shè)置較長的過期時間。session 派發(fā)到小程序客戶端之后，可將其存儲在 storage ，用于后續(xù)通信使用。
?
從上圖可以看出。當(dāng)我們通過wx.login()獲取code的后，發(fā)送給我們的服務(wù)器，然后去請求微信服務(wù)器換取得到對應(yīng)的openid與session_key，openid是該用戶在小程序中的唯一標(biāo)識用于模板通知之類的。session_key就是用來解密用戶的敏感信息。unionid之類的。unionid是微信用戶在所有微信平臺下的唯一標(biāo)識。下面我會講解一下如何得到。
?
?
以上就是我的實現(xiàn)方法。調(diào)用wx.login()得到code后請求服務(wù)器獲取openid與session_key緩存在服務(wù)器當(dāng)中。其中生成一個隨機(jī)數(shù)為key，value為openid與session_key。然后返回到小程序通過wx.setStorageSync('LoginSessionKey',得到的隨機(jī)數(shù)key)緩存在小程序當(dāng)中。每當(dāng)我們?nèi)フ埱蠓?wù)器時帶上LoginSessionKey即可給服務(wù)器讀取從而判斷用戶是否在登錄。是不是很簡單呢？
?
二、用戶數(shù)據(jù)的加解密
?
通過wx.login()登錄之后。我們可以通過wx.getUserInfo()獲取用戶信息。其中一些不敏感的信息在返回的 result中的userInfo里。如想要獲取敏感信息。openid,unionid之類的。則需要從密文中去解密得到。
?
而密文則在encryptedData這個字段當(dāng)中。我們?nèi)フ埱笪覀兎?wù)器去解密然后得到敏感信息后則可以保存起來。
?
加密數(shù)據(jù)解密算法
?
接口如果涉及敏感數(shù)據(jù)（如wx.getUserInfo當(dāng)中的 openId 和unionId ），接口的明文內(nèi)容將不包含這些敏感數(shù)據(jù)。開發(fā)者如需要獲取敏感數(shù)據(jù)，需要對接口返回的加密數(shù)據(jù)( encryptedData )進(jìn)行對稱解密。 解密算法如下：
?
對稱解密使用的算法為 AES-128-CBC，數(shù)據(jù)采用PKCS#7填充。
對稱解密的目標(biāo)密文為 Base64_Decode(encryptedData),
對稱解密秘鑰 aeskey = Base64_Decode(session_key), aeskey 是16字節(jié)
對稱解密算法初始向量 iv 會在數(shù)據(jù)接口中返回。
微信官方提供了多種編程語言的示例代碼（點(diǎn)擊下載）。每種語言類型的接口名字均一致。調(diào)用方式可以參照示例。
?
這時候我們通過小程序得到的result.encryptedData與result.iv與后端得到的session_key 解密出我們得到的敏感用戶信息了。
五、新版本自動升級實現(xiàn)
小程序啟動自動調(diào)用函數(shù)
onLaunch(){
this.autoUpdate()
}
// 自動升級
autoUpdate() {
let self = this
// 獲取小程序更新機(jī)制兼容
if (!wx.canIUse('getUpdateManager')) {
// 微信版本低
// 如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦?，可以這樣子提示
wx.showModal({
title: '提示',
content:
'當(dāng)前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
})
return
}
if (wx.canIUse('getUpdateManager')) {
// 微信版本正常
console.log(new Date())
// 創(chuàng)建版本對象
const updateManager = wx.getUpdateManager()
// 1. 檢查小程序是否有新版本發(fā)布
updateManager.onCheckForUpdate(res => {
console.log(res, '檢測版本') // res.hasUpdate=false,代表沒有新版本
?
if (res.hasUpdate) {
// 2. 小程序有新版本，則靜默下載新版本，做好更新準(zhǔn)備 監(jiān)聽小程序有版本更新事件?？蛻舳酥鲃佑|發(fā)下載（無需開發(fā)者觸發(fā)）
updateManager.onUpdateReady(async res => {
console.log(new Date())
wx.showModal({
title: '更新提示',
content: '新版本已經(jīng)準(zhǔn)備好，是否重啟應(yīng)用？',
success(res) {
if (res.confirm) {
console.log('用戶同意下載更新')
// 3. 新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應(yīng)用新版本并重啟
updateManager.applyUpdate()
} else if (res.cancel) {
console.log('用戶點(diǎn)擊取消')
// 如果需要強(qiáng)制更新，則給出二次彈窗，如果不需要，則這里的代碼都可以刪掉了
wx.showModal({
title: '溫馨提示~',
content:
'本次版本更新涉及到新的功能添加，舊版本無法正常訪問的哦~',
success() {
console.log('再次彈框更新')
// 再次執(zhí)行更新檢測
self.autoUpdate()
// return
// 第二次提示后，強(qiáng)制更新
// if (res.confirm) {
// // 新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應(yīng)用新版本并重啟
// updateManager.applyUpdate()
// } else if (res.cancel) {
// //重新回到版本更新提示
// self.autoUpdate()
// }
}
})
}
}
})
})
}
})
}
}
六、小程序擴(kuò)展
1、小程序使用lottie
https://blog.csdn.net/Xiao_peng117/article/details/102693084
https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html
1、小程序使用three.js
https://www.it610.com/article/1280190449574756352.htm
https://blog.csdn.net/WeiHan_Seven/article/details/104511234
https://developers.weixin.qq.com/miniprogram/dev/extended/utils/threejs.html
