vue 公众号开发,经常会使用到 转发朋友,朋友圈,调用扫一扫等功能,这时就要使用微信的 jssdk
微信jssdk传送门
1. 安装jssdk 插件 (jweixin-module)
npm install jweixin-module --save
2. 封装方法
utils/jwx.js
let jweixin = require("jweixin-module")
import api from "@/api/api"
export default {
isWechat: function () {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
return true;
} else {
alert('不是微信客户端,请在微信客户端操作在,谢谢');
return false;
}
},
initJssdk: function (callback) {
//获取当前url然后传递给后台获取授权和签名信息
let url = location.href;
//let url = "https://custom.lbcst.com/bosscustom/pages/introduce/order";
//这里是请求后台,调用jssdk 的申请接口,只有它完成了后,才有权限调用 jssdk 中的方法
api.getinstance().shareAuth({url}).then(res=>{
// console.log('后台返回签名')
// alert(JSON.stringify(res))
//返回需要的参数appId,timestamp,noncestr,signature等
//注入config权限配置
jweixin.config({
debug: false,
appId: res.data.info.appId,
timestamp: res.data.info.timestamp,
nonceStr: res.data.info.nonceStr,
signature: res.data.info.signature,
jsApiList: [ //这里是需要用到的接口名称
'updateAppMessageShareData', //分享给朋友
'updateTimelineShareData', //分享到朋友圈
"uploadImage", //上传图片
"chooseImage", //选择本地的图片
"previewImage", //预览图片接口
"getLocalImgData" //获取本地图片接口
]
});
if (callback) {
callback(res.data);
}
})
},
//封装分享朋友的方法
//分享朋友 //为自定义的方法,配置参数,这样更加灵活
shareAppmessage:function({title="",desc="",link="",imgUrl="",callback=null}){
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(){
jweixin.ready(function(){
jweixin.updateAppMessageShareData({
title,
desc,
link,
imgUrl,
success: function(rs) {
if(callback){
callback(rs)
}
}
})
})
})
}
//封装扫一扫的方法
scanQRCode:function({needResult=0,scanType=["qrCode","barCode"],callback=null}){
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(res){
jweixin.ready(function(){
jweixin.scanQRCode({
needResult,
scanType,
success:function(r){
callback && callback(r)
}
})
})
})
},
}
3.调用
在main.js中把 jwx 引入
<van-button @click="writeoff" type="primary" block>扫码核销</van-button>
methods:{
writeoff(){
let that = this;
this.$jwx.scanQRCode({
needResult:1,
callback:function(res){
console.log(res);
that.resultStr = res.resultStr;
Toast({message:"扫码成功了,请用接口核销"+res.resultStr});
}
})
}
}
以上的封装只是一个示例,所有的调用,都可以使用这类似的方法封装