h5页面自定义微信分享的内容updateAppMessageShareData和updateTimelineShareData

h5页面自定义微信分享的内容updateAppMessageShareData和updateTimelineShareData

效果图：（默认分享出来的样式是第一个，自定义完分享内容是第二个）

贴个微信官方JS-SDK文档链接：点我直接跳转

步骤一：绑定域名
1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2.将微信公众平台的txt文件给运维，让其添加到服务器所在的根目录下。
（备注：填写的域名须通过ICP备案的验证。）

步骤二：引入JS文件
在项目的html文件中引入JS文件，（支持https 和 http）：

<script src='.6.0.js'></script>

步骤三：通过config接口注入权限验证配置
调用后端接口请求必传的三个参数（timestamp | nonceStr | signature）
请求接口的参数 encodeURIComponent(location.href.split(’#’)[0])

步骤四：通过ready接口处理成功验证

项目实例代码：

//引入封装好的接口，获取timestamp | nonceStr | signature三个参数
import { getWxParams } from "@/provider/http/api.js";
export default {data() {return {appId: 'wxa05747abe666b', //微信公众号唯一标识，在微信公众号后台获取title: 门急诊医疗险',  //分享内容的标题desc: '报销在线购药和门急诊费，最高2万元，最快1日内赔付', // 分享内容的简短描述link: location.href.split("?")[0],imgUrl: `${igin}/tkpage/static/wxshare.jpg` //必须是绝对路径};},created() {// 初始化调接口KeyParams();},methods: {// 调接口，拿到timestamp nonceStr signature 三个参数async getKeyParams() {let keyParams = {requestId: new Date().getTime(),requestTime: new Date().getTime(),requestData: {url: encodeURIComponent(location.href.split('#')[0])}}let result = await getWxParams({data: keyParams,method: 'post'});let t = result.timestamplet n = strlet s = result.signature
//拿到三个参数之后，调用wxConfig方法进行权限验证this.wxConfig(t, n, s)console.log('@@@@@', t, n, s);},wxConfig(t, n, s) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: this.appId, // 必填，公众号的唯一标识timestamp: t, // 必填，生成签名的时间戳nonceStr: n, // 必填，生成签名的随机串signature: s,// 必填，签名jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表});//然后 调用wxShare方法this.wxShare();},wxShare() {//通过ready接口处理成功验证 ,通过error接口处理失败验证wx.ready(() => {wx.updateAppMessageShareData({ //需在用户可能点击分享按钮前就先调用title: this.title, // 分享标题desc: this.desc, // 分享描述link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: this.imgUrl, // 分享图标success: function () {// 设置成功console.log("分享好友设置成功");}})//分享朋友圈wx.updateTimelineShareData({  //需在用户可能点击分享按钮前就先调用title: this.title, // 分享标题link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: this.imgUrl, // 分享图标success: function () {console.log('分享朋友圈设置成功');// 设置成功}})})wx.error(function (res) {console.log('生成微信签名失败了');// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。})}}
};

备注：所有在wx.ready使用的微信api接口，都必须在wx.config的jsApiList数组中进行注册

在项目的入口页面导入封装好的微信分享方法：

import _wx from "@/provider/common/util/wxShare.js";  //写自己的路径//实例中通过mixins导入mixins: [_wx],

踩过的坑：
图片地址不能是相对路径。所以我把图片资源放在public文件夹下面了。
wx.config没有成功success回调函数