微信小程序開發中遇到的坑和解決辦法

一、原生組件的層級問題

video、canvas、camera等原生組件層級最高，其餘組件不管z-index爲多少，都沒法覆蓋在原生組件上。

這裏拿video組件作示例，若是須要點擊視頻支持微信開放能力，例如受權手機號，獲取用戶信息等，必需要利用button組件，若是在原生組件外層添加button組件，點擊視頻並不會觸發button事件，代碼以下，這裏點擊視頻並不會彈出受權手機提示，觸發getPhoneInfo函數。

<button open-type='getPhoneNumber' bindgetphonenumber='getPhoneInfo'>
    <video src="{{videoUrl}}"></video>
</button>

解決辦法：利用 cover-view 組件，原生組件只支持嵌套cover-view和cover-image組件，且cover-view內可使用button。
代碼以下，同時用css隱藏button，並全覆蓋video便可實現點擊視頻彈出受權手機提示，此時點擊控制欄無效。這裏視頻是自動播放不可控，若是須要控制視頻或者是自定義播放按鈕圖標等，能夠在button內嵌套cover-image自定義便可。

<video src="{{videoUrl}}" autoplay controls="{{false}}">
    <cover-view>
        <button open-type='getPhoneNumber' bindgetphonenumber='getPhoneInfo'>
            <cover-image src="{{imgUrl}}" />
        </button>
    </cover-view>
</video>

tips：video的層級問題在開發者工具中不會顯露出來，z-index會起做用，必定要在真機上測試。

二、ios和android部分組件表現的差別

ios

video：微信最小化後正在播放的video會暫停，須要再次點擊播放按鈕，若是視頻設置的是不可控，沒有開始播放按鈕，視頻暫停了就沒法繼續播放了，android沒有該問題。

<video id="video" src="{{videoUrl}}" loop autoplay controls="{{false}}">
</video>

解決辦法：建立video上下文VideoContext 對象，頁面每次onShow的時候執行相應操做。

onReady: function () {
    this.videoContext = wx.createVideoContext('video')
},

onShow: function () {
    if (this.videoContext) {
        this.videoContext.play()
    }
},

android

input：限制了輸入的最大長度，達到最大長度後再次輸入是沒有顯示的，可是input的value值包含最大長度後面的輸入。

<input bindinput='phoneChange' maxlength="4" type="number" />

phoneChange: function(e){
    console.log('e.detail.value) 
    //小鍵盤輸入12345，實際獲取到的ios的值爲1234，android是12345，input組件顯示的是1234
}

三、登陸以後的session_key失效

冷啓動進入小程序，app.js在onLaunch調用登陸接口，經過登陸code，後端拿到session_key以後，後續可解密encryptedData（getPhoneNumber，getUserInfo），校驗用戶信息signature(getUserInfo），若是後續用戶一直是熱啓動進入小程序，不會在onLaunch中從新登陸，同時用戶沒有在小程序有過操做從而延長session_key的有效期，後續操做就會出現session_key失效，報錯。

解決辦法：在onShow中調用登陸接口，同時爲了不不必的調用，可經過wx.checkSession( )檢查登陸狀態是否過時，若是過時就從新登陸，代碼以下。

onShow: function () {
    wx.checkSession({
        success: () => {
            wx.login({
                success: res => {
                    if (res.code) 
                        wx.request({  // 換取openid，session_key等信息
                            url: 'https://test.com/onLogin',
                            data: {
                                code: res.code
                            },
                        })
                    }
                },
            })
        },
    })
},

四、預覽文檔問題

兩種方法

1 web-view組件

在微信後臺設置好域名後直接調用

<web-view src="{{url}}"></web-view>

如圖所示：

可是android會下載該文件，這並非用戶想看到的，也能夠考慮用如下方法。

2 wx.openDocument( )

wx.downloadFile({
    url: 'http://example.com/somefile.pdf',
    success: function(res) {
        const filePath = res.tempFilePath
        wx.openDocument({
            filePath: filePath,
            success: function(res) {
                console.log('打開文檔成功')
            }
        })
    }
})

效果圖以下：

對比兩個方法的效果圖，能夠看到方法2是跳出了小程序的，沒法使用小程序提供的功能菜單了。