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

查看公众号是否有使用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

前端必知的ajax

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

1454
来自专栏编程

史上最全Django知识总结!神级程序员强推:掌握此文就掌握Django

一、视图函数(views.py中的函数):第一个参数类型是HttpRequest对象,返回值是HttpResponse对象 二、URLconf(urls.py)...

5667
来自专栏mySoul

node Express 框架

Express事实上Node内置的http模块上构建的一层抽象。理论上所有Express实现的功能都能用Node实现

1592
来自专栏Coding迪斯尼

利用web work实现多线程异步机制,打造页面单步调试IDE

我们已经完成了整个编译器的开发,现在我们做一个能够单步调试的页面IDE,完成本章代码后,我们可以实现下面如图所示功能:

1073
来自专栏CDA数据分析师

学会这几招,轻松掌握Python文件管理

一、Python中的文件管理 文件管理是很多应用程序的基本功能和重要组成部分。Python可以使文件管理极其简单,特别是和其它语言相对比。 以下,Peyton ...

2866
来自专栏青玉伏案

iOS开发之App主题切换完整解决方案(Swift版)

本篇博客就来介绍一下iOS App中主题切换的常规做法,当然本篇博客中只是提到了一种主题切换的方法,当然还有其他方法,在此就不做过多赘述了。本篇博客中所涉及的D...

23610
来自专栏玄魂工作室

Python黑客编程2 入门demo--zip暴力破解

上一篇文章,我们在Kali Linux中搭建了基本的Python开发环境,本篇文章为了拉近Python和大家的距离,我们写一个暴力破解zip包密码的小程序。这个...

4647
来自专栏沈唁志

在Linux中vim的用法

2012
来自专栏技术之路

【swift学习笔记】二.页面转跳数据回传

上一篇我们介绍了页面转跳:【swift学习笔记】一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据...

2098
来自专栏Java后端技术

Linux的Bash Shell详解

  1.什么是bash           bash是Bourne Again Shell的简称,是从unix系统中的sh发展而来的,是用户和Linux内核交互...

914

扫码关注云+社区