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

Posted 2021-03-06 lonsn

[坑]

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

基本说按照官方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);
    }
}

　　

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("设置成功");
								    }
								});
						});