微信小程序避坑指南

 如果對小程序還不熟悉，建議先看下另一篇小程序簡介

1. 基礎庫和微信版本對應關系

iOS 客戶端版本	基礎庫版本
6.7.2	2.3.0
6.7.0	2.2.5
6.6.7	2.1.3
6.6.6	2.0.9
6.6.2	1.9.97
6.6.1	1.9.9
6.6.0	1.9.4
6.5.22	1.7.4
6.5.16	1.6.8
6.5.13	1.5.8
6.5.10	1.4.4
6.5.9	1.3.0
6.5.8	1.2.6

 

Android 客戶端版本	基礎庫版本
6.7.2	2.3.0
6.6.7	2.2.5
6.6.6	2.0.9
6.6.2	1.9.97
6.6.1	1.9.9
6.6.0	1.9.4
6.5.22	1.7.4
6.5.16	1.6.8
6.5.13	1.5.8
6.5.10	1.4.4
6.5.8	1.2.6

 

 詳見官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/client.html

2. 視頻上覆蓋文字和圖片

用cover-view 和 cover-image

<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{false}}" event-model="bubble">
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/path/to/icon_play" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/path/to/icon_pause" />
    </cover-view>
    <cover-view class="time">00:00</cover-view>
  </cover-view>
</video>

官方API

 

3. live-player 渲染失敗 access denied

live-pusher目前只對部分品類的應用開放

 

申請了服務類目之后，在接口權限中選擇對應功能：

 

 

設置完如果還不行，嘗試下重啟開發展工具，重新編譯，重啟真機上的微信。

 

4. 直播視頻全屏方法

<live-player id="myVideo" src="rtmp://xxxxxxx" controls="{{false}}" autoplay bindstatechange="statechange" binderror="error">
<cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/path/to/icon_play" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/path/to/icon_pause" />
    </cover-view>
    <cover-view class="time">00:00</cover-view>
  </cover-view>
</live-player>

wxss中設置：

position: fixed;
height: 100%; width: 100%;

 

app.json文件配置導航樣式自定義：

