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

微信开发交流群：148540125
欢迎留言、转发、打赏

系列文章参考地址 极速开发微信公众号
项目源码参考地址 点我点我--欢迎Start

查看公众号是否有使用JSSDK的权限

服务号、订阅号可以通过登录微信公众平台查看开发>接口权限

使用JSSDK主要包括
1、判断当前客户端版本是否支持指定JS接口、
2、分享接口（微信认证）
3、图像接口
4、音频接口
5、智能接口（识别语音并返回结果）
6、设备信息（获取网络状态）
7、地理位置
8、界面操作
9、微信扫一扫
10、微信小店（服务号必须通过微信认证）
11、微信卡券 （微信认证）
12、微信支付（服务号必须通过微信认证）

使用JSSDK步骤

官方参考文档

步骤一：绑定域名

先登录微信公众平台进入公众号设置的功能设置里填写JS接口安全域名。

步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用摇一摇周边功能，请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

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

签名算法生成规则

请 官方参考文档

下面具体来讲讲 开源项目weixin_guide中的封装。

使用的时候只要在Controller方法上添加一个拦截器 JSSDKInterceptor 来实现签名验证再将wx.config需要的参数设置对应的属性在页面上进行获取。

拦截器实现如下：

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中使用

/**
 * 对整个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");
  }
}

JSP页面上面使用

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

  </script>

测试结果

在AppConfig 中添加路由me.add("/jssdk", JSSDKController.class,"/view");手机中访问 http://域名[/项目名称]/jssdk ,如果设置了 debug= true 成功了就会弹出

如果出现 {"errorMsg":"config:invalid url domian"} 请检查步骤一：绑定域名 与你访问的域名是否在安全域名列表当中

步骤四：通过ready接口处理成功验证

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

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

步骤五：通过error接口处理失败验证

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

步骤六：接口调用

拦截器具体实现 参考地址 点这里
js 接口调用参考地址 点这里

以上就是JSSDK使用的介绍。
欢迎留言、转发、打赏项目

源码参考地址 点我点我--欢迎Start