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

原创 2017年03月11日 12:38:40

微信开发交流群:148540125
欢迎留言、转发

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

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

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

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

使用JSSDK步骤

官方参考文档

步骤一:绑定域名

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

JS接口安全域名.png

步骤二:引入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 成功了就会弹出

JSSDK 签名验证.png

如果出现 {"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

版权声明:本文为博主原创文章,欢迎转载,转载标明出处(http://blog.csdn.net/zyw_java)。微信公众号:javenlife

微信企业号开发(八) -jssdk的使用(调用微信拍照)

1、首先需要配置可信域名,可信域名可以使用花生壳来配置。 2、在jsp页面中准备点击拍照的按钮。 图像接口 拍照或从手机相册中选图接口 chooseImage ...

微信企业号会议助手---微信JSSDK调用

上一章讲了redis工具类的封装,今天我们来讲讲微信工具类的封装。这个可没有想象的那么简单,说实话,我就因为没看仔细微信企业号开发者接口文档,在参数上碰到过很多坑。这个在没有人指导的情况下,整个人心情...

微信公众号开发教程[017]-网页开发-JSSDK

我承接app和微信公众号开发,如果有谁需要的话,可以惠顾我,谢谢. QQ: 40678884 微信: szuzsq 主页: http://www.wxshaker.com 博客: http:/...
  • szuzsq
  • szuzsq
  • 2016年07月28日 15:36
  • 785

微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK

部署JSSDK不会太难,有时候需要一点后台知识,但也不是太难的那种,本节主要是用PHP作为后台参考语言,为了照顾初学者,把代码写的简单一点,实现最终目的是第一优先权。...
  • kgsew
  • kgsew
  • 2015年11月17日 15:15
  • 2387

Java微信公众平台开发(十三)——微信JSSDK中Config配置

前端开发工程师和关注前端开发的开发者们在2015年中肯定被腾讯的JSSDk引爆过,搞APP的、搞前端的甚至是是搞后端的都跑过来凑热闹,一时之间也把微信JSSDK捧得特别牛逼,但是在我们的技术眼里它的实...

VUE项目引入微信jssdk

我们的一个vue + webpack的 SPA项目需要在微信中使用,因此需要导入微信的jssdk库。 通过搜索发现npm有微信jssdk的依赖包: weixin-js-sdk, 于是 导入依赖包 np...

微信开发之JSSDK调用

由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。 因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。...

微信JSSDK引入微信开发

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、...

微信公众号之:JSSDK接入以及invalid signature等常见错误问题

最近在搞微信公众号开发,进行到网页开发部分被坑了一天,最坑的问题就是invalid signature,而网上大部分解答这个问题的都没有说清楚,都直接丢文档。博主决定这样很不好。本文是博主结合自身遇到...

微信JSSDK分享功能详解

微信6.0之后JSSDK的调用,微信分享功能的实现,傻瓜教程
  • ty_hf
  • ty_hf
  • 2016年01月26日 14:19
  • 43329
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信公众号开发之如何使用JSSDK
举报原因:
原因补充:

(最多只允许输入30个字)