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

princekin 發布于2019-08-23 12:39 / 636人閱讀

摘要：和部分組件表現的差異微信最小化后正在播放的會暫停，需要再次點擊播放按鈕，如果視頻設置的是不可控，沒有開始播放按鈕，視頻暫停了就無法繼續播放了，沒有該問題。

1、原生組件的層級問題

video、canvas、camera等原生組件層級最高，其他組件無論z-index為多少，都無法覆蓋在原生組件上。

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

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

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

2、ios和android部分組件表現的差異 ios

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

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

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

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

android

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

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

3、登錄之后的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
                            },
                        })
                    }
                },
            })
        },
    })
},

4、預覽文檔問題

兩種方法

1 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是跳出了小程序的，無法使用小程序提供的功能菜單了。

云服務器 GPU云服務器微信小程序開發微信小程序開發語言微信小程序開發免費微信小程序開發步驟

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98895.html

微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

Lowky 2019-08-30 11:07 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

elina 2019-08-02 15:15 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

voyagelab 2019-08-23 18:02 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法：微信小程序ad自適應布局（二）

摘要：問題添加微信廣告的小程序在正式上線并且通過審查后，如果有除了純展示的其他需求，比如需要點擊觀看廣告秒才能領取獎勵。場景：微信小程序中添加廣告，可以是微信廣告和自定義廣告的自適應布局；問題：微信廣告在小屏（比如：320）手機上或是設置ad組件父組件寬度小于300px，內容會超出布局范圍；截圖效果：showImg(https://segmentfault.com/img/bVbq...

Freeman 2019-08-02 16:11 評論0 收藏0