微信网页调用jssdk扫一扫，63002报错的坑，ios的兼容问题

news/2024/7/24 3:36:14 标签: javascript, html5

一，因为项目需要用到微信网页扫一扫功能，并且去找了很多文章都没有统一的整理，所以就整理了一下比较常见的坑

1.如何在网页调用扫一扫功能

1. 先引入npm

javascript">npm install weixin-js-sdk

如果你需要用微信的支付那些api 那就需要多引入
weixin-jsapi，当然如果你不需要也可以不引入

javascript">npm install weixin-jsapi

2. 引入之后在你需要用到扫一扫的页面引入(已经兼容ios的扫一扫的写法)

javascript">import wx from 'weixin-jsapi'

javascript">methods:{
    // 扫一扫 
    scanFn () {
     // 这是触发 扫一扫的方法
      wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            success: (res) => {
              console.log(res)
              // 这是扫码获取到的，在resultStr 是一个字符串
              let type = res.resultStr
              console.log(type)
            }
        })
    },
    // 请求接口获取参数
    apiWxConfig (val) {
      console.log(val)
      return new Promise((resolve)=>{
         写你请求后台获取到的信息
        // reslove()
      })
    },
    async wxScanCode() {
    // 判断 是什么端解决ios 的兼容问题，如果是安卓端则直接把整个url传给后台就行，要是ios 则需要截取#号
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
      let onurl = null
      if (isAndroid) {
         onurl = window.location.href
      }
      if (isiOS) {
        onurl = window.location.href.split('#')[0]
      }
      let result = await this.apiWxConfig({
        url: onurl, // 获取当前扫码界面的url，url后面不能携带任何参数及#号，所以在此进行分割
      })
      console.log("result", result);
      if (!result.success) {
      return  this.$toast(result.message)
      }
      if (result.success) {
        // 后端返回的参数
        var timestamp = result.data.timestamp;
        var noncestr = result.data.nonceStr;
        var signature = result.data.signature;
        var appId = result.data.appId;
        console.log("rresult.data.timestamp", result.data.timestamp);
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          // debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名，见附录1
          jsApiList: ["checkJsApi", "scanQRCode", "chooseWXPay"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        }); // 错误时
        wx.error(function (res) {
          this.$toast("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
        });
       wx.ready(function () {
            wx.checkJsApi({
                jsApiList: ['scanQRCode'],
                success: function () {
                }
            })
        })
      } else {
        this.$toast("js-sdk，微信配置失败");
      }
    }
  },