微信内置浏览器 H5分享功能（前端）

最近做了一个签收的功能需要 分享H5

制作前

 

 制作后

微信开发文档提供   概述 | 微信开放文档

 wx.config({
            debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
            appId: res.data.appid, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: [
              "updateAppMessageShareData",
              "onMenuShareAppMessage",
              "updateTimelineShareData",
              "onMenuShareTimeline",
            ], // 必填，需要使用的 JS 接口列表
          });

          wx.ready(function () {
            wx.updateAppMessageShareData({
              title: shName, // 分享标题
              desc: shContent, // 分享描述
              link: 'https://xxxxxxx.cn/#/?id=' + shid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致   location.href.split("#")[0]
              imgUrl: "https://xxxxxxx.cn/FrW1XgpCmJsIHFts3J3W5LGDT2Yk", // 分享图标
              // success: function () {
              // },
              // cancel: function () {
              //   // 用户取消分享后执行的回调函数
              // },
            });
          });

(上述文件写在onLoad()内即可 或者写在请求接口的方法内)

wx.config()内公众号的唯一标识，生成签名的时间戳，生成签名的随机串，签名 由后端提供即可。（主要踩坑：不建议前端写死或者生成，会形成不必要的bug）

1.这个里面可以通过debug来检测代码是否存在问题

wx.ready()内为分享给好友（主要踩坑：1.分享标题,分享描述,2.link内需要传参）

1.分享标题,分享描述

(1).内容需要写成动态

sharo(shName,shContent,shid){
// 包装成方法 通过传参的方式
}

(2)link内需要传参

 link: 'https://xxxxx.cn/#/?id=' + shid, 
//这个问题  搜索大量的文章 和遇到同样的问题 反应可能是hash和history的问题
// 我这边遇到的问题是因为被文档误导 写成以下
 link: 'https://xxxxx.cn' 与域名一样

反正同为hash模式 写成link: 'https://xxxxx.cn/#/?id=' + shid, 格式即可

全部代码

 onLoad(optent) {
    this.sharo();
  },
methods: {
 sharo(shName,shContent,shid) {
      axios({
        method: "GET",
        url: `https://xxxx/api/H5`,
        params: {
          url: location.href.split("#")[0],
        },
      })
        .then((res) => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
            appId: res.data.appid, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: [
              "updateAppMessageShareData",
              "onMenuShareAppMessage",
              "updateTimelineShareData",
              "onMenuShareTimeline",
            ], // 必填，需要使用的 JS 接口列表
          });

          wx.ready(function () {
            wx.updateAppMessageShareData({
              title: shName, // 分享标题
              desc: shContent, // 分享描述
              link: 'https://xxxx/#/?id=' + shid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致   location.href.split("#")[0]
              imgUrl: "https://xxxx/icon", // 分享图标
              // success: function () {
              // },
              // cancel: function () {
              //   // 用户取消分享后执行的回调函数
              // },
            });
          });

          //分享给朋友
        })
        .catch((req) => {
          alert("失败");
        });
    },
}

注：遇到签名错误 找后端即可。