Java微信開發之AirKiss

阿新 • • 發佈：2019-01-19

1、AirKiss介紹

2、JSAPI

微信硬體JSAPI介面屬於微信JS-SDK的一部分

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。

使用微信JS-SDK，公眾號開發者可藉助微信高效地使用拍照、選圖、語音、位置、藍芽、WiFi等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁體驗。

使用微信硬體JSAPI，裝置廠商可以在網頁通過內javascript，對裝置操作的介面。例如掃描裝置，連線裝置，收發資料，繫結裝置，Airkiss配網等。

這裡寫圖片描述

HTML通過JSAPI可以和裝置本地收發資料（即HTML傳送給微信客戶端，微信客戶端發給裝置），無需通過伺服器中轉，所以速度較快。所以實時性要求高的藍芽裝置（如遙控汽車）可採用JSAPI收發資料。

3、業務程式碼

3.1 頁面引用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/" 
+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>LETUS</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" 
>
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="amazeui/assets/css/amazeui.min.css"/>
  <style>
* { margin: 0; padding: 0; }  
 html, body { height: 100%; width: 100%; }  
  </style>
  <script></script>
</head>
<body>
<h1>設定裝置Wifi</h1>
<br><br>
<div id="message"></div>
</body>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">

    wx.config({
        beta : true, // 開啟內測介面呼叫，注入wx.invoke方法
        debug : false, // 開啟除錯模式
        appId : '${config.appId}', // 第三方app唯一標識
        timestamp : '${config.timestamp}', // 生成簽名的時間戳
        nonceStr : '${config.nonce}', // 生成簽名的隨機串
        signature : '${config.signature}',// 簽名
        jsApiList : ['configWXDeviceWiFi'] // 需要使用的jsapi列表
    });

    var second = 5;
    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: ['configWXDeviceWiFi'],
            success: function(res) {
                wx.invoke('configWXDeviceWiFi', {}, function(res){
                    var err_msg = res.err_msg;
                    if(err_msg == 'configWXDeviceWiFi:ok') {
                        $('#message').html("配置 WIFI成功，<span id='second'>5</span>秒後跳轉到首頁。");
                        setInterval(count,1000);
                        return;
                    } else {
                        $('#message').html("配置 WIFI失敗，是否<a href=\"/wechat/scan/airkiss" + window.location.search +  "\">再次掃描</a>。<br>不配置WIFI,<a href=\"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf1867e87a4eeeb16&redirect_uri=http://letux.xyz/wechat/page/main&response_type=code&scope=snsapi_base&state=1#wechat_redirect\">直接進入首頁</a>。");
                    }
                });
            }
        });
    });

    function count(){
        second--;
        $('#second').html(second);
        if(second == 0){
            //跳轉到首頁
            window.location.href='/consumer/main'
        }
    }
</script>
</html>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

wx.config的方法的引數大部分由後臺生成，本文中是JsAPIConfig物件。jsApiList陣列中，傳入需要額外使用的jsapi名稱，我們用到的AirKiss功能是configWXDeviceWiFi介面。
這裡寫圖片描述

    wx.config({
        beta : true, // 開啟內測介面呼叫，注入wx.invoke方法
        debug : false, // 開啟除錯模式
        appId : '${config.appId}', // 第三方app唯一標識
        timestamp : '${config.timestamp}', // 生成簽名的時間戳
        nonceStr : '${config.nonce}', // 生成簽名的隨機串
        signature : '${config.signature}',// 簽名
        jsApiList : ['configWXDeviceWiFi'] // 需要使用的jsapi列表
    });

檢查瀏覽器是否支援configWXDeviceWiFi介面，並使用此介面。

    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: ['configWXDeviceWiFi'],
            success: function(res) {
                wx.invoke('configWXDeviceWiFi', {}, function(res){
                    var err_msg = res.err_msg;
                    if(err_msg == 'configWXDeviceWiFi:ok') {
                        //配置成功
                    } else {
                        //配置失敗
                    }
                });
            }
        });
    });

3.2 JsAPIConfig實體類

package com.benben.timetable.wechat.entity;

/**
 * JS-SDK使用的配置資訊
 * @ClassName: JsAPIConfig 
 * @Description: TODO
 * @author 潘廣偉（笨笨） 
 * @date 2015年8月17日 下午3:12:35 
 *
 */
public class JsAPIConfig {
    private boolean debug;
    private String appId;
    private String timestamp;
    private String nonce;
    private String signature;
    private String title;
    private String link;
    private String signType;
    private String packageName;

    public JsAPIConfig(){
        signType = "MD5";
    }

    public boolean isDebug() {
        return debug;
    }

    public void setDebug(boolean debug) {
        this.debug = debug;
    }

    public String getAppId() {
        return appId;
    }

    public void setAppId(String appId) {
        this.appId = appId;
    }

    public String getTimestamp() {
        return timestamp;
    }

    public void setTimestamp(String timestamp) {
        this.timestamp = timestamp;
    }

    public String getNonce() {
        return nonce;
    }

    public void setNonce(String nonce) {
        this.nonce = nonce;
    }

