微信小程序> 微信小程序、公众号内嵌H5页面调用微信扫一扫

微信小程序、公众号内嵌H5页面调用微信扫一扫

浏览量:2346 时间: 来源:ycb1689

小程序内嵌H5调用微信扫一扫的功能,通过小程序webview来实现,具体方法与思路代码如下:

但是,小程序踩坑之路并没有结束。在公众号网页中通过配置APPIDappsecret可以正常调起微信扫一扫,但是,如何在小程序webview中调用扫一扫?扫描之后数据如何处理?小程序页面处理?还是传递给H5页面处理?

无奈之下,只得另寻他法。网上有人说,可以在H5页面使用wx.miniProgram.navigateTo方法跳转到小程序页面。所以,得好好的利用这个方法,搞点事情。

想想看,既然能跳转到小程序,而小程序本身调用扫一扫是非常方便的,只需要使用wx.scanCode即可。那么也就是说,当用户点击扫码操作的时候。我们可以先跳转到小程序页面,在页面onload的时候,立马调用wx.scanCode,也就达到了点击H5页面按钮唤起扫码功能的效果。然后把扫码结果,通过设置webviewurl参数的形式返回给H5页面,最后在H5页面处理扫码结果。整个流程分析下来,可以说是天衣无缝,非常完美,理论上来说,是完全成立的。接下来,【撸码--运行--看效果】一条龙服务。点赞手势准备好,我怕看完我接下来的操作,你们沉浸在其中,无法自拔而忘记点赞了。

1、H5页面跳小程序

 

    var ua = window.navigator.userAgent.toLowerCase();    if(ua.match(/MicroMessenger/i) == 'micromessenger'){    //判断是否是微信环境                //微信环境 如果不是Vue导入方式,需要写成window.wx.miniProgram.getEnv()        wx.miniProgram.getEnv(function(res) {            if (res.miniprogram) {                // 小程序环境下逻辑                 wx.miniProgram.navigateTo({url: '../scanCode/scanCode'});//跳转到小程序调用微信扫一扫页面                       }else {                //非小程序环境下逻辑            }        })    }else{          //非微信环境逻辑    }

2、小程序页面唤起扫一扫,并对扫码结果进行返回

/**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    //兼容ios微信无法立即调起扫一扫    setTimeout(function () {      wx.scanCode({//调用扫一扫        success: function (res) {//扫码成功的回调函数          wx.redirectTo({//失败的话,重定向到页面中,并且携带miniType参数和result参数            url: '../index/index?url=https://www.hxkj.vip?miniType=mini&result=' + res          })        },        error: function (err) {//扫码失败的回调函数          console.log('err');          wx.redirectTo({//失败的话,直接重定向到页面,并且不带任何参数            url: '../index/index?url=https://www.hxkj.vip/'          })        }      })    }, 500)  },

特别注意setTimeout函数,如果不使用该方法进行延迟调用,在IOS系统中100%无法调起扫一扫,应该算是微信小程序的BUG,至于延迟多少,就自行测试了,这边延迟500ms

2.1、扫码成功的回调处理:重定向到页面中,并且携带miniType参数和result参数

miniType:用于区分是否为扫码返回,如果url有该参数则获取result结果,如果url没有该参数,则不做任何操作。result:扫码返回结果

2.2、扫码失败的回调处理:直接重定向到页面,并且不带任何参数

3、H5页面接收扫码结果,并对其进行处理

openScanCode() { //打开微信扫一扫     isMiniProgram(wx, (res)=>{//是否为小程序环境          if (res) {//小程序环境               wx.miniProgram.navigateTo({url: '../scanCode/scanCode'});//跳转到小程序调用微信扫一扫页面           } else {//非小程序环境(公众号环境)               //通过jssdk方法调用微信扫一扫,代码忽略          }       })},isMiniProgram(callback) { //是否为小程序环境      //是否在微信环境      if (!isWeixin()) {          callback(false);      } else {           //微信API获取当前运行环境           wx.miniProgram.getEnv((res) => {               if (res.miniprogram) {//小程序环境                   callback(true);               } else {                   callback(false);               }          })      }}
this.isMiniProgram((res)=>{//判断是否是小程序页面的回调函数        if (res) {//小程序页面             let miniType = this.$route.query.miniType;             let result = this.$route.query.result;             if (miniType && miniType === 'mini') {                 this.scanResult(result);//处理扫码结果            }        }       })

经过以上的曲折解决办法,已经实现了在小程序webview调用微信扫一扫的功能。然而还有个坑,那就是,当用户调起扫一扫时,什么也没干,直接返回!!!然后他将会看到一个空白的页面,这个页面就是调用扫一扫的小程序页面,因为我们在这个页面什么都没加,当然就空白了。目前我是在这个页面也加一个webviewwebviewurl就是调用扫码H5页面的链接,这样的话,就不会有空白一片了。

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