微信开发(六)微信分享接入
2015-03-27 19:25
239 查看
div#cpmenu {height:200px;float:left;}
div#cpcontent {height:200px;width:150px;float:left;}
文章作者:松阳 本文出自 阿修罗道,禁止用于商业用途,转载请注明出处。 原文链接:/article/1368169.html
大体流程是这样的:
绑定域名
引入JS文件
通过config接口注入权限验证配置
通过ready接口处理成功验证
通过error接口处理失败验证
编写对应回调
如果你自信满满的完成了上面这些步骤,就可以开始着手测试了。 当点击对应功能时,微信会回调对应的接口。我的需求是当用户分享到自己的朋友圈时,做一些猥琐的操作
,因此下面以分享朋友圈为例,当然其他功能也很类似,此处按下不表。
此处要注意了,微信服务号还没验证的程序狗,赶紧催促贵公司的商务人员,申请微信服务号验证,目前没有认证的服务号是没法使用大多数JS接口的
备注:支持使用 AMD/CMD 标准模块加载方法加载
这个没啥说的,就是注意要把引入放到其他步骤的上面,JS脚本按顺序加载,大家都懂的。
然后服务器收到这请求就加密去。要加密要一个jsapi_ticket,而要jsapi_ticket又需要token.
由于原理一样,这里仅以jsapi_ticket为例:
如果没有回调,签名又没有问题,去开发者中心检查一下接口是否开通了吧。
如果你觉得这篇文章对你有帮助,可以顺手点个顶,不但不会喜当爹,还能让更多人能看到它...
div#cpcontent {height:200px;width:150px;float:left;}
文章作者:松阳 本文出自 阿修罗道,禁止用于商业用途,转载请注明出处。 原文链接:/article/1368169.html
微信分享
微信上做推广活动一般都是着眼于微信分享,这篇文章介绍如何在页面中加入微信分享的处理。本文使用语言为Java+js。原理
微信分享功能的难点,在于用户是否真正的分享了推广页面,所以我们要知道用户分享成功的操作。经过查询文档,微信提供了对应的JS接口。对应文档在这里 .大体流程是这样的:
绑定域名
引入JS文件
通过config接口注入权限验证配置
通过ready接口处理成功验证
通过error接口处理失败验证
编写对应回调
如果你自信满满的完成了上面这些步骤,就可以开始着手测试了。 当点击对应功能时,微信会回调对应的接口。我的需求是当用户分享到自己的朋友圈时,做一些猥琐的操作
,因此下面以分享朋友圈为例,当然其他功能也很类似,此处按下不表。
实现
上面概括了原理了原理,接下来一步一步看。本文可以结合 官方文档 一起看,毕竟它更新维护的比较勤。绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注:登录后可在“开发者中心”查看对应的接口权限。此处要注意了,微信服务号还没验证的程序狗,赶紧催促贵公司的商务人员,申请微信服务号验证,目前没有认证的服务号是没法使用大多数JS接口的
引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
这个没啥说的,就是注意要把引入放到其他步骤的上面,JS脚本按顺序加载,大家都懂的。
通过config接口注入权限验证配置
这个最麻烦了,首先说脚本的格式:wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });这部分信息的获取,推荐使用ajax请求一下自己的服务器,毕竟加密这东西没法在客户端搞。所以大体流程是用户打开网页,运行ajax脚本请求服务器一堆信息,成功发下来后,在写到js里面。下面上代码:
var url = location.href.split('#').toString(); $.ajax({ type : "POST", url : "yourInterfaceURL", dataType : "html", async : false, data:"url="+url, success : function(dataStr) { var data = $.parseJSON(dataStr); wx.config({ debug: true, appId: data.appid, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline' ] }); }, error: function(xhr, status, error) { alert(status); alert(xhr.responseText); }, });这里有一点要注意,我们需要将请求页面的URL传上去,因为微信会在页面后面加入一些后缀比如
&isInstall=0之类的。所以它要求你动态算一个URL地址,而不能硬编码。
然后服务器收到这请求就加密去。要加密要一个jsapi_ticket,而要jsapi_ticket又需要token.
由于原理一样,这里仅以jsapi_ticket为例:
public String jsapi_ticket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; public String getJsapiTicket() { long now = System.currentTimeMillis(); if(now - curJSTokenTime > expiresJSToken*1000) { String requestUrl = jsapi_ticket.replace("ACCESS_TOKEN", getToken()); JSONObject jsonObject = httpsRequest(requestUrl, "GET", null); System.out.println("Getting weixin js_token...URL:"+requestUrl); if (null != jsonObject) { try { curJSToken = jsonObject.getString("ticket"); expiresJSToken = jsonObject.getInt("expires_in"); curJSTokenTime = System.currentTimeMillis(); System.out.println("update weixin token:"+curJSToken+"expires_in is:"+expiresJSToken+" curTime:"+curJSTokenTime); } catch (JSONException e) { System.out.println("Get JS_Token Error! errcode:{} errmsg:{}"+jsonObject.getInt("errcode")+jsonObject.getString("errmsg")+e); } } else { System.out.println("http for weixin return null"); curJSToken=""; } } return curJSToken; }拿到了这个东西就可以算加密串了。当然用这个函数需要先去取Access_Token,这就又要用到appid和appSercet,你必然知道在哪找到这货,啥?不知道?去微信的开发者中心的配置项那边碰碰运气吧。
public Map<String, String> makeWXTicket(String jsapi_ticket, String url) { Map<String, String> ret = new HashMap<String, String>(); String nonce_str = create_nonce_str(); String timestamp = create_timestamp(); String string1; String signature = ""; //注意这里参数名必须全部小写,且必须有序 string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "×tamp=" + timestamp + "&url=" + url; try { MessageDigest crypt = MessageDigest.getInstance("SHA-1"); crypt.reset(); crypt.update(string1.getBytes("UTF-8")); signature = byteToHex(crypt.digest()); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } ret.put("url", url); ret.put("jsapi_ticket", jsapi_ticket); ret.put("nonceStr", nonce_str); ret.put("timestamp", timestamp); ret.put("signature", signature); ret.put("appid", appId); return ret; } private static String byteToHex(final byte[] hash) { Formatter formatter = new Formatter(); for (byte b : hash) { formatter.format("%02x", b); } String result = formatter.toString(); formatter.close(); return result; } private static String create_nonce_str() { return UUID.randomUUID().toString(); } private static String create_timestamp() { return Long.toString(System.currentTimeMillis() / 1000); }
makeWXTicket这个函数有俩参数,第一个是上面的jsapi_ticket,第二个是页面传上来的url,返回值是一个Map。后面就看各路大神八仙过海了,大死不灵啥的,总之你肯定有办法把这货传回去的。传回去后,就到
wx.config中把内容填充进去了。
ready & error & 功能调用
最恶心的部分搞过去,其他就一马平川了。wx.ready(function () { wx.onMenuShareTimeline({ title: '互联网之子?', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg', trigger: function (res) { // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回. alert('click shared'); }, success: function (res) { alert('shared success'); //some thing you should do }, cancel: function (res) { alert('shared cancle'); }, fail: function (res) { alert(JSON.stringify(res)); } }); wx.error(function (res) { alert(res.errMsg); }); });在网页中添加以上内容,用户点击对应的操作就会弹出提示对话框啦
如果没有回调,签名又没有问题,去开发者中心检查一下接口是否开通了吧。
总结
接入过程很纠结,测试比较麻烦,微信服务器的回调只认有备案的域名。验签可以使用这个网址 做测试。总之,祝你好运~如果你觉得这篇文章对你有帮助,可以顺手点个顶,不但不会喜当爹,还能让更多人能看到它...
相关文章推荐
- 微信开发(六)微信分享接入
- Unity开发之接入Sharesdk微信分享Android
- Unity开发之接入Sharesdk微信分享Android(一)
- 微信公众号开发(一)微信分享接入
- 【Android开发日记】微信API 分享到朋友圈
- iOS开发 - 微信之简单文本分享(集成官方SDK)
- 微信开发-如何自定义页面分享元素
- 微信小程序开发实践点滴——接入Bmob后端云
- 微信JS-SDK分享功能开发实例
- Android 记录一次开发微信分享功能的吐槽与思考
- 微信公共平台开发分享
- cocos2d手游之微信分享SDK接入指南
- Android 第三方应用接入微信平台研究情况分享(一)
- 不接入微信sdk,在APP中实现微信分享,支付
- Java微信分享接口开发
- 微信jssdk分享开发经验
- 如何在不接入微信API的情况下自定义分享内容(图片、链接、标题)
- 微信小程序开发分享
- 微信接入自定义开发
- 微信公共号开发教程java版——启用开发者模式,接入微信公众平台开发(二)