前端微信分享

这里只谈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
  ...

 

前端微信分享

上一篇:Android getDecorView用途——屏幕截图


下一篇:微信6.0android客户端用到的资源文件 包括声音 图片