h5自定义微信分享链接

未自定义前

自定义后

1.安装微信jweixin-1.6.0依赖

"jweixin-1.6.0": "^1.0.0",

2.封装一个wxsdk.js方法
前端要请求后端接口获取公众号的信息并填入

//  wetchat.js  －－ 个人封装
import wx from 'jweixin-1.6.0'; // 这是自己优化的sdk方法，可以解决ios签名报错的一些问题
// import wx from 'weixin-js-sdk'; // 这是官方的微信sdk引入方法
import {
  getConfig
} from '@/api/home'; // 后端接口 （根据自己项目）
export function wxChatShare(param) {  
  let _url = param.url // 当前页面的url
  let data = {}
  data.url = _url
  data.isNew = 1
  getConfig(data) // getConfig是获取微信配置相关信息的接口
    .then(res => {
      if (res.code === '0000' && res.data) {
        // alert('成功')
        let list = res.data
        // 接口返回配置信息
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "  ", // 必填，公众号的唯一标识,需在公众号后台配置项目地址
          timestamp: list.timestamp, // 必填，生成签名的时间戳
          nonceStr: list.nonceStr, // 必填，生成签名的随机串
          signature: list.signature, // 必填，签名
          jsApiList: [ // 用的方法都要加进来
            'updateAppMessageShareData',
          ]
        });
        wx.checkJsApi({
          jsApiList: ["updateAppMessageShareData","updateTimelineShareData"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function (res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log('检查', res)
            // alert(res.errMsg)
          }
        })
        wx.ready(function () {
          console.log("paramSDK",param.url);
          //分享给朋友
          wx.updateAppMessageShareData({
            
            title: param.title, // 分享标题
            desc: param.desc, // 分享描述
            link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: param.imgUrl, // 分享图标
            success: function () {
              // 设置成功
              console.log("分享成功返回的信息为:", res);
              //   this.$Message.message("设置成功!");
            }
          })
        });
        wx.error(function (res) {
          console.log('验证失败返回的信息:', res);
        });
      } else {
        console.log('错误',res);
      }
    })
}

3.在wxSDkFun函数中调用封装的上面这个方法,wxSDkFun函数得在分享前调用,如页面加载完就执行下,

 wxSDkFun(data){
      let signLink=''
      //请求微信sdk
      signLink = location.href
      let params = {}
      params.url = signLink //用来给后端接口的参数
      params.title ="唐宋元明"+'短视频分享达人征集令'  //主标题
      params.desc = "测试宣传语言" //副标题
      params.link =location.href,//项目的链接
      params.imgUrl='http://m.qpic.cn/psc?/V10K7lwW1jITpv/45NBuzDIW489QBoVep5mcaGVgwTw6KCN1an5aYY1frFZ18GBkQKu61ECoee2E.wgpvtp*ifkp6OLXYAVzlhm28gToG2Vdlr*5kt8hbiPHs8!/b&bo=yADIAMgAyAABGT4!&rf=viewer_4'   //链接图片地址
      wxChatShare(params) //这个方法就是我开头封装的方法，直接把参数带过就可以了
    },

注:
链接没有自定义效果的话,得将h5地址生成二维码扫码进入后分享
api文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10