{
  "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "navigationStyle": "custom" } }

 

5. 小程序包的大小限制

目前小程序分包大小有以下限制：

• 整個小程序所有分包大小不超過 8M
• 單個分包/主包大小不能超過 2M

6. wafer2-clien-sdk的wxTunnel.js中void(0)

/*

undefined 為window下一個屬性，在某些瀏覽器下比如IE7，可以被賦值改變

void() 用於計算一個表達式，永遠返回undefined；用來代替undefined亦可減少字符數

*/

const noop = () => void(0);

 

7. 用小程序內嵌webview做支付package值丟失

在webview內跳轉到小程序傳遞支付參數時，注意package字段

var data = [
    'timeStamp=' + data.timeStamp, 'nonceStr='+data.nonceStr, 'package='+ encodeURIComponent(data.package), 'signType='+data.signType, 'paySign='+data.sign, ] wx.miniProgram.navigateTo({ url: '/pRoom/wxpay/wxpay?' + data.join('&') })

package字段官方文檔如下：

package    String    是    統一下單接口返回的 prepay_id 參數值，提交格式如：prepay_id=*

此時package值為prepay_id=djasdy2xxxxxx， 帶一個等於號

需要對此值進行編碼，到小程序端再進行解碼，不然傳到小程序端package字段值只有prepay_id=， 后面的id值會丟失

onLoad(data) {
    wx.requestPayment({
        'timeStamp': data.timeStamp, 'nonceStr': data.nonceStr, 'package': decodeURIComponent(data.package), 'signType': data.signType, 'paySign': data.paySign, 'success':function(res){} }) }

 

 8. 怎么合理使用微信登錄能力 

平台分別提供多種方式實現微信登錄：

1. 調用wx.login接口，靜默獲取openid

適用場景：無需使用用戶頭像、昵稱、Unionid信息

2. 使用 open-data （小程序）或者開放數據域（小游戲）的方式展示用戶信息（無需用戶授權）

適用場景：需要在前端“展示”用戶頭像、昵稱信息，但不需要獲取Unionid

3.使用button（小程序）或UserInfoButton（小游戲）組件，用戶點擊后彈窗請求用戶授權

適用場景：需要獲取用戶頭像、昵稱、Unionid等基本信息

 

開發建議

第一步：獲取openID

當用戶訪問小程序時，先通過wx.login，獲取用戶openID 。這時無需彈框授權，開發者拿到 openID 可以建立自身的帳號 ID。

第二步： 使用open-data方式或開放數據域方式展示頭像昵稱

如需要在前端展示用戶頭像、昵稱信息， 使用open-data 方式或者開放數據域的方式展示用戶信息

第三步：根據實際使用場景，使用組件，引導用戶登錄

在關鍵操作中，如必須獲取用戶頭像、昵稱、UnionID信息，可根據第一步獲取的openID判斷是新用戶還是舊用戶：

    如果是舊用戶，可以直接登錄，也可定期使用wx.getUserInfo更新用戶的信息；

    如果是新用戶，使用button（小程序）或UserInfoButton（小游戲）組件，在用戶點擊后彈窗請求獲取用戶基本信息。

 

  Unionid機制詳見這里

 

會話密鑰 session_key 有效性

開發者如果遇到因為 session_key 不正確而校驗簽名失敗或解密失敗，請關注下面幾個與 session_key 有關的注意事項。

1. wx.login 調用時，用戶的 session_key 可能會被更新而致使舊 session_key 失效（刷新機制存在最短周期，如果同一個用戶短時間內多次調用 wx.login，並非每次調用都導致 session_key 刷新）。開發者應該在明確需要重新登錄時才調用 wx.login，及時通過 code2Session 接口更新服務器存儲的 session_key。
2. 微信不會把 session_key 的有效期告知開發者。我們會根據用戶使用小程序的行為對 session_key 進行續期。用戶越頻繁使用小程序，session_key 有效期越長。
3. 開發者在 session_key 失效時，可以通過重新執行登錄流程獲取有效的 session_key。使用接口 wx.checkSession可以校驗 session_key 是否有效，從而避免小程序反復執行登錄流程。
4. 當開發者在實現自定義登錄態時，可以考慮以 session_key 有效期作為自身登錄態有效期，也可以實現自定義的時效性策略。

 

 

如果使用自己服務器定義的登錄態失效時間，則不需要wx.checkSession

9. launchMiniProgram 暫不能用

微信jssdk jweixin.js中有 launchMiniProgram 接口，用來調起小程序指定頁面，但目前暫未開放

 

10. wxss 不支持嵌套選擇器

11. 小程序navbar高度

12. cover-view的fixed定位支持

基礎組件1.9.9起支持，對應安卓和ios的微信客戶端是6.6.1版本

13. 聊天區域如何滾動到最底部

 

設置屬性 scroll-top: 999999即可

但在ios中有bug，動態設置scroll-top時，cover-view滾動區域會消失不見。目前官方正在修復。https://developers.weixin.qq.com/community/develop/doc/00068c7b5e0790b96387400585b800

 

14. cover-view內嵌button放在live-player上但button不顯示？

button標簽內必須有內容，不能為空標簽，不能內容空的cover-view標簽，否則button都不顯示！

可以內嵌cover-image標簽，如下：

<!--分享按鈕-->
<cover-view class="share_wrap" hover-class="active">
    <!--button內必須有內容，不能為空標簽，否則不顯示-->
    <button open-type="share" class="share_btn">
        <cover-image class="share" src="../../static/img/room/share_icon.png"></cover-image>
    </button>
</cover-view>

.share_btn{
    background: rgba(0,0,0,0);
    border: none;
}

目前：2018-10-24 官方已修復，正在等待微信版本更新https://developers.weixin.qq.com/community/develop/buglist

 15. webview跳轉問題

場景：

小程序A頁面--webview X頁面--小程序B頁面--webviewX頁面

問題：

如果讓從小程序B 頁面跳轉回webview頁面時，保證：

1. webview刷新

2. webview的回退按鈕，點擊一次即跳轉回小程序A頁面，而不是點擊兩次

webview頁面：

onShow(){
        let session = qcloud.Session.get()
        this.setData({
            url: `https://m.xxxx.com/recharge?platform=mp&skey=${session.skey}`
        })
    }


小程序B頁面：

var pages = getCurrentPages()
var prevPage = pages[pages.length - 2]

// 必須跳轉到一個和之前頁面不一樣的url，這樣navigateBack后才會刷新頁面
prevPage.setData({
    url: `https://m.xxxx.com/recharge`
})

wx.navigateBack()

之所以在webview中用onshow，是因為每次進入webview頁面都會執行，這樣就保證webview前后訪問的是同一個URL，保證點擊左上角返回時，只需點擊一次就返回到最初的小程序A頁面。

如果webview前后的URL不一致，則從小程序B跳轉到webview，點擊左上角會先返回最初的webview，然后再返回小程序A頁面

 

Q&A：webview登錄態問題

傳小程序的skey到webview，由webview后台進行判斷登錄態並主動種植登錄態

 

16. onTabItemTap不能觸發？

這個官方文檔描述不清晰，第一次切換tab時，並不會觸發此接口，再一次點擊自身tab才會觸發

 

17. button去掉邊框

button::after{
	border: none;
}

　

18. 背景漸變

cover-view不支持背景漸變，其他非原生標簽支持

 

19. wx:key的值不需要大括號

wx:key的值比較特殊，不需要用Mustache 語法

用唯一的id可以提高渲染速度，並不是所有情況index都適用

 

20. js和wxs內的正則

wxs內的語法不是js語法，所以對於生成正則對象，需要用到小程序自帶的函數getRegExp

var regExp = getRegExp("^http:", "i")

而次函數在js中是不存在的，js文件中需要重新使用js語法：

var regExp = new RegExp("^http:", "i")

 

21. wxs中的語法注意項

不支持let

 

 22. cover-view的scroll-topbug

ios動態改變cover-view的scroll-top值，會導致cover-view滾動區域消失不見

詳見： https://developers.weixin.qq.com/community/develop/doc/00068c7b5e0790b96387400585b800

 

23. setData也要認真看文檔

 

可以直接修改對象或者數組內的某個字段的值，甚至可以直接設置尚未在data中定義的值！

 甚至可以在setData的鍵值內增加變量：

this.setData({
      [`imgs[${key}]`]: img
})

注意：此時``需要用[]擴起才行

這樣可以做到數據的部分更新和渲染，無疑是對性能提升有幫助的

 

setData優化：

 

對於cover-view卡頓的，終極優化指南是：不用cover-view！！！想辦法分離原生組件和非原生組件

 

24. 防止源碼泄露

 

25. cover-image不支持高度自適應、懶加載和高斯模糊

 所以需要在js中動態計算高度渲染到頁面

懶加載可以自己寫，但要注意setData的坑

高斯模糊沒辦法，想辦法用非原生組件image代替

 

26. cover-view環形文字不同顏色的實現

 

 Demo:

 實現文字環繞

代碼片段： wechatide://minicode/YMbuaqmR7c3Q

代碼實現：

 

 

預期效果：

 

 

 實際效果： 

 

正確實現方式：

 

 參考論壇：https://developers.weixin.qq.com/community/develop/doc/000a402c99849820f2470d50551000

 

 但對於有圖片也需要環繞的，不適合這種情況：

預期效果：

實際效果：

 

 

 27. websocket問題

體驗版支持ws協議，需要打開調試模式

如果websocket是連接的域名非IP地址，則不能通過連接代理更改電腦的host來指定socket域名的解析地址

如果有測試環境，建議：

1. 建一個專有的測試環境websocket域名

2. 直接使用測試環境的IP地址訪問websocket

 

  如果對小程序還不熟悉，建議先看下另一篇小程序簡介