前端如何实现微信浏览器内分享

特别注意

• 将想要分享出去的地址转成二维码，分享出去的才会是卡片样式。如果在微信内使用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 可以在这里更新签名。
});

分享个好用的url转二维码：

http://www.wetools.com/qrcode