微信小程序避坑指南

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

詳見官方文檔：developers.weixin.qq.com/miniprogram…

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滾動區域會消失不見。目前官方正在修復。developers.weixin.qq.com/community/d…

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 官方已修復，正在等待微信版本更新developers.weixin.qq.com/community/d…

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滾動區域消失不見

詳見：developers.weixin.qq.com/community/d…

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

代碼實現：

預期效果：

實際效果：

正確實現方式：

參考論壇：developers.weixin.qq.com/community/d…

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

預期效果：

實際效果：

27. websocket問題

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

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

若是有測試環境，建議：

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

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

轉載：https://cloud.tencent.com/developer/article/1367130