vue中使用wxjssdk以及授权

1,811 阅读1分钟

第一步:安装wxjssdk

npm i weixin-js-sdk -S

第二步:在需要使用的组件页面导入(建议在main.js中导入)

import wx from 'weixin-js-sdk';

第三步:通过后台接口拿到签名信息

this.$https.getWx({
    pageURL: window.location.href.split("#")[0]//通过当前页面地址生成对应签名
}).then(res=>{
    try{
        if(res.data.result=='success'){
            //进行微信授权。
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: res.wx.appId, // 必填,公众号的唯一标识
                timestamp: res.wx.timestamp, // 必填,生成签名的时间戳
                nonceStr: res.wx.nonceStr, // 必填,生成签名的随机串
                signature: res.wx.signature,// 必填,签名
                jsApiList: [
                    'chooseImage',
                    'uploadImage'
                ]// 必填,需要使用的JS接口列表
            });
        };
    }catch(e){console.log(e)}
});

使用选择图片api实例:

upLoadImg(qrcodeType){
    wx.ready(()=>{
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                wx.uploadImage({
                    localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1,显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        //拿到微信服务端id后传递给后台
                        this.getImg(serverId);
                    }
                });
            }
        });
    })
}