H5在微信浏览器中分享好友和朋友圈

H5在微信浏览器中分享好友和朋友圈

[网页授权流程分为四步：

1. 在公众号平台配置安全域名

2. 安装引入weixin-js-sdk包

3. 初始化配置

4. 分享操作

5. 注意事项

1.在公众号平台配置安全域名

• 在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的「设置与开发」-「功能设置」-「网页授权域名」的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；

2.安装引入weixin-js-sdk 包

npm i weixin-js-sdk

import jweixin from 'weixin-js-sdk'

3.初始化配置

通过请求后端接口，传递当前要使用分享功能的页面url， 后端返回签名，再设置配置

onLoad((e) => {
    initWeixinShareConfig()
})
const  initWeixinShareConfig = (options = {})=> {
    let _this = this;
    //动态获取当前的页面链接并且确保链接后面不能有#号
    let linkUrl = window.location.href.split("#")[0];
    //获取请求服务端获取签名信息
    request.request({
        url: '/xxx/xx',   后端接口
        method: 'POST',
        data:{
            url: linkUrl
        },
        success: (res) => {
            if (res.data.code==0) {
              //配置
              jweixin.config({
                debug: false, //根据服务端来控制是否开启调试模式
                appId: res.data.data.appId,
                timestamp: res.data.data.timestamp,
                nonceStr: res.data.data.nonceStr,
                signature: res.data.data.signature,
                jsApiList: ['updateAppMessageShareData','updateTimelineShareData'],
              });
            }
        }
    });
}

//定义设置分享数据方法
const setShareInfo = (options)=>{
    //分享的触发动作必须写再ready里面
    jweixin.ready(() => {
      //配置分享数据
      let shareData = {
        title: options.title || "",  //分享的标题
        desc: options.desc || "",  //分享的描述
        link: options.link,   //分享的链接
        imgUrl: options.imgUrl || "", //分享的图片链接
        success(response) {
          //配置成功之后的回调（并不是分享成功之后的回调，这个地方是个坑，要注意下）
        },
      };
      //分享给朋友接口
      jweixin.updateAppMessageShareData(shareData);
      //分享到朋友圈接口
      jweixin.updateTimelineShareData(shareData);
    });
    cusShare?.value?.open('top')
}

//调用设置分享数据方法
const options = {
    title: "test" || "",  //分享的标题
    desc: "我发布了视频，快来看看吧",  //分享的描述
    link:"https://www.baidu.com" || "",
    imgUrl: "xxx" || "", //分享的图片链接
}
setShareInfo(options)

4.分享操作

进行过上边的操作，我们就可以点击右上角三个点进行朋友或朋友圈分享

5.注意事项

微信 JS 接口签名校验工具

• 微信通过这种"www.baidu.com" 的url链接进入的，再分享，会只分享出一个url长链接，而不是卡片形式。解决办法：将其url链接发送给任意公众号，点击链接进入，再进行分享，即可正常卡片形式