移动端微信JSSKD相关封装

封装JSSDK

import wx from 'weixin-js-sdk'
import { wechatAuthSign } from '@/api/wxApi.js'
import { isWeixin } from '@/utils/function/platform.js'

// 配置微信jsApiList
export const setWeixinJsApiList = async (params = {}) => {
  // 获取微信JSAPI签名
  const { code, data } = await wechatAuthSign({
     currentUrl: location.href.split('#')[0]
  })

  console.log(params)
  if (code == 200) {
    // 注册微信SDK
    wx.config({
      debug: false,
      appId: data.appId,
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      signature: data.signature,
      jsApiList: Object.keys(params),
      // jsApiList: ['onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'],
    })


    wx.ready(() => {
      for (const key in params) {
        wx[key](params[key])
      }

      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      // wx.updateAppMessageShareData({ 
      //   title: '分享标题1', // 分享标题
      //   desc: '分享描述1', // 分享描述
      //   link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl: '', // 分享图标
      //   success: function () {
      //     // 设置成功
      //     console.log('设置成功')
      //   },
      //   cancel: function () {
      //     console.log('取消分享')
      //   }
      // })

      // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
      // wx.updateTimelineShareData({ 
      //   title: '分享标题2', // 分享标题
      //   link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl: '', // 分享图标
      //   success: function () {
      //     // 设置成功
      //     console.log('设置成功')
      //   },
      //   cancel: function () {
      //     console.log('取消分享')
      //   }
      // })

      // wx.onMenuShareAppMessage({
      //   title: '分享标题分享标题', // 分享标题
      //   desc: '分享描述分享描述', // 分享描述
      //   link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
      //   imgUrl: '', // 分享图标
      //   success: function () {
      //     console.log('设置成功')
      //     // 设置成功
      //   },
      //   cancel: function () {
      //     console.log('取消分享')
      //   }
      // })
    })

    wx.error(function (res) {
      console.log(res, '微信sdk配置处理失败')
    })

  }
}

调用方法

import { setWeixinJsApiList } from "@/utils/function/jweixin";

// 组合微信卡片信息
shareCardData() {
    // 访问路径
    url: `xxxxx`,
    // 分享标题
    title: "你的好友“拍了拍”你",
    // 摘要描述
    summary: "xxxxxx",
    // 缩略图
    thumImage: '',
}


// 调用分享
onClickShareEvents() {
    const {
        title,
        summary,
        thumImage
    } = this.shareCardData;

    if (this.isWeixin) {
        const location = window.location.href;
        const shareData = {
            title: title,
            link: location,
            imgUrl: thumImage,
            success: () => {
                console.log("朋友圈分享成功");
            },
            cancel: () => {
                console.log("朋友圈取消分享");
            }
        };
    }

    // 配置微信jsApiList
    setWeixinJsApiList({
        // 朋友圈
        updateTimelineShareData: shareData,

        // 朋友
        updateAppMessageShareData: Object.assign(shareData, {
            desc: summary
        })
    });
}