使用vue+weixin-js-sdk实现公众号页面的扫码功能

vue+barcode 实现app端的扫码功能

同样的，详细的api文档描述可以看微信官方文档，这里就简单列一下用到的点。

1.引入weixin-js-sdk 依赖 vue全局使用

npm install weixin-js-sdk

import wx from "weixin-js-sdk";

Vue.prototype.wx = wx;

2.通过config接口注入权限验证配置
此处的appId、timestamp、nonceStr、signature都是从后端接口获得。(大部分调试时间都耗在权限配置这里了，需要按照文档要求配置好哦，否则在官方文档上列出的错误代码，这里都有幸看见~~~)

this.wx.config({// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。debug: false,// 必填，公众号的唯一标识appId: this.jsonData.appId,// 必填，生成签名的时间戳timestamp: "" + this.jsonData.wxConfig.timestamp,// 必填，生成签名的随机串nonceStr: this.jsonData.wxConfig.nonceStr,// 必填，签名signature: this.jsonData.wxConfig.signature,// 必填，需要使用的JS接口列表，所有JS接口列表jsApiList: ['checkJsApi', 'scanQRCode']
});

3.通过ready接口处理成功验证

this.wx.ready(function() {console.log("配置成功")
})

4.通过error接口处理失败验证

this.wx.error(function (res) {console.log("出错了：" + res.errMsg)// alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
});

5.调起微信扫一扫接口

this.wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: res=> {console.log("扫码成功")let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果//其它网页调用二维码扫描结果：console.log(result);console.log(res);},error: res=> {console.log("扫码失败")console.log(res);}
});

完整代码：

<template><van-icon name="scan" size="20" @click="goScan"/>
</template>
<script>import apiUrl from '@/api/apiUrl'import httpService from '@/api/httpService'import { Toast } from 'vant';export default {name: "index",data(){return{jsonData:{wxConfig:{}}}},created(){},mounted() {// 页面加载完成唤醒微信扫一扫this.initWx();},methods:{initWx(){console.log("this is url param:");console.log(window.location.href.split('#')[0]);//需调用后台接口获取微信配置的参数值之后再初始化微信apihttpService.accessAPI({apiObj:apiUrl.scanParamUrl,query:{url:window.location.href.split('#')[0]}}).then(result => {console.log(result)if(result.code ===0){this.jsonData.appId=result.data.appId;this.jsonData.wxConfig.timestamp=result.data.timestamp;this.jsonData.wxConfig.nonceStr=result.data.nonceStr;this.jsonData.wxConfig.signature=result.data.signature;this.wx.config({// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。debug: false,// 必填，公众号的唯一标识appId: this.jsonData.appId,// 必填，生成签名的时间戳timestamp: "" + this.jsonData.wxConfig.timestamp,// 必填，生成签名的随机串nonceStr: this.jsonData.wxConfig.nonceStr,// 必填，签名signature: this.jsonData.wxConfig.signature,// 必填，需要使用的JS接口列表，所有JS接口列表jsApiList: ['checkJsApi', 'scanQRCode']});this.wx.ready(function() {console.log("配置成功")})this.wx.error(function (res) {console.log("出错了：" + res.errMsg)// alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。});}})},goScan(){//调用扫一扫this.wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: res=> {console.log("扫码成功")let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果// 扫码成功跳转console.log(result);console.log(res);},error: res=> {console.log("扫码失败")console.log(res);}});},}}
</script>

使用vue+weixin-js-sdk实现公众号页面的扫码功能相关推荐

微信公众号调起扫码功能
偶然接触到了公众号开发.说需要调起微信扫一扫.便查看了公众号开发文档看完文档后,发现js是相对简单的.唯一的难点是在java后台编写的秘钥生成代码. 也就是说.首先需要获取access_token, ...
微信公众号拉取扫码功能
点击扫码按钮拉取微信扫码 // 扫码添加设备goAddEquipment() {const wx = window.wxlet _this = this// wx.ready(function() { ...
JS_微信公众号开发调用扫码支付功能
需要在公众号里面切入扫码功能前端代码: <!DOCTYPE html> <html> <head lang="en"><meta cha ...
利用公众号实现网页扫码登录
公众号因为有测试号,所以测试起来蛮方便的. 1.先熟悉微信公众号开发文档. 2.首先网页端需要生成临时二维码例如:https://mp.weixin.qq.com/cgi-bin/showqrcod ...
微信公众号开发之扫码支付
此项目已开源欢迎Start.PR.发起Issues一起讨论交流共同进步 https://github.com/Javen205/IJPay http://git.oschina.net/javen20 ...
关于微信公众号开发中扫码关注和关注之后继续扫码的不同点
2019独角兽企业重金招聘Python工程师标准>>> 开发微信商城,当遇到需要绑定上下级关系的时候,会通过扫码的方式关注公众号,但是如果不想做这个人的下级,后台添加解绑功能,继续扫 ...
以后的blog将转移到微信公众号，请扫码关注谢谢！
asp论坛回复功能怎么实现_微信公众号整合群发图文消息功能怎么实现？
对于微信公众号整合区分图文消息功能的实现,微号帮平台提供了服务号每月400次群发功能实现,公众平台提供了接口编程开发实现功能,均能达到微信公众号群发图文消息的功能效果,实现订阅号每天群发1次消息,服务 ...
微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器（思路详解）...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...

使用vue+weixin-js-sdk实现公众号页面的扫码功能

使用vue+weixin-js-sdk实现公众号页面的扫码功能相关推荐

最新文章

热门文章