vue使用微信扫一扫功能的实现代码


Posted in Javascript onApril 11, 2020

第一步: 安装weixin-js-sdk 和 jquery 包 npm install weixin-js-sdk jquery

第二部: 配置wx.config (配置都是后端返回来的,菜鸟前端只需要按需传值过去就可)

代码如下

import wx from “weixin-js-sdk”;
import $ from “jquery”;
goSao() {

 //这里【url参数一定是去参的本网址】,请求后端接口换取signature
 //(兼容安卓和ios)
 let url = "传值";
 let ua = navigator.userAgent.toLowerCase();
 if (/iphone|ipad|ipod/.test(ua)) {
  this.newUrl = window.location.href.split("#")[0];
 } else if (/android/.test(ua)) {
  this.newUrl = window.location.href;
 }
 //传值为了去掉#
 
 $.get(`后台需要的路径=${this.newUrl}`,
  function(response) {
   wx.config({
    // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    debug: false,
    // 必填,公众号的唯一标识
    appId: response.data.appId,
    // 必填,生成签名的时间戳
    timestamp: response.data.timestamp,
    // 必填,生成签名的随机串
    nonceStr: response.data.nonceStr,
    // 必填,签名
    signature: response.data.signature,
    // 必填,需要使用的JS接口列表,所有JS接口列表
    jsApiList: ["scanQRCode"]
   });
   console.log(response)
  }
 );
 wx.error(function(res) {
  alert("出错了:" + res.errMsg); //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
 });
 let _t = this
  wx.ready(function () {
    wx.checkJsApi({
      jsApiList: ['scanQRCode'],
      success: function (res) {

      }
    });
    wx.scanQRCode({
      needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
      scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
      success: async (res)=>{
       var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
      alert(result )
      }
    });
  });
},

已测,可以使用

注:只能微信浏览器使用,其他浏览器不可

总结

到此这篇关于vue使用微信扫一扫功能的实现代码的文章就介绍到这了,更多相关vue 微信扫一扫内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
JS 数字转换研究总结
Dec 26 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
ES6关于Promise的用法详解
May 07 Javascript
手写实现JS中的new
Nov 07 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 #Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 #Javascript
JavaScript实现轮播图特效
Apr 10 #Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 #Javascript
Vue实现Layui的集成方法步骤
Apr 10 #Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 #Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 #Javascript
You might like
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php数字游戏 计算24算法
2012/06/10 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
对Django外键关系的描述
2019/07/26 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
Java和Javasciprt的区别
2012/09/02 面试题
这段代码难道不该打印出56吗
2013/02/27 面试题
十佳护士获奖感言
2014/02/18 职场文书
节约用水标语
2014/06/11 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android