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

princekin 发布于2019-08-23 12:39 / 587人阅读

摘要：和部分组件表现的差异微信最小化后正在播放的会暂停，需要再次点击播放按钮，如果视频设置的是不可控，没有开始播放按钮，视频暂停了就无法继续播放了，没有该问题。

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云服务器微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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