vue 公众号开发，调用jssdk封装

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});}})}
}