小程序webview调用微信扫一扫的“曲折”思路

Posted 2023-03-26

参考技术A 自上一篇遇到 webview 中没有返回按钮之后，虽然跳出坑了。解决方案： 《小程序webview跳转页面后没有返回按钮完美解决方案》

做为一名面向搜索引擎开发的我，遇到问题的第一件事，当然是百度啊，Google啊！可是这种在过去都是无往不利的方法，突然失效了！翻遍整个浏览器，并且把整个互联网都翻了个底朝天，竟然“找不到”解决方案（很有可能是我搜索水平太差，没有精通面向搜索引擎开发这项技能）！

无奈之下，只得另寻他法。我在上一篇文章中提到过，可以在 H5 页面使用 wx.miniProgram.navigateTo 方法跳转到小程序页面。所以，得好好的利用这个方法，搞点事情。

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

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

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

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

小程序获取手机号和调用微信扫一扫事例（不喜勿喷喔~）

参考技术A 封装小程序获取手机号接口及按钮：

getPhoneNumber(e)

    this.activeUser(e.detail.iv, e.detail.encryptedData);

  ,

  activeUser(iv, encryptedData)

    let url = app.globalData.URL + '/front/employeeInfo/activeUser';

    let openid = wx.getStorageSync('Openid')

    wx.request(

      url: url,

      data:

        iv: iv,

        encryptedData: encryptedData,

        openid: openid

      ,

      success: function (res)

        if (res.data.data)

          wx.setStorage(

            key: 'active',

            data: res.data.data,

          )

        else

          wx.showToast(

            title: '没注册不能激活',

          )

       

     

    )

 

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

调用微信扫一扫功能：

<text bindtap="bx">报修</text>

bx:function()

      wx.scanCode(

        success(res)

          console.log(res)

       

      )

    ,