微信公众号自定义分享设置

1.封装配置微信公众号的方法

//#region <微信分享>
// 引入获取微信公众号信息的接口
import { getWxInfo } from '@/api/index.js'

// 使用promise动态引入微信sdk
function loadScript (url) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    script.src = url
    script.onload = function () {
      resolve()
    }
    // 引入失败
    script.onerror = function () {
      reject()
    }
    document.body.appendChild(script)
  })
}

// 获取公众号信息并配置
async function setWxDeployHandle () {
  const res = await getWxInfo()
    //res:{
    //   'data': {
    //     'appId': '',
    //     'nonceStr': '',
    //     'signature': '',
    //     'timestamp': ,
    //     'url': '',  // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    //   },
    //   'message': '请求成功',
    //   'status': 200,
    // }
  wxConfig(res.body)
}

// 微信配置方法
function wxConfig (data) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: data.appId, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature,// 必填，签名
    jsApiList: [
      'updateAppMessageShareData',// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）。
      'updateTimelineShareData',// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）。
      'onMenuShareAppMessage',//老版本分享接口。
      'onMenuShareTimeline',//老版本分享接口
    ], // 必填，需要使用的JS接口列表
  })

  wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    const params = {
      title: '标题', // 分享标题
      desc: '描述', // 分享描述
      link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '', // 分享图标
    }
    wx.updateAppMessageShareData({
      ...params,
      success: function () {
        // 设置成功
        console.log('设置成功-updateAppMessageShareData')
      },
    })

    wx.updateTimelineShareData({
      ...params,
      success: function () {
        // 用户点击了分享后执行的回调函数
        console.log('设置成功-updateTimelineShareData')
      },
    })

    wx.onMenuShareAppMessage({
      ...params,
      success: function () {
        // 设置成功
        console.log('设置成功-onMenuShareAppMessage')
      },
    })

    wx.onMenuShareTimeline({
      ...params,
      success: function () {
        // 设置成功
        console.log('设置成功-onMenuShareTimeline')
      },
    })

  })
}
//#endregion

2.使用

// 使用了2个微信官方提供的的cdn地址，做了一次额外的容错处理
const sdkList = ['https://res.wx.qq.com/open/js/jweixin-1.6.0.js', 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js ']

// cdn 引入微信sdk
try {
  loadScript(sdkList[0]).then(() => {
    console.log('微信sdk加载成功-1',wx)
    setWxDeployHandle()
  })
} catch (e) {
  loadScript(sdkList[1]).then(() => {
    console.log('微信sdk加载成功-2')
    setWxDeployHandle()
  })
}