特别注意
- 将想要分享出去的地址转成二维码，分享出去的才会是卡片样式。如果在微信内使用url打开地址，分享出去的样式只有url。
- 要分享出去的url，要和后台生成signature签名时使用的url一致。
准备工作
- 需要已验证的服务号。(使用企业信息注册，一年300块)
- 登录公众号后：设置与开发-公众号设置-功能设置-填写JS接口安全域名
- 开发工具：HBuilderX或者VS Code等均可。
- 安装微信jssdk:
npm install jweixin-module --save - 在需要分享的界面引入:
<script>
const jweixin = require('jweixin-module')
</script>
- 后台需要返回给前端生成的数据：见官方链接目录16，附录1-JS-SDK使用权限签名算法
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
- 为了方便，也可将下面的picUrl，appShareUrl，以及分享内容里的title，desc配置在后台，避免前端频繁发版。
正式开始
需要手动修改图片地址，分享出去的url，分享标题，分享描述，一下仅用分享给朋友，分享朋友圈为例，如需其他定制，请参考官网：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
var picUrl = "https://xxx.xxx.xxx/xxx.png";
var appShareUrl = "https://xxx.xxx.xxx/xxx"
jweixin.config({
"debug": false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
"appId": "", // 必填，公众号的唯一标识
"timestamp": "", // 必填，生成签名的时间戳
"nonceStr": "", // 必填，生成签名的随机串
"signature": "",// 必填，签名
"jsApiList": ["updateAppMessageShareData","updateTimelineShareData"] // 必填，需要使用的 JS 接口列表
});
jweixin.ready(function(){
console.log("jWeixin.ready----------");
// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
jweixin.updateAppMessageShareData({//分享给朋友
title: '', // 分享标题
desc: '', // 分享描述
link: appShareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: picUrl, // 分享图标
success: function () {
// uni.showToast({
// title:"分享成功！",
// icon:'none'
// })
// 设置成功
},
});
jweixin.updateTimelineShareData({ //分享朋友圈
title: '', // 分享标题
link: appShareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: picUrl, // 分享图标
success: function () {
// uni.showToast({
// title:"分享成功！",
// icon:'none'
// })
// 设置成功
}
});
});
jweixin.error(function(res){
console.log("jWeixin.error----------:",res);
// config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});
网友评论