微信分享实现

huqingbin0

2015-04-16

关注关注

本文简单的介绍在微信里打开某个网站，希望在点击“分享到朋友圈”或“发送给朋友“时，自定义分享的内容，即使用 JS-SDK 实现分享功能。

1. 前提

要想分享成功，需要申请一个公共号，获取特定的app_id 和 app_secret 。

2. 获取access_token

使用分配的 app_id 和 app_secret 去获取一个有效的 access_token ，路径为：

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=<app_id>&secret=<app_secret>

得到的返回值的格式为：

{"access_token":"<access_token>","expires_in":7200}

3. 获取jsapi的ticket

有了access_token以后，就可以使用该token去请求jsapi的ticket，路径为：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=<access_token>&type=jsapi

得到的返回值的格式为：

{"errcode":0,"errmsg":"ok","ticket":"<ticket>","expires_in":7200}

4. 生成签名

有了以上内容后，就可以生成签名了，生成签名的需要的参数有：

jsapi_ticket ：步骤 3 中获取的ticket
noncestr ：一个混淆字符串，值可以任意，在后续中还会被用到，所以需要记住
timestamp ：一个时间戳，就是从1970年1月1号零晨到当前的秒数，用 java 表示就是： System.currentTimeMillis()/1000
url ：微信当前打开页面的完整的url

把以上四个键值对，按键名的字母序，拼接起来，做一个sha1的加密，拼接的顺序为：

jsapi_ticket=<ticket>&noncestr=<any_str>&timestamp=<timestamp>&url=<current_page_url>

拼接完后做sha1加密就得到了签名，例如以下请求串：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VH5zlC1TiV7zG5Rb8FkGY3GQrZ2aRpFoQX1CLQ7BaBVpS3sHlUyuJC5UnzQFf1oGpg&noncestr=test&timestamp=1429182394&url=http://m.ufenqi.com/items/2713/detail

加密后的值为： 85cf483b82edd0c9ada97635cf174446552201e9

注：一个在线的sha1加密网站是： http://www.3464.com/tools/sha1/index.asp

注：java里可以使用 commons-codec 包里的 DigestUtils.sha1Hex() 方法得到加密值。

5. 实现分享代码

有了以上信息，就可以开始实现分享代码了：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script> <!--引用微信js-->
<script>
	// 微信配置
	wx.config({
	    appId: "<app_id>", 
	    timestamp: '<上面步骤中签名用的时间戳>', 
	    nonceStr: '<上面签名中用的混淆字符串>', 
	    signature: '<计算得到的sha1加密串>',
	    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我们要使用JS-SDK的什么功能
	});
	// 配置信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后
	//config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
	//对于用户触发时才调用的接口，则可以直接调用，不需要放在ready 函数中。
	wx.ready(function () {
		//检查相应的接口api是否要用
	 	wx.checkJsApi({
	          jsApiList: [
	              'onMenuShareTimeline',
	              'onMenuShareAppMessage'
	          ]
	    });
	  	// 监听“分享给朋友”按钮，自定义分享内容及分享结果接口
	    wx.onMenuShareAppMessage({
	        title:'<分享标题>',
	    	link:'<要分享的链接>',
	        imgUrl:'<分享时显示的图片>',
	        desc:'<分享描述>',
	        type:'link', //指定分享类型
	    });
	  	// 监听“分享到朋友圈”按钮，自定义分享内容及分享结果接口
	    wx.onMenuShareTimeline({
	      	title:'<分享标题>',
	    	link:'<要分享的链接>',
	        imgUrl:'<分享时显示的图片>',
	        success:function(){		//可以定义一些分享执行后的通知事件
	        	alert("success");
	        }
	    });
	    //验证配置出错时的结果通知
	    wx.error(function (res) {
	        alert('wx.error: '+JSON.stringify(res));
	    });
	});
</script>

欢迎尝试

注：每次token的有效期是2个小时，所以需要定期的更新token；另外由于涉及到一些敏感和关键的信息，所以生成签名的逻辑一定要放在后台实现，然后给前端返把值推送回来。

微信分享