思路:
第一步:
小程序没办法直接调用js-sdk,但是微信h5可以调用。
第二步:
小程序里面嵌套一个h5
//需要在小程序里面,另起一个页面,因为嵌套进来的h5页面,层级会比较高
<web-view :src='url'></web-view>
//用组件web-view 其中url就是公众号页面路径
第三步:
创建一个h5项目,并且下载js-sdk依赖
//npm i jweixin-module
//在main.js中引入以及挂载
import wx from 'jweixin-module';
import request from './utils/request1';//这是请求
Vue.prototype.$wx= wx;
Vue.prototype.$request = request;
第四步:
在utils中建一个wechat.js
import Vue from "vue";
import jweixin from 'jweixin-module';
export default {
//调试模式
debug: false,
//权限
jsApiList: [//这里就是sdk提供的微信api
'scanQRCode'
],
//判断是否在微信中
isWechat: function () {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
},
//初始化sdk配置
initJssdk: function (callback, url) {
if (!this.isWechat()) { return; }
//服务端进行签名 ,可使用uni.request替换。 签名算法请看文档
//这里的接口,让后端去写接口,让后端根据文档
//https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
Vue.prototype.$request('/sft/public/getWeixinConfig', {
url: url || location.href.split('#')[0],
}).then(res=>{
const {data}=res
jweixin.config({
debug:this.debug,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.noncestr,
signature: data.signature,
jsApiList: this.jsApiList
});
//配置完成后,再执行分享等功能
if (typeof callback === 'function') {
callback(res.data);
}
})
},
//准备就绪
ready: function (callback, url) {
if (!this.isWechat()) { return; }
this.initJssdk(function () {
jweixin.ready(function () {
//配置完成后,再执行
if (typeof callback === 'function') {
callback(jweixin);
}
})
}, url)
},
closeWindow: function () {
this.ready(function (wx) {
wx.closeWindow();
})
},
//在需要定位页面调用
location: function (success, fail) {
this.ready(function (wx) {
wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
if (typeof success === 'function') {
success(res);
}
},
fail: function (res) {
if (typeof fail === 'function') {
fail(res);
}
}
});
});
}
}
第五步:
在需要用的页面进行调用
mounted(){
this.scna()
},
methods: {
scna(){
const url=window.location.href.split('#')[0];//这里是获取当前页面的url,微信要根据页面路径,进行授权
wechat.ready(this.sucssful,url)
},
sucssful(e){
this.$wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
})
}
}
第六步:
在微信公众平台,进行 JS接口安全域名配置,这个js安全域名,就是h5线上的地址,这个项目是挂载腾讯云上面的,所以这个地址就是腾讯的地址