模块化复用封装微信sdk

1. 微信登录授权
 

//  微信授权地址:local.js
let wx_login_url = async () => {
    let { data } = await wxApi.getAppId();
    let url = encodeURIComponent(window.location.href);
    return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`;
};
export default {
    wx_login_url,
}


wxLogin.js:

import Local  from '@/config/address/local';
const { wx_login_url } = Local;

const wxLogin = async () => {
    let url = await wx_login_url();
    window.location.href = url;
}

export default wxLogin;

2. 分享及其余功能初始化封装

wx.js:

import wx from 'weixin-js-sdk';
import wxApi from '@/models/wx/wx';

export default {
    /* 初始化wxjsdk各种接口 */
    init(apiList = [], openTagList = []) {
        // let isiOS = window.__wxjs_is_wkwebview, url;
        // if(isiOS) {
        //     url = decodeURI(sessionStorage.getItem('url'));
        // } else {
        //     url = decodeURI(window.location.href.split('#')[0])
        // }
        let url = decodeURI(window.location.href);
        return new Promise((resolve, reject) => {
            wxApi.getWxConfig({ url }).then(res=>{
                if (res.status === 0 && res.data.appId) {
                    wx.config({
                        // debug: true,
                        appId: res.data.appId,
                        timestamp: res.data.timestamp,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        jsApiList: apiList,
                        openTagList: openTagList,
                    });
                    wx.ready( () => resolve(wx) );
                    wx.error( err => reject(err.errMsg) );
                } else {
                    reject(res)
                }
            });
        })
    }
}

wxShare.js:

import wxUtils from './wx';

const updateAppMessageShareData = (wx, dat) => {
    //  好友
    wx.updateAppMessageShareData({
        title: dat.title,    // 分享标题
        desc: dat.desc,      // 分享描述
        link: dat.link,      // 分享链接
        imgUrl: dat.imgUrl,  // 分享图片
    });
};
const updateTimelineShareData = (wx, dat) => {
    //  朋友圈
    wx.updateTimelineShareData({
        title: dat.desc,
        link: dat.link,
        imgUrl: dat.imgUrl,
    });
};
const onMenuShareAppMessage = (wx, dat) => {
    //  好友  即将废弃
    wx.onMenuShareAppMessage({
        title: dat.title, // 分享标题
        desc: dat.desc, // 分享描述
        link: dat.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: dat.imgUrl, // 分享图标
        type: 'link',
    });
};
const onMenuShareTimeline = (wx, dat) => {
    //  朋友圈  即将废弃
    wx.onMenuShareAppMessage({
        title: dat.desc, // 分享标题
        link: dat.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: dat.imgUrl, // 分享图标
    });
};

const Share = async (dat = {}) => {
    await wxUtils.init(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'],[]).then( wx => {
        updateAppMessageShareData(wx, dat);
        updateTimelineShareData(wx, dat);
        onMenuShareAppMessage(wx, dat);
        onMenuShareTimeline(wx, dat);
    });
}

export default Share;

其余属性直接调用init初始化后可用如：

wxUtils：wx.js引入使用
await wxUtils.init(['chooseImage']).then(wx=>{
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            wx.getLocalImgData({
              localId: res.localIds[0], // 图片的localID
              success: async function (response) {
                let localData = response.localData; // localData是图片的base64数据，可以用img标签显示
                if (localData.indexOf('data:image') !== 0) {
                  localData = 'data:image/jpeg;base64,' + localData;
                }
                let files = base64ToFile(localData,`userUpload${new Date().valueOf()}.png`);
                let postData= new FormData();
                postData.append('files',files);
                //  调用相关图片接口上传
              }
            });
          },
          fail(res) {
            alert(res)
          }
        });
      });




base64ToFile(base64, fileName){
      let arr = base64.split(','), type = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], fileName, {type});
    }

3. 如需跳转微信小程序

main.js: 中加入  ：

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

 

 

 

本文地址：https://blog.csdn.net/c_Breath/article/details/113995425