ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue+h5项目中调取微信扫一扫功能

2021-09-17 15:03:22  阅读:152  来源: 互联网

标签:vue console log 微信 resData h5 res wx


准备工作:
1.引用微信jweixin-module支持,可使用

npm install jweixin-module --save

2.使用微信扫一扫需登录微信公众号->设置-公众号设置->功能设置下的JS接口安全域名
配置安全域名,例如https://dp-scrm.lanlnk.com要配置成dp-scrm.lanlnk.com,无需添加http
使用:
项目中引入:import wx from ‘jweixin-module’;

import wx from 'jweixin-module';
export default {
	data(){
		return{
		}
	},
	mounted(){
		this.isWechat();
	}
	methods:{
		isWechat() {
      const ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/micromessenger/i) == 'micromessenger') {
        // return true;
        console.log('微信浏览器');
        this.scanQRJssdk();
      } else {
        console.log('普通浏览器,请在手机微信浏览器打开此页面');
        return false;
      }
    },
    // 初始化sdk配置
    async scanQRJssdk() {
      // alert(`url链接:${window.location.href}`);
	  const url = window.location.href;
      // let url =  encodeURIComponent(location.href.split("#")[0]);
      const api = [];
      // 'qrCode','barCode'
      api.push('qrCode');
      api.push('barCode');
      const resData = await getWeiXinSdk({ api, url });	// 根据接口返回appId,timestamp等数据
      console.log('获取微信配置结果', resData);
      if (resData) {
        // alert(JSON.stringify(resData));
        wx.config({
          // beta: true,
          debug: false,
          appId: resData.data.result.appId,
          timestamp: resData.data.result.timestamp,
          nonceStr: resData.data.result.nonceStr,
          signature: resData.data.result.signature,
          jsApiList: ['checkJsApi', 'scanQRCode']
        });
        wx.ready(() => {
          wx.checkJsApi({
            jsApiList: ['scanQRCode'],
            success(res) {
              console.log('aaaa', res);
            }
          });
        });
        wx.error((res) => {
          alert(`出错了:${res.errMsg}`);// 这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然		后根据微信文档查询即可。
        });
      }
    },
    OnQRcode() {	// 点击的时候调起扫一扫功能呢
      const that = this;
      console.log('1');
      wx.scanQRCode({
        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
        success(res) {
          const resultStrArr = res.resultStr.split(',');		
          // 转为数组时为了避免扫描一维码是返回CODE_128,20180528前面会添加一个CODE_128所以转为数组获		取最后一条就行了
          console.log(resultStrArr[resultStrArr.length - 1]); // 输出扫码信息
          that.result = resultStrArr[resultStrArr.length - 1];
        },
        fail(res) {
          console.log('err', res);
        }
      });
    },
	}	
}

注意:

1.配置的公众号appid一定要与config中的appid一致;
2.配置的安全域名要与当前域名一致,否则会报:errMsg : config:invalid url domain错误

标签:vue,console,log,微信,resData,h5,res,wx
来源: https://blog.csdn.net/qq_36093530/article/details/120348617

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有