    public String getSignature() {
        return signature;
    }

    public void setSignature(String signature) {
        this.signature = signature;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getLink() {
        return link;
    }

    public void setLink(String link) {
        this.link = link;
    }

    public String getSignType() {
        return signType;
    }

    public void setSignType(String signType) {
        this.signType = signType;
    }

    public String getPackageName() {
        return packageName;
    }

    public void setPackageName(String packageName) {
        this.packageName = packageName;
    }   
}

這裡預設使用MD5加密方式。

3.3 獲取api_ticket

api_ticket會在生成JsAPIConfig物件signature（簽名）屬性時用到。

通過http get請求方式獲取：

    /**
     * 獲取jsTicket
     * @Title: getJsTicketFromWechat 
     * @Description: TODO
     * @param @return
     * @param @throws Exception   
     * @return String   
     * @throws
     */
    public  String getJsTicketFromWechat() throws Exception{  
        String token = getTokenFromCache();
        String responeText = httpConnection.get(ticketUrl+token);
        JSONObject obj = JSONObject.fromObject(responeText);
        String jsTicket = obj.getString("ticket");
        SystemCache.getWechatJsTicketCache().addJsTicket(jsTicket);

        return jsTicket;  
    }

返回JSON格式資料：

 {
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKdvsdshFKA",
    "expires_in":7200
}

注意事項（很重要）：

2.由於獲取api_ticket 的api 呼叫次數非常有限，頻繁重新整理api_ticket 會導致api呼叫受限，影響自身業務，開發者需在自己的服務儲存與更新api_ticket。api_ticket 的有效期為7200 秒。

3.4 生成 JsAPIConfig

    /**
     * 生成JsAPIConfig
     * @Title: createConfig
     * @Description: TODO
     * @param @param link 使用AirKiss的連結地址
     * @param @return
     * @param @throws Exception    
     * @return JsAPIConfig    
     * @throws
     */
    public JsAPIConfig createConfig(String link) throws Exception {
        JsAPIConfig config = new JsAPIConfig();
        config.setLink(link);
        String nonce = UUID.randomUUID().toString();
        String timestamp = Long.toString(System.currentTimeMillis() / 1000);
        String src = "jsapi_ticket=" + getJsTicketFromCache() + "&noncestr="
                + nonce + "&timestamp=" + timestamp + "&url="
                + config.getLink();
        String signature = SHAEncryptor.sha1(src);

        config.setAppId(appId);
        config.setDebug(true);
        config.setNonce(nonce);
        config.setTimestamp(timestamp);
        config.setSignature(signature);

        return config;
    }

這裡的getJsTicketFromCache()是從快取中獲取ticket了。有關快取相關的技術，請自個度娘。

    /**
     * 從快取中獲取JsTicket
     * @Title: getJsTicketFromCache
     * @Description: TODO
     * @param @return
     * @param @throws Exception    
     * @return String    
     * @throws
     */
    public String getJsTicketFromCache() throws Exception{  
        String ticket =  SystemCache.getWechatJsTicketCache().getJsTicket();

        if(ticket == null){
            ticket = getJsTicketFromWechat();
        }

        return ticket;
    }

JsAPIConfig config = createConfig("http://letus.xyz/wechat/scan/airkiss");

4、AirKiss頁面

這裡寫圖片描述

當配置屬性呼叫成功後，會來到AirKiss頁面。輸入移動裝置所在網路的WiFi密碼並確定，微信會通過AirKiss技術，把周圍的硬體裝置配置到同一網路中。

配置成功會返回configWXDeviceWiFi:ok資訊。在配置成功後，我們再做相應的頁面跳轉邏輯即可。

Java微信開發之AirKiss

1、AirKiss介紹

2、JSAPI

3、業務程式碼

3.1 頁面引用

3.3 獲取api_ticket

3.4 生成 JsAPIConfig

4、AirKiss頁面

附

Java微信開發之AirKiss

微信開發之JSSDK介面開發（Java）

微信開發之微信分享 node.js直接使用、C#、 java 通用

Java微信開發_01_微信開發包策略文件

Java微信開發-崔用誌-微信開發-java版本

php微信開發之帶參數二維碼的使用

Java微信開發_02_本地服務器映射外網

微信開發之網頁授權

武漢微信開發之小程序開發，應該從哪些方面做起？

微信開發之消息接收--文本消息(三)

微信開發之消息回復--圖文消息(四)

ThinkPHP5.0微信開發之獲取使用者地理位置

php 微信開發之微信支付 v3 配置

微信開發之網頁授權取客戶資訊(微信測試號)

微信開發之網站微信授權登入-C#

微信開發之客服訊息的使用

微信開發之獲取openid及推送模板訊息

微信開發之傳送訊息介面

微信開發之小程式獲取手機號授權登入

Java微信開發-微信java開發接入平臺例項

Java微信開發之AirKiss

1、AirKiss介紹

2、JSAPI

3、業務程式碼

3.1 頁面引用

3.3 獲取api_ticket

3.4 生成 JsAPIConfig

4、AirKiss頁面

附

相關推薦