微信接口JS-SDK开发测试

前端

发布日期: 2016-08-25

作者: 高虎

文章字数: 1.3k

阅读时长: 6 分

阅读次数:

微信接口JS-SDK开发测试

1、先注册一个微信公众号，然后在公众号设置的功能设置里填写JS接口安全域名

2、在页面中引入JS文件

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

3、通过config接口注入权限验证配置

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

注意： AppId和AppSecret在微信平台公众号后台的基本配置里获取。

其他参数通过一个签名算法获取，代码如下

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 = "";

        // 注意 URL 一定要动态获取，不能 hardcode
        String url = "http://spring-d7f71.coding.io/";
        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);
    }
}

4 、signature的获取方式

① 先获取access token，有两种方式获取

通过后台在线调试工具获取

② 通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 获取，在URL中填写APPID和APPSECRET 会返回一个 json数据，其中有access_token.

③ 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

访问后会返回一个json数据,从中获取jsapi_ticket ,然后填入签名算法中获取所有参数。

5 、参考官方文档，配置JS文件，添加相应的功能，最后上传到服务器进行测试(部分代码，地理位置测试)。

<%--
  Created by IntelliJ IDEA.
  User: Eric
  Date: 2016/8/22
  Time: 10:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>微信接口开发测试</title>
    <meta name="viewport" content="width=device-width,initital-scale=1">
</head>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>    
 wx.config({
      debug: true,
      appId: 'wxde3b68929a66f1d0',
      timestamp: 1472108577,
      nonceStr: '9363b896-acd0-4b05-a5a4-f79c7419761d',
      signature: '0520367302ec40bb8b2eb71384730fea187a8558',
      jsApiList: [
        'openLocation',
        'getLocation',
      ]
  });

wx.ready(function () {
  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
  document.querySelector('#checkJsApi').onclick = function () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
  // 7 地理位置接口
  // 7.1 查看地理位置
  document.querySelector('#openLocation').onclick = function () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: '花神大厦',
      address: '南京软件谷花神大厦208',
      scale: 14,
      infoUrl: 'http://weixin.qq.com'
    });
  };
  // 7.2 获取当前地理位置
  document.querySelector('#getLocation').onclick = function () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert('用户拒绝授权获取地理位置');
      }
    });
  };
  </script>
  <body ontouchstart="">    
<div class="wxapi_container">    
<div class="wxapi_index_container">    
<ul class="label_box lbox_close wxapi_index_list">    
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>    
</ul>    
</div>    
<div class="lbox_close wxapi_form">     
<h3 id="menu-location">地理位置接口</h3>    
<span class="desc">使用微信内置地图查看位置接口</span>    
<button class="btn btn_primary" id="openLocation">openLocation</button>    
<span class="desc">获取地理位置接口</span>    
<button class="btn btn_primary" id="getLocation">getLocation</button>     
</div>    
</div>    
</body>
</html>

6 、测试结果如下