微信公众号 jssdk 分享实现过程

[坑]

尝试写个 分享按钮 , 结果只需要注册事件即可 , 微信提供自带的分享按钮, 有没有自定义,目前没研究

基本说按照官方api实现 

 

遇到的问题

1. 总是报签名异常, 官方校验工具 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

2. 签名建议用官方提供的demo, 这里列下java

import java.util.UUID;import java.util.Map;import java.util.HashMap;import java.util.Formatter;import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;import java.io.UnsupportedEncodingException; class Sign { public static void main(String[] args) { String jsapi_ticket = "jsapi_ticket"; // 注意 URL 一定要动态获取,不能 hardcode String url = "http://example.com"; Map<String, String> ret = sign(jsapi_ticket, url); for (Map.Entry entry : ret.entrySet()) { System.out.println(entry.getKey() + ", " + entry.getValue()); } }; public static Map<String, String> sign(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 + "&timestamp=" + timestamp + "&url=" + url; System.out.println(string1); 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); 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); }}

  

微信公众号 jssdk 分享实现过程

3. timestamp 官方定义是10位, 自己当时生产的大于10 ,后改进 (不一定说这个原因)

 

4. js 核心代码

写在ajax回调成功后,ajax负责获取签名/ticket/timestrap等

//服务器返回响应,根据响应结果,分析是否登录成功; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId:"<%=appId%>", timestamp:data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [‘checkJsApi‘,‘updateAppMessageShareData‘,‘updateTimelineShareData‘]// 必填,需要使用的JS接口列表 }); wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 wx.updateAppMessageShareData({ title: ‘我正在使用和我一起学习!‘, // 分享标题 desc: ‘‘, link: ‘http://wcode.jsp?p=r‘, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: ‘n150x150.png‘, // 分享图标 success: function () { // 设置成功 //alert("设置成功"); } }); wx.updateTimelineShareData({ title: ‘我正在使用快来和我一起学习!‘, // 分享标题 link: ‘http://p=r‘, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: ‘http://0x150.png‘, // 分享图标 success: function () { // 设置成功 //alert("设置成功"); } }); });

  

 

相关文章