Vue:实现JSSDK调取微信扫一扫功能

最新推荐文章于 2025-03-18 10:37:56 发布

小小怪_下士

最新推荐文章于 2025-03-18 10:37:56 发布

阅读量2k

点赞数 2

文章标签：微信 vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45061461/article/details/132626522

版权

文章目录

概要

功能需求:项目需求VueH5项目调取微信的扫一扫功能,实现扫码获取二维码返回信息

请求微信的授权地址

1.在用户登录项目的时候需要跳转微信的授权地址:微信教程地址概述 | 微信开放文档

(1):项目安装JSSDK : 安装完成查看根目录 package.json文件,查看是否引入成功

npm install weixin-js-sdk

(2.)安装了 JSSDK 后,就可以准备微信授权了

1.跳转微信授权

//路由前置守卫 路由跳转前触发 并做出一些处理
router.beforeEach((to,from,next)=>{
  //检查是否已经授权了,授权之后后端回调跳转到前端页面,并在路由上携带了用户的信息,因为扫码进入的路径是'/invioce' 但是前端路由是hash模式,路由携带#号,避免跳转的路由地址没有携带#号
  if(window.location.href.indexOf('?') === -1 || to.path === '/invioce'){
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号AppId&redirect_uri=后端提供的地址入口/wetchat/callback&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
  }
  next()
})

2.后端拿到数据,回调到我们页面(需要跟后端确定,授权完成之后跳转的路径比如 : ''#/index'')

access_token:概述 | 微信开放文档

前端域名地址/index?access_token=调取微信接口的临时票据&open_id=用户的openId每个微信openid都是唯一的&user_name=用户微信昵称#/index

3.拿取路由中携带的用户信息


 mounted(){
       //获取用户的信息 已对象的形式  {"键":"值","键":"值"}
      let urlText = this.getUrlParams(window.location.href)
      //将用户信息保存到本地
      localStorage.setItem('URL',JSON.stringify(urlText))

     
    
},
getUrlParams(url) {
       //地址中是否包含 ?
      if (!url.includes("?")) {
        return {};
      }
      // 通过 ? 分割获取后面的参数字符串
      let urlStr = url.split('?')[1]
      // 创建空对象存储参数
      let obj = {};
        // 再通过 & 将每一个参数单独分割出来
      let paramsArr = urlStr.split('&')
      for(let i = 0,len = paramsArr.length;i < len;i++){
            // 再通过 = 将每一个参数分割为 key:value 的形式
        let arr = paramsArr[i].split('=')
        if(arr[1].indexOf('#') !== -1){
          arr[1] = arr[1].slice(0,arr[1].indexOf('#'))
        }
        obj[arr[0]] = arr[1];
      }
    return obj
}

wx.Config配置

1.在需要用到扫一扫的页面中通过config接口注入权限验证配置

(1)请求后端接口

mounted(){
    //拿取本地址保存的 用户open_id ,和请求签名的url,去掉#号后面的参数,相当于拿网页域名了比如:https://houduan.yuming.com/#/add_invoice?id=183611 => https://houduan.yuming.com/.
这次请求中没把access_token传过去,因为后端自己保存了access_token没让我传,access_token是用来拿取
jsapi_ticket,然后通过jsapi_ticket 和另外一些参数去拿取微信签名
    let signList = JSON.parse(localStorage.getItem('URL'))
    this.get_sign.open_id = signList.open_id
    this.get_sign.url = location.href.split('#')[0]
},

scan(){
      this.$axios.get('后端的接口地址',{
          params:this.get_sign
        }).then(res=>{
          //获取后端接口返回的 微信签名 和 其他参数
          console.log('res',res);
          let  resMsg = res.data
          wx.config({
            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            debug: false,
            // 必填，公众号的唯一标识
            appId: resMsg.appId,
            // 必填，生成签名的时间戳
            timestamp: resMsg.timestamp,
            // 必填，生成签名的随机串
            nonceStr: resMsg.nonceStr,
            // 必填，签名，见附录1
            signature: resMsg.signature,
            // 必填，需要使用的JS接口列表,我这里是请求的扫一扫
            jsApiList: ["scanQRCode"],
          });

          wx.ready(() => {
            //微信扫一扫请求操作
            this.ClickScan(this.type)
          });

          wx.error((res) => {
            console.log("失败",res);
          });
          
        })
    },

wx.scanQRCode调起摄像头

ClickScan(type) {
         wx.scanQRCode({
              needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
              success: (res) => {
                //扫码返回的结果
                let data_code = res.resultStr
              },
              cancel: () => {
                console.log('err', res);
                this.$dialog.alert({
                 message:res
                });
              },
            });
    },