微信公众号开发之如何使用JSSDK

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

public class JSSDKInterceptor   implements Interceptor{
  /**
   * 如果要支持多公众账号，只需要在此返回各个公众号对应的 ApiConfig 对象即可 可以通过在请求 url 中挂参数来动态从数据库中获取
   * ApiConfig 属性值
   */
  public ApiConfig getApiConfig() {
    ApiConfig ac = new ApiConfig();

    // 配置微信 API 相关常量
    ac.setToken(PropKit.get("token"));
    ac.setAppId(PropKit.get("appId"));
    ac.setAppSecret(PropKit.get("appSecret"));

    /**
     * 是否对消息进行加密，对应于微信平台的消息加解密方式： 1：true进行加密且必须配置 encodingAesKey
     * 2：false采用明文模式，同时也支持混合模式
     */
    ac.setEncryptMessage(PropKit.getBoolean("encryptMessage", false));
    ac.setEncodingAesKey(PropKit.get("encodingAesKey",
        "setting it in config file"));
    return ac;
  }
  
  @Override
  public void intercept(Invocation inv) {
    inv.invoke();
    Controller controller = inv.getController();
    ApiConfigKit.setThreadLocalApiConfig(getApiConfig());
    JsTicket jsApiTicket = JsTicketApi.getTicket(JsApiType.jsapi);
    String jsapi_ticket = jsApiTicket.getTicket();
    String nonce_str = create_nonce_str();
    // 注意 URL 一定要动态获取，不能 hardcode.
    String url = "http://" + controller.getRequest().getServerName() // 服务器地址
        // + ":"
        // + getRequest().getServerPort() //端口号
        + controller.getRequest().getContextPath() // 项目名称
        + controller.getRequest().getServletPath();// 请求页面或其他地址
    String qs = controller.getRequest().getQueryString(); // 参数
    if (qs != null) {
      url = url + "?" + (controller.getRequest().getQueryString());
    }
    System.out.println("url>>>>" + url);
    String timestamp = create_timestamp();
    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    //注意这里参数名必须全部小写，且必须有序
    String  str = "jsapi_ticket=" + jsapi_ticket +
        "&noncestr=" + nonce_str +
        "&timestamp=" + timestamp +
        "&url=" + url;

    String signature = HashKit.sha1(str);

    System.out.println("appId " + ApiConfigKit.getApiConfig().getAppId()
        + "  nonceStr " + nonce_str + " timestamp " + timestamp);
    System.out.println("url " + url + " signature " + signature);
    System.out.println("nonceStr " + nonce_str + " timestamp " + timestamp);
    System.out.println(" jsapi_ticket " + jsapi_ticket);
    System.out.println("nonce_str  " + nonce_str);
    
    controller.setAttr("appId", ApiConfigKit.getApiConfig().getAppId());
    controller.setAttr("nonceStr", nonce_str);
    controller.setAttr("timestamp", timestamp);
    controller.setAttr("url", url);
    controller.setAttr("signature", signature);
    controller.setAttr("jsapi_ticket", jsapi_ticket);
  }

  private static String create_timestamp() {
    return Long.toString(System.currentTimeMillis() / 1000);
  }

  private static String create_nonce_str() {
    return UUID.randomUUID().toString();
  }
}

/**
 * 对整个Controller或者其中的方法添加JSSDK签名验证拦截器
 */
@Before(JSSDKInterceptor.class)
public class JSSDKController extends Controller{
  //@Before(JSSDKInterceptor.class)
  public void index(){
    render("share.jsp");
  }
  
  public void customer(){
    render("customer.jsp");
  }
  
  public void pic(){
    render("pic.jsp");
  }
}

<script type="text/javascript">
 wx.config({
    debug: true,
      appId:'${appId}',
      timestamp: '${timestamp}',
      nonceStr: '${nonceStr }',
      signature: '${signature}',
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        ...
      ]
  });

  </script>

wx.ready(function(){
    // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
  document.querySelector('#checkJsApi').onclick = function () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
//下面就可以写一系列的接口了
......
});

wx.error(function (res) {
  alert(res.errMsg);
});