前端微信分享

2023-10-22 12:27:34

这里只谈HTML界面的微信分享。安卓和IOS均有对应的API包。

HTML界面的分享，是2015元旦期间微信删掉了老的 WeixinJSBridge 方式（原因是微信无法管理它），

推出了需要鉴权、并和公众号绑定的JS JDK。

默认分享

　　特征

　　　　无需引用JDK。微信自动读取网页标题、网页第一张图片、location.href 三元素作为分享内容。

步骤

<head>
    <!--1，设置标题-->
    <title>这是我设的微信默认分享</title>
</head>
<body>
    <!--2, 设置图片-->
    <img src=http://image5.suning.cn/b2c/catentries/000000000124346362_1_400x400.jpg width=‘0‘ height=‘0‘ />
</body>

测试

　　　　测试页面

　　　　可以在PC端打开看到源码

注意点

　　　　微信读不到图片的情况分以下几种

　　　　　　1 图片<= 300PX*300PX,微信可能读不到图

2 图片 style不能设置Display:none

3 图片尽量放到body下第一个元素

自定义分享

　　特征

　　　　　　引入微信JS JDK，通过微信鉴权，注入自定义标题、内容、图片，链接分享

步骤

　　　　1 设置JS安全域名登录公众号--公众号设置--功能设置

2 引入微信JS JDK <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>

3 配置微信鉴权消息

<!--请求后台，生成鉴权消息。后台需要做缓存。2小时内从缓存里读。原因是鉴权信息里的签名两小时后失效，需重新生成。-->
<!--后台如何生成鉴权消息？  以java为例，前端提供URL地址，后台进行sha1加密。然后将鉴权消息返回前端。-->
<!--然后前端配置鉴权消息-->
<!--前端代码-->
<script>
    $.ajax({
        url: ‘XXXX.do‘,
        data:{
            shareUrl:encodeURI(location.href)
        },
        success:function(data){
            wx.config({
                debug: false,
                appId: Const.APP_ID,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: [
                    ‘onMenuShareTimeline‘,
                    ‘onMenuShareAppMessage‘,
                    ‘hideMenuItems‘,
                    ‘showMenuItems‘
                ]
            });
        },
        error:function(data){
            console.error(‘req ‘+ Const.CHECK_WECHAT + " error "+data);
        }
    });
</script>

　　 4 注入分享　　　

var shareConfig = {
                "imgUrl":  config.shareIcon || Const.SHARE_IMG,
                "link": config.url || location.href,
                "desc": config.shareContent || Const.SHARE_DESC,
                "title": config.title || Const.SHARE_TITLE
            };

            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: [
                        ‘onMenuShareTimeline‘,
                        ‘onMenuShareAppMessage‘,
                        ‘hideMenuItems‘,
                        ‘showMenuItems‘
                    ],
                    success: function (res) {
                    }
                });
                wx.onMenuShareAppMessage(shareConfig);
                wx.onMenuShareTimeline(shareConfig);

            });

　　测试

　　　　微信JDK 步骤的详细说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

实际运用

注意点

1 若分享不对，开启微信的debug模式，观察弹出的异常信息，去http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html此页面查找异常原因

debug模式开启

wx.config({
                debug: true //设为true开启debug，上线时设为false
    　　...

前端微信分享

码农公寓

相关文章