uni-app微信H5微信扫一扫支持安卓跟苹果

下载微信JSSDK https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
我这边新建一个wechat.js用于调用扫一扫

var jweixin = require('@/components/app/jweixin');   // 我将下载的插件重命名为jweixin.js放在components/app/目录下
export default {  //判断是否在微信中  isWechat:function(){  var ua = window.navigator.userAgent.toLowerCase();  if(ua.match(/micromessenger/i) == 'micromessenger'){  return true;  }else{  return false;  }  },//初始化sdk配置scanQRJssdk:async function(){  let url = window.location.href.split('#')[0]let resData = await $http.POST('后台接口', {url:url});  // 根据接口返回appId，timestamp等数据if(resData.code==200){jweixin.config({beta: true,debug: false,  appId: resData.data.appId,  timestamp:resData.data.timestamp,  nonceStr: resData.data.nonceStr,  signature:resData.data.signature,  jsApiList: ['checkJsApi','scanQRCode']  });jweixin.ready(function () {jweixin.checkJsApi({jsApiList:['scanQRCode'],success:function(res){console.log(res)}})});}},

页面中调用方法

<template><view><button @click="OnQRcode()" class="sm cu-btn block bg-blue margin-top margin-lr-xs">扫码</button></view>
</template><script>
// 应用jweixin跟wechat插件
import jweixin from '@/components/app/jweixin-module'
import wechat from '@/components/app/wechat'
export default {data() {return {}},onLoad() {wechat.scanQRJssdk()   // 页面打开时自动获取scanQRJssdk}，methods: {OnQRcode:function(){      // 点击的时候调起扫一扫功能呢let self = thisjweixin.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {let resultStrArr = res.resultStr.split(",")      // 转为数组时为了避免扫描一维码是返回CODE_128,20180528前面会添加一个CODE_128所以转为数组获取最后一条就行了console.log(resultStrArr[resultStrArr.length-1]) // 输出扫码信息}});},}
</script>

ps:如果想支持苹果手机的话不要使用navigateTo跳转请使用window.location.href跳转到要扫码的页面。

locationUrl:function(url){           // window.location.href链接跳转// getApp().globalData.apiUrlA 默认H5端页面链接，url拼接的地址window.location.href=getApp().globalData.apiUrlA+url
},
urlLink:function(url,jsonData){         // 正常路由跳转this.router.push({route: this.routerUrl[url],query:jsonData});
},

uni-app微信H5微信扫一扫支持安卓跟苹果相关推荐

Vue开发微信H5 微信分享签名失败问题解决方案
Vue开发微信H5 微信分享签名失败问题解决方案参考文章: (1)Vue开发微信H5 微信分享签名失败问题解决方案 (2)https://www.cnblogs.com/golddemon/p/94 ...
iphone android 朋友圈,最近很火的微信空白朋友圈发布教程！安卓、苹果通用！
原标题:最近很火的微信空白朋友圈发布教程!安卓.苹果通用! 各位小伙伴,晚上好啊!已经一个月没有更新了,这篇文章几天之前就要推送了,一直拖到现在,真是名副其实的"拖更王". 微信作 ...
微信小程序：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询
这是一款战力查询的微信小程序源码源码内自带了接口目前支持了微信,QQ,苹果,安卓全区都可以查询支持流量主收益,而且搭建安装简单使用微信开发者工具打开源码然后设置一下合法域名上传审核即可该小程 ...
小程序源码：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询-多玩法安装简单
这是一款战力查询的微信小程序源码源码内自带了接口目前支持了微信,QQ,苹果,安卓全区都可以查询支持流量主收益,而且搭建安装简单使用微信开发者工具打开源码然后设置一下合法域名上传审核即可该小程 ...
对hash签名失败_详解Vue开发微信H5微信分享签名失败问题解决方案
关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时 ...
使用beecloud和easychat 做微信H5 微信公众号支付遇到的坑
首先我先来说明微信h5和微信公众号支付的区别微信H5指的是微信网页端支付.微信公众号支付指的是微信浏览器内发起微信支付,这种支付都是属于微信公众号支付.俩者本质的区别就是H5不需要微信网页授权,但是 ...
微信H5支付(MWEB)、扫码支付(NATIVE)、APP支付(APP)
1.下单方法 @ResponseBody@ApiOperation("微信浏支付/(H5)")@ApiImplicitParams({@ApiImplicitParam(name ...
解决-微信h5调获取发票抬头chooseInvoiceTitle安卓完全可以，但到了苹果却唤起不了
1.把我气笑了你肯定看了这个了微信官网找答案的开发人员提的问题 2.你可以让后端写一个端口,然后看看callback执行没,或者用node,其实callback执行了,而且res都可以拿到 ale ...
vue微信H5(微信公众号)实现微信支付功能
最近做了一个答题应用,甲方要求,用户进入应用先答题,最后点微信支付的时候,再授权,支付. 我的实现思路是点击微信支付按钮时,跳转到某个地址获取授权 redirect_uri 需要先在微信公众号后台支付 ...

uni-app微信H5微信扫一扫支持安卓跟苹果

uni-app微信H5微信扫一扫支持安卓跟苹果相关推荐

最新文章

热门文章