微信的扫一扫功能的前端实现

开发背景:

在公众号项目中实现扫码识别信息功能

开发前提:

由于需要调用微信的扫一扫功能,所以要先配置一下微信需要的信息

1.官方接口文档:微信JS-SDK说明文档
2.配置js安全域名:登录公众号 -》公众号设置 -》功能设置 -》JS接口安全域名

开发步骤:

1.引入js文件

CDN引入:http://res.wx.qq.com/open/js/jweixin-1.4.0.js(支持https)
npm安装命令行:npm install --save-dev weixin-js-sdk
main.js引入:import wx from ‘weixin-js-sdk’

2.在页面加载完成后先完成配置
    mounted () {
		this.getconfig()
	},
	methods:{
		    getconfig(){
        //需要把当前页面的url地址传到后台,生成签名信息时需要使用到
        var tokenUrl= location.href
        //获取签名的后台接口
        var _getWechatSignUrl = '/orange/jsapi/getSign'
        var that=this
        this.$axios.post(_getWechatSignUrl,{tokenUrl:tokenUrl},{headers:{token:localStorage.getItem('token')}}).then(res=>{
          that.wxconfig(res.data.appId,res.data.timestamp,res.data.nonceStr,res.data.signature)
        })
      },
      wxconfig(_appId,_timestamp, _nonceStr, _signature){
        wx.config({
          debug:true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: _appId,// 必填,公众号的唯一标识
          timestamp: _timestamp,// 必填,生成签名的时间戳
          nonceStr: _nonceStr,// 必填,生成签名的随机串
          signature: _signature,// 必填,签名,见附录1
          jsApiList: ['checkJsApi','scanQRCode']
          // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        })
      }
	}
3.用户点击扫码触发扫码功能
		wx.scanQRCode({
          desc: 'scanQRCode desc',
          needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
          scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有
          success : function(res) {
            console.log("调用扫描成功",res);
            var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
            $("#codeValue").val(result);//显示结果
            alert("扫码结果为:" + result);
          },
          error:function(res){
            console.log(res)
          }
        })

/------------------------------------追加------------------------------------------/
找资料的时候找到一种第三方网站扫码的方法,纯前端实现,不需要调用微信sdk

https://www.jianshu.com/p/d5f5a10dc011

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页