微信小程序避坑指南

時間  2019-11-20
標籤 微信 程序 指南 简体版
原文   原文鏈接

 若是對小程序還不熟悉，建議先看下另外一篇小程序簡介javascript

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.htmlcss

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

用cover-view 和 cover-imagehtml

<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目前只對部分品類的應用開放java

 

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

 

 

設置完若是還不行，嘗試下重啓開發展工具，從新編譯，重啓真機上的微信。ios

 

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中設置：web

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

 

app.json文件配置導航樣式自定義：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（小遊戲）組件，在用戶點擊後彈窗請求獲取用戶基本信息。

 
 

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

 

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

 

  若是對小程序還不熟悉，建議先看下另外一篇小程序簡介

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程