• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

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

其实也不算是没有找到,只是找到的不适合我,并没有解决我的问题,例如下面这篇(还有几篇广告文就不提了):
《微信小程序webview直接调用微信扫一扫相关功能》
文中提到,直接使用小程序的APPIDappsecret,替换公众号的APPIDappsecret就可以了。但是这我这始终都没法用,难道是腾讯觉得我帅,起了妒忌之心,故意针对我吗?或者说是写后台的哥们把逻辑搞错了?(嗯,实力甩锅)反正就是没法用,报错Invalid signature

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

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

1、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);
               }
          })
      }
}
2、小程序页面唤起扫一扫,并对扫码结果进行返回

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

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

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

2.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)
  },
3、H5页面接收扫码结果,并对其进行处理
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页面的链接,这样的话,就不会有空白一片了。

转载请注明出处:https://www.jianshu.com/p/154ffc0abed4
作者:TSY
个人空间:https://www.hxkj.vip


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
数据库设计心得——基于微信小程序的社区电商平台发布时间:2022-07-18
下一篇:
小程序——微信小程序初学踩过的坑发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap