当前位置：首页 > news >正文

微信网页开发——JS-SDK接入以及微信二次分享图标和标题丢失

news 来源：原创 2024/5/17 16:49:46

JSSDK使用步骤

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

JS接口安全域名官方说法是：开发者可在该域名下调用微信开放的JS接口

[划重点]这里有注意⚠️的地方：

1、域名格式：如果项目域名是https://xxx.xxx.cn，那么安全域名就是xxx.xxx.cn，谨记！
2、分享链接必须在安全域名下

如果这两步没有做好，就会报invalid url domain的错。

步骤二：引入 JS 文件

在需要调用 JS 接口的页面引入如下 JS 文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过 config 接口注入权限验证配置

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用

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

其中appId, timestamp, nonceStr, signature需从后台获取。

[划重点]这里有注意⚠️的地方：

获取appId, timestamp, nonceStr, signature这些参数时，需要分享路径作为参数，这个路径要和分享之后访问的路径一样，所以需要去掉微信增加的额外参数，即：

const url = window.location.href.split('#')[0]

获取签名如果没处理好，就会报invalid signature的错误。

分享接口

请注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
            // 设置成功
        }
    })
});

自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
    wx.updateTimelineShareData({ 
        title: '', // 分享标题
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
            // 设置成功
        }
    })
});

完整参考代码

const { title, desc, thumb } = this.state.playDetailInfo   // 代码的其他部分获取的参数
const url = window.location.href.split('#')[0]
console.log('url :>> ', url, title, desc)
const link = window.location.href
const imgUrl = thumb || Global.logoUrl

commonActions.getWxShare({ url }).then(res => {
    console.log('weixin分享res :>> ', res)
    if (res.code === 200 && res.data) {
        const { appId, timestamp, nonceStr, signature } = res.data
        window.wx.config({
            debug: false,  // 是否开启debug模式，如果开启，每次回调有内容会alert出信息
            appId, // 后端返回的公众平台appid
            timestamp, // 后端返回的时间戳
            nonceStr, // 后端返回的随机字符串
            signature, // 后端返回的签名
            jsApiList: [    // 需要调用的jsApi
                'updateTimelineShareData',//分享到朋友圈
                'updateAppMessageShareData',//分享给微信好友
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ]
        })
        window.wx.ready(() => {   //需在用户可能点击分享按钮前就先调用
            // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，
            // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。
            // 对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
            // 分享给朋友
            window.wx.updateAppMessageShareData({
                title, // 分享标题
                desc, // 分享描述
                link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl, // 分享图标
                success: function () {
                    // 设置成功
                }
            })
            // 分享到朋友圈
            window.wx.updateTimelineShareData({
                title, // 分享标题
                link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl, // 分享图标
                success: function () {
                    // 设置成功
                }
            })
        })
        window.wx.error(res => {
            // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
            console.log('window.wx.error :>> ', res)
        })
    }
}).catch(err => {
    console.log('weixin分享error :>> ', err)
})