需求描述

有个移动端h5项目，需要做微信内卡片分享。普通页面分享的卡片标题和描述为项目名，图片为项目logo。内部产品详情页面分享的描述为产品主题，图片为产品banner的第一张图片。

前期准备

2、与后端沟通，需要后端对接js-sdk输出一个接口，返回一些参数。后端参考 JS-SDK使用权限签名算法

开发

2、引入js

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

3、编写share.js 代码如下

// 接口方法引入
import { wechatShare } from "@/api/other.js";

// 暴露分享方法
export function setWechatShare(desc, icon) {

// 分享信息
let shareInfo = {
title: "标题",
desc: desc ? desc : "详情",
icon: icon ? icon : "https://www.baidu.com/img/PC_gaokao20240605_69257873b54a0da9d40aa7afdd9ec88d.gif",
};

// 调用接口
wechatShare({ url: location.href }).then(({ content }) => {

    // 通过config接口注入权限验证配置
    wx.config({

        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

        appId: content.appId, // 必填，公众号的唯一标识

        timestamp: content.timestamp, // 必填，生成签名的时间戳

        nonceStr: content.nonceStr, // 必填，生成签名的随机串

        signature: content.signature, // 必填，签名

        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表
    });

    // 通过error接口处理失败验证
    wx.error(function (errres) {
        console.info("失败：", errres);
    });

    // 通过ready接口处理成功验证
    wx.ready(() => {
        console.info("ready");
        
        //分享朋友
        wx.updateAppMessageShareData({
            title: infoMap.title, // 分享标题
            desc: infoMap.desc, // 分享描述
            link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: infoMap.icon, // 分享图标
            success: function () {
                console.info("成功");
            },
            fail: function (erres) {
                console.info("失败：", erres);
            },
        });

        //分享到 朋友圈
        wx.updateTimelineShareData({
            title: infoMap.title, // 分享标题
            link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: infoMap.icon, // 分享图标
            success: function () {
                console.info("成功");
            },
            fail: function (erres) {
                console.info("失败：", erres);
            },
        });
     });
  });
}

4、引用 share.js

项目其他页面默认分享 main.js

    import { getShareInfo } from "@/utils/share.js";
    getShareInfo()

产品详情页分享 productDetail.js

import { getShareInfo } from "@/utils/share.js";
...
methods: {
    // 加载产品详情时给方法参数赋值
    getProductDetail(){
        ....
        getShareInfo(this.productObj.theme, this.productObj.imgList[0].url);
        ...
    }
},
...
// 页面销毁时，回到默认
destroyed(){
    getShareInfo();
}