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

news2024/12/23 17:36:11

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