蓝色域界

        微信的 AirKiss 功能也是调用 JS-SDK 中的一个接口，微信 JS-SDK 说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

jssdk.class.php

<?php
/**
 * JSSDK
 *
 * @version     1.0.0 2017/09/19 19:49
 * @author      Wildlife <admin@lanseyujie.com>
 * @link        https://www.lanseyujie.com
 * @copyright   Copyright(c) 2014-2018, lanseyujie.com
 */

class JSSDK
{
    private $appId;
    private $appSecret;

    public function __construct($appId, $appSecret) {
        $this->appId = $appId;
        $this->appSecret = $appSecret;
    }

    private function get_php_file($filename) {
        return trim(substr(file_get_contents($filename), 16));
    }

    private function set_php_file($filename, $content) {
        $fp = fopen($filename, 'w');
        fwrite($fp, '<?php exit(); ?>'. $content);
        fclose($fp);
    }

    private function createNonceStr($length = 16) {
        $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        $str = '';
        for ($i = 0; $i < $length; $i++) {
            $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }

        return $str;
    }

    private function httpRequest($url, $method = 'get', $data = '') {
        $curl = curl_init();
        // 设置获取的信息以文件流的形式返回而不是直接输出
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 500);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($curl, CURLOPT_URL, $url);

        if ('post' == $method && !empty($data)) {
            curl_setopt($curl, CURLOPT_POST, true);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        }

        $res = curl_exec($curl);
        curl_close($curl);

        return $res;
    }

    private function getJsApiTicket() {
        // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
        $data = json_decode($this->get_php_file('jsapi_ticket.php'));
        if ($data->expire_time < time()) {
            $accessToken = $this->getAccessToken();
            // 获取 ticket
            $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token='. $accessToken;
            $res = json_decode($this->httpRequest($url));
            $ticket = $res->ticket;
            if ($ticket) {
                $data->expire_time = time() + 7000;
                $data->jsapi_ticket = $ticket;
                $this->set_php_file('jsapi_ticket.php', json_encode($data));
            }
        }
        else {
            $ticket = $data->jsapi_ticket;
        }

        return $ticket;
    }

    private function getAccessToken() {
        // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
        $data = json_decode($this->get_php_file('access_token.php'));
        if ($data->expire_time < time()) {
            // 获取access_token
            // 如果是企业号用以下URL获取access_token
            // $url = 'https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid='. $this->appId .'&corpsecret='. $this->appSecret;
            $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='. $this->appId .'&secret='. $this->appSecret;
            $res = json_decode($this->httpRequest($url));
            $access_token = $res->access_token;
            if ($access_token) {
                $data->expire_time = time() + 7000;
                $data->access_token = $access_token;
                $this->set_php_file('access_token.php', json_encode($data));
            }
        }
        else {
            $access_token = $data->access_token;
        }

        return $access_token;
    }

    public function getSignPackage() {
        $jsapiTicket = $this->getJsApiTicket();
        // 注意 URL 一定要动态获取，不能 hardcode
        $protocol = !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443 ? 'https://' : 'http://';
        $url = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
        $timestamp = time();
        $nonceStr = $this->createNonceStr();
        // 这里参数的顺序要按照 key 值 ASCII 码升序排序
        $string = 'jsapi_ticket='. $jsapiTicket .'&noncestr='. $nonceStr .'&timestamp='. $timestamp .'&url='. $url;
        $signature = sha1($string);
        $signPackage = array(
            'appId' => $this->appId,
            'nonceStr' => $nonceStr,
            'timestamp' => $timestamp,
            'url' => $url,
            'signature' => $signature,
            'rawString' => $string
        );

        return $signPackage;
    }

}

        调用 JS-SDK 中的原生 AirKiss 界面。

<?php
/**
 * Call AirKiss
 *
 * @version     1.0.0 2017/09/19 20:20
 * @author      Wildlife <admin@lanseyujie.com>
 * @link        https://www.lanseyujie.com
 * @copyright   Copyright(c) 2014-2018, lanseyujie.com
 */
 
require_once 'jssdk.class.php';
$jssdk = new JSSDK('yourappid', 'yourappsecret');
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WeChat AirKiss Test</title>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    </head>
    <body>
        <h2>WeChat AirKiss Test</h2>
        <script type="text/javascript">
        wx.config({
            beta : true,
            // debug: true,
            appId: '<?php echo $signPackage['appId']; ?>',
            timestamp: '<?php echo $signPackage['timestamp']; ?>',
            nonceStr: '<?php echo $signPackage['nonceStr']; ?>',
            signature: '<?php echo $signPackage['signature']; ?>',
            jsApiList: ['configWXDeviceWiFi']
        });

        wx.ready(function() {
            wx.checkJsApi({
                jsApiList: ['configWXDeviceWiFi'],
                // 需要检测的 JS 接口列表
                success: function(res) {
                    var err_msg = res.err_msg;
                    console.log(err_msg);
                    // 以键值对的形式返回，可用的 api 值为 true，不可用为 false
                    // 如：{"checkResult":{"configWXDeviceWiFi":true},"errMsg":"checkJsApi:ok"}
                    wx.invoke('configWXDeviceWiFi', {}, function(res) {
                        err_msg = res.err_msg;
                        console.log(err_msg);
                    });
                }
            });
        });
        </script>
    </body>
</html>

        ESP8266 在 Arduino IDE 的开发实例。

/**
 * AirKiss and SmartConfig
 *
 * @version     1.0.2 2017/09/19 20:19
 * @author      Wildlife <admin@lanseyujie.com>
 * @link        https://www.lanseyujie.com
 * @copyright   Copyright(c) 2014-2018, lanseyujie.com
 */

#include <ESP8266WiFi.h>
#define LED 2

void SmartConfig() {
    WiFi.mode(WIFI_STA);
    Serial.print("SmartConfig...");
    WiFi.beginSmartConfig();

    while(1) {
        Serial.print(".");
        digitalWrite(LED, 0);
        delay(500);
        digitalWrite(LED, 1);
        delay(500);
        if (WiFi.smartConfigDone()) {
            Serial.println("\r\nSmartConfig Success");
            Serial.printf("SSID: %s\r\n", WiFi.SSID().c_str());
            Serial.printf("PSK: %s\r\n", WiFi.psk().c_str());
            break;
        }
    }
}

void WiFiInfo() {
    Serial.print("\r\nConnecting...");
    while (WL_CONNECTED != WiFi.status()) {
        delay(500);
        Serial.print(".");
    }
    Serial.printf("IP: %s", WiFi.localIP().toString().c_str());
}

void setup() {
    Serial.begin(9600);
    Serial.println("\r\nInitializing...");
    pinMode(LED, OUTPUT);
    digitalWrite(LED, 1);
    SmartConfig();
    WiFiInfo();
}

void loop() {
    digitalWrite(LED, 0);
}