vue调用微信扫一扫功能

因为写这个扫一扫百度了很久，最终终于写完了，把自己好不容易写出来的分享给大家，希望对大家有用！

1、先引入js文件，然后在使用的页面导入

npm install weixin-js-sdk --save

2、配置域名（需要的信息有这么多，一般由后端给）

切记：域名一定要备案，要不会有一堆问题

3、具体代码如下：（点击另一个页面的扫一扫按钮直接跳到这个vue页面）

scan.vue文件代码如下：

<template><div class="scanCode_info"><div class="score_header" v-if="ticketNum !== ''"><div class="return__icon" @click="returnBack"><i class="iconfont icon_lulufanhui"></i></div><div class="title">扫码结果</div></div><div class="scanCode_second">{{ticketNum}}</div></div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {data () {return {ticketNum: '',configContent: []}},mounted () { // 刚进来页面就检查wx配置this.getSign()},methods: {returnBack () {this.$router.push('/home')},getSign () {const divI = document.getElementsByClassName('scanCode_info')[0] // 后续修改的样式，可以不用divI.style.backgroundColor = '#9c9c9c'this.$vux.loading.show({text: '加载中...'})let url = encodeURIComponent(window.location.href.split('#')[0])// alert('url：' + url)this.$axios.get('http://www.com?url=' + url).then(res => { // url为例子，根据自己的项目来if (res.data.code === 0) {this.configContent = res.data.data  // 接口返回的数据，用于下面的配置this.signWX()}})},signWX () {let _this = thiswx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: this.configContent.appId, // 必填，公众号的唯一标识timestamp: this.configContent.timestamp, // 必填，生成签名的时间戳nonceStr: this.configContent.nonceStr, // 必填，生成签名的随机串signature: this.configContent.signature, // 必填，签名jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表})wx.ready(function () {const divI = document.getElementsByClassName('scanCode_info')[0]divI.style.backgroundColor = ''_this.$vux.loading.hide()wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {_this.ticketNum = res.resultStr // 当needResult 为 1 时，扫码返回的结果}})// alert('成功')// wx.checkJsApi({//   jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,//   success: function (res) {//     // 以键值对的形式返回，可用的api值true，不可用为false//     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}//     console.log('成功：', res)//     alert('成功' + res)//   }// })})wx.error(function (res) {const divI = document.getElementsByClassName('scanCode_info')[0]divI.style.backgroundColor = ''_this.$vux.loading.hide()console.log('微信js-sdk 配置失败000' + res.errMsg)alert('微信js-sdk 配置失败000' + res.errMsg)})}}
}
</script>
<style scoped lang="scss">.scanCode_info {height: 100%;position: relative;}.score_header {font-size: 16px;width: 100%;background-color: #42b983;color: #fff;line-height: 40px;flex: none;z-index: 1;}.return__icon{margin-left: 20px;width: 20px;height: 20px;position: absolute;}.iconfont {margin-top: 10px;font-size: 20px;}.title {position: absolute;left: 50%;transform: translateX(-50%);}.scanCode_second {margin-top: 18%;text-align: center;color: #3c3c3c;}
</style>

遇到的问题：config of undefined（大概是这样的）

解决方法：在index.html页面引入的下面这个js文件删除了就可以了

有哪里写的不对的，欢迎指正~

vue调用微信扫一扫功能相关推荐

【Vue 调用微信扫码 IOS报错解决办法】
遇到一个问题,H5调用摄像头扫码,安卓环境下基本所有机型都可以调起摄像头,但是IOS 只有少部分机型才能调用,参考了网上很多例子比如以下两位老大哥的例子 Vue 移动端实现调用相机扫描二维码或条形码 ...
asp源码爱好者福利,asp调用微信扫一扫代码,用asp写的调用微信内置扫一扫功能源码下载
接到一个用户的需求,要在他的手机版网页里实现扫一扫功能,扫出他的产品编号入库,这太简单了,花了几分种时间给他实现一下. 微信扫一扫必须使用微信内置浏览器访问此页面才能查看效果: 程序功能: 通过微信J ...
vue 调用微信分享接口分享截图图片
vue 调用微信分享接口分享截图图片现在好多应用都需要分享图片等等的需求 . 大体需要这几个步骤获取分享图片将 ...
vue调用微信扫一扫
vue调起微信扫一扫,两个注意的点 1.url必须是不带参的地址栏,如果传了带参数的地址url有可能会出现安卓机能调,苹果机报错或者安卓和苹果都报错 2.this指代问题在vx.ready等等方法里面 ...
javascript调用微信或QQ扫一扫
项目里为了体验做的好点,想直接通过js调用手机的扫一扫:服务的用户主要是通过:微信或QQ之前使用过微信或QQ的分享腾讯移动WEB开发平台的 '对外分享组件接口文档'http://open.mobil ...
提问：微信网页授权到第三方调用错误、调用微信公众号扫码登陆错误、微信SCOP权限错误或没有权限
总结: 调用微信扫码,但是微信返回提示SCOP错误,我的微信公众号认证了,也把对应的域名填写了,代码上填写的snsapi的路径是填写在对用网页授权域名下的路径. 错误原因: 应该是微信公众号上的配置错 ...
前端JS调用微信JSAPI之扫一扫
扫一扫按钮增加点击事件 <div class="a2" onclick="onQscan()"><span>扫一扫</span&g ...
vue调用微信扫描条形码
整个调用方分为三大块: 一:后端 1.提供一个接口给前端,返回相关配置,前端传递url给后台 /** *调用微信的扫一扫相关配置 * @param * @param */ @PostMapping(& ...
Vue调用微信JSSDK上传图片(wx.uploadImage)
Vue页面调用微信API上传图片由于原生input上传图片无法在选择图片时控制选择的张数,所以选择调用微信JSSDK提供的方法调用相册选择图片进行上传.选择图片后上传到微信服务器,然后通知后台去微信 ...

vue调用微信扫一扫功能

vue调用微信扫一扫功能相关推荐

最新文章

热门文章