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