微信小程序开发中遇到的坑和解决办法

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 会起作用，一定要在真机上测试。

2、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
}
复制代码

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 组件

在微信后台设置好域名后直接调用

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