在Vue中调用微信的扫描二维码功能
2018-03-26 11:58
393 查看
在Vue中调用微信的扫描二维码功能
步骤
新建vue文件(这里采用mint的标签库--就一个按钮~~)关键代码
<template> 10472 <div class="login_div"> <mt-button id="wxsys" type="primary" v-on:click="sys_click()">扫一扫</mt-button> </div> </template> <script> import wx from 'weixin-js-sdk' import $ from 'jquery' export default { data(){ return { } }, methods : { sys_click : function() { //这里【url参数一定是去参的本网址】 $.get("获取微信认证参数的地址?url=去参的本网页地址", function(data){ var jsondata=$.parseJSON(data); wx.config({ // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 debug: false, // 必填,公众号的唯一标识 appId: jsondata.model.appId, // 必填,生成签名的时间戳 timestamp: "" + jsondata.model.timestamp, // 必填,生成签名的随机串 nonceStr: jsondata.model.nonceStr, // 必填,签名 signature: jsondata.model.signature, // 必填,需要使用的JS接口列表,所有JS接口列表 jsApiList: ['checkJsApi', 'scanQRCode'] }); }); wx.error(function (res) { alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。 }); wx.ready(function () { wx.checkJsApi({ jsApiList: ['scanQRCode'], success: function (res) { } }); wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 alert("扫描结果:"+result); window.location.href = result;//因为我这边是扫描后有个链接,然后跳转到该页面 } }); }); } } } </script>
Vue引入微信的sdk和jquery需要做:
引入微信sdk安装依赖 npm i -S weixin-js-sdk引入 import wx from 'weixin-js-sdk'
引入jquery
注意事项:
“获取微信认证参数”这个的前提是您能够有自己的微信开发资质,并能获取到正确的参数公众号的唯一标识签名的时间戳
签名随机串
常见的错误config:invalid signature
解决办法“当前网页的地址”-----哈哈,一定是你写的不对,这里一定是去参的本网页的地址
最好是在服务器下去测试
其他问题暂时没有,希望对有缘人有帮助~~
相关文章推荐
- 在js中调用微信的扫描二维码功能
- 带长按扫描二维码功能的WebView,实现类似微信效果
- weex Android 调用扫描二维码功能(图文详解)
- iOS 模仿微信扫描二维码放大功能
- java微信扫描公众号二维码实现登陆功能
- 仿微信的二维码登录功能:客户端登录后,通过扫描web端页面上的二维码,实现同一用户在web端的登录
- Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
- 对于ios7扫描二维码功能的实现
- 二维码 扫描框的 处理 美化功能 喜欢的 自己直接替换和修改
- 微信扫描二维码跳转页面
- yii调用微信接口扫二维码
- Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
- vue cli引入微信sdk,完成微信接口调用——使用natapp配置本机ip映射(三)
- Win10 UWP开发:摄像头扫描二维码/一维码功能
- Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
- 调用微信聊天功能和分享功能
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- Android开发之Zbar实现二维码扫描功能
- Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
- QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式