微信h5转发配置链接内容

1648796526(1).png

要求对微信中转发的链接进行diy内容，更方便用户转发分享

达到以下形式

1648796589(1).png

此功能需使用微信JSSDK

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

npm i weixin-js-sdk -D // 安装

创建一个wx-share.js文件
设置initWx方法，传递给调用分享的网站即可得到自定义配置的内容

import Vue from 'vue'  
import { shareWxCourse } from 'api/user' 
// 后端给的接口。直接将需要的内容传回来给我们即可，无序我们先调用再传asset给后端解析再返回。

const wx = require('weixin-js-sdk')
export const initWx = (shareUrl, cid, uid, shareName, cname) => {
  if (typeof window !== 'undefined') {
    // let obj = {}
    Vue.prototype.$showLoading()
    shareWxCourse(shareUrl).then(res => {
      if (res.code === 1) {
        let data = res.data
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
        })
        wx.checkJsApi({ // 检测api是否可用
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function(res) {
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          }
        })
        wx.ready(function() {
          // 需在用户可能点击分享按钮前就先调用
          wx.updateAppMessageShareData({
            title: '好友【' + shareName + '】邀您答题', // 分享标题
            desc: '爱动脑，答一答，《' + cname + '》智能培训，看看您得多少分？', // 分享描述
            link: 'http://yourwebsite?id=' + cid + '&user_id=' + uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '图标', // 分享图标
            success: function () {
              // 设置成功
            }
          })
          wx.updateTimelineShareData({
            title: '好友【' + shareName + '】邀您答题', // 分享标题
            desc: '爱动脑，答一答，《' + cname + '》智能培训，看看您得多少分？', // 分享描述
            link: 'http://yourwebsite?id=' + cid + '&user_id=' + uid, // 分享链接，该链接域名或路径必须与当前页面对应公众号JS安全域名一致
            imgUrl: '图标', // 分享图标
            success: function () {
              // 用户点击了分享后执行的回调函数
            }
          })
        })
        Vue.prototype.$hideLoading()
      }
    })
  }
}