收藏
回答

公众号IOS真机调试扫一扫BUG

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS IOS 14.4 iPhone XR 8.0.2

问题描述:ios真机从公众号进入系统,无法调起扫一扫并报错。安卓正常,模拟器正常,模拟器预览iOS直接扫描也正常调起,只有iOS真机情况不正常

代码:
handleScanClick() {
 const _this = this
 debugger
 let url = location.href
 wxConfigInfo(url).then(res => {
  if (res) {
   //wx.config的配置
   window.wx.config({
    debug: false, // 开启调试模式,
    appId: res.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
    timestamp: res.timeStampStr + '', // 必填,生成签名的时间戳
    nonceStr: res.nonceStr + '', // 必填,生成签名的随机串
    signature: res.signature, // 必填,签名,见附录1
    jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
   })

   alert(location.href)

        window.wx.scanQRCode({
    desc: 'scanQRCode desc',
    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
    scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
    success: function(res) {
     console.log(res.resultStr, '扫描的结果~')
     const result = res.resultStr.split(',')[1] // 当needResult 为 1 时,扫码返回的结果  scanCode
     _this.scanCode = result
     _this.$toast('您扫描成功,追溯码为' + result)
    },
    error: function(response) {
     _this.$toast(response)
     alert(response)
            console.log('出错了:' + res.errMsg)
    }
   })

        window.wx.error(function(res) {
     console.log('出错了:' + res.errMsg)
    alert('出错了:' + res.errMsg) //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
   })
  }
 })
}
回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    2021-02-19

    invalid signature签名错误。建议按如下顺序检查:

    1. 确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
    2. 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
    3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。
    4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
    5. 确保一定缓存access_token和jsapi_ticket。
    6. 确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。


    2021-02-19
    有用 1
    回复 11
    • Clownএ᭄📿
      Clownএ᭄📿
      发表于小程序端
      2021-02-20
      能不能把我的邮箱释放掉?小程序和公众号都注销了,能把邮箱给我释放一下吗?你们要押几年啊?能不能向上面反应一下,都没地方去说
      2021-02-20
      回复
    • 王子麟
      王子麟
      2021-02-20
      请官方人员认真的看完整篇文章并进行测试之后回复,请认真审题,不要一味的复制粘贴通用解决方案。我只有ios真机从公众号进入不正常,真机预览和安卓全部通过。
      2021-02-20
      回复
    • 社区技术运营专员--许涛
      社区技术运营专员--许涛
      2021-02-20回复王子麟
      jssdk本来就分ios和Android
      2021-02-20
      回复
    • 王子麟
      王子麟
      2021-02-20回复社区技术运营专员--许涛
      那也没法解释我用开发者工具里的预览就能正确的调起扫一扫,从公众号进去不行吧。而且我用的是前端技术Vue,用的js,不区分ios和安卓
      2021-02-20
      回复
    • 社区技术运营专员--许涛
      社区技术运营专员--许涛
      2021-02-20回复王子麟
      复现问题时在手机微信那里上传下日志: 我->设置->帮助与反馈右上角有个上报日志的入口,麻烦提供一下微信号,时间点。微信版本号和具体机型
      2021-02-20
      回复
    查看更多(6)
  • 王子麟
    王子麟
    2021-02-21

    记录本次问题的解决方案(PS:我看大多数并没有解决,也给后来者一些启示,有一说一,官方的运维贼不靠谱,回复的问题驴头不对马嘴)

    本次解决方案采用了VUE路由的hash模式,不是history模式(PS:ios一直没法通过验证,就很烦,也没找到解决方案)

    1.创建一个空白页面进行重定向,就干这么一件事
    mounted() {
     let http =
      'https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXX&redirect_uri=web地址&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
     location.href = http
    }
    
    2.获取权限以后跳转到首页在解析地址,为了解析{地址/?参数#/路由} => {地址/#/路由?参数}的问题
    mounted() {
     let httpUrl = decodeURI(window.location.href)
     let url = httpUrl.replace('#/feature', '')
     if (httpUrl.includes('top/?code')) {
      // url包括 com/?code 证明为从微信跳转回来的
      let index = url.indexOf('top/') + 4 // 获取域名结束的位置
      let urlLeft = url.substring(0, index) // url左侧部分
      let urlRight = url.substring(index + 1, url.length) // url右侧去掉?部分
      let result = urlLeft + '#/feature?' + urlRight.replace('?', '&')
      console.log(result)
      window.location.href = result
     } else {
      this.getUrlParams(decodeURI(window.location.href))
     }
    }
    
    methods:
    getUrlParams: function(url) {
     let _this = this
     let redirectUrl = 'http://wechat.xxx.top/#/feature'
     let http = url || redirectUrl
     let params = {}
        http.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => params[k] = v) // eslint-disable-line
     // 没有携带参数
     if (JSON.stringify(params) === '{}') {
      let http =
       'https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=http%3A%2F%2Fwechat.xxx.top%2F%23%2Ffeature&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
      window.location.href = http
     }
     // 携带了参数
     else {
      if (params.code) {
       setWxCode(params.code)
       // 判断当前是否有token,如果有直接获取菜单,没有就获取token
       if (getToken()) {
        _this.getWXUser()
       } else {
        _this.getTokenInfo(params.code)
       }
      } else {
       alert('没有获取到Code')
      }
     }
    },
    
    下面就调用就好,也没啥特殊的东西了,具体参考两篇文章,结合一下,就这么点东西弄了十来天
    文章一:
    https://blog.csdn.net/zlw_spider/article/details/104180222
    文章二:
    https://www.cnblogs.com/ljx20180807/p/10132760.html
    
    2021-02-21
    有用 2
    回复
  • 王肖
    王肖
    2021-02-22

    你好,我是微信的技术人员。看到你这边提供了规避方案。请问可以提供一个可以复现原问题的路径吗,我这边排查下。谢谢。

    2021-02-22
    有用 1
    回复 1
    • 王肖
      王肖
      2021-02-26
      同步下结论:

      1. 问题1:wx.config时参与签名的url和微信这边二次校验的url不一致,所以签名失败,进而wx.config失败。

      在使用vue等框架修改页面history的时候,容易踩这种坑,在修改history之后的页面进行wx.config时,参与签名的url必须使用主页面url,不能使用修改history之后的url。

      在这个反馈的case中,应该使用主页面的url,即:http://wechat.zoomwang.top/feature?code=xxx&state=STATE
      不应该使用二级页面的url,即:http://wechat.zoomwang.top/QrCodeMerge

      2. 问题2:开发者wx.config的签名有问题,和微信官方工具的签名不一致:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign,请自查下
      2021-02-26
      回复
登录 后发表内容
问题标签