4.9.        使用Github工具托管APP代码
在例程包中（MiCOKit SDK的APP目录下）,找到微信APP控制页面代码（index.html和yourID.html），将xxxxx.html.重命名为你的产品ID，如cabca380.html。拷贝这两个文件到本地git仓库，再同步到git服务器。同步方法详见《上传文件到GitHub》。
index.html   —— OAuth按钮跳转到该页面（一般为设备列表页面，可不做改动）
xxxx.html   —— 设备控制页面（将xxxx替换成FogCloud上创建的产品id）
详细代码见附件代码包，部分代码解释如下：
, y9 F5 U# i2 I' e7 M<script>
' q' B+ S2 ]5 ]    // 从url中获取某个参数的值
    function getParameterByName(name) {
3 ?9 }1 k$ C3 A. T$ G5 H' I0 b        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
5 T: D' I' n( x4 s        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }
    // 得到设备ID
    var device_id = getParameterByName('device_id');
    // 如果设备ID不为空，则执行连接MQTT的操作
. f2 ?$ g0 ?( D* `8 Z" y6 ]8 T    if ( device_id !== null ){
  B4 o6 y4 g' R; e        ez_connect(device_id);
) }  ~- v3 e9 [6 u    }
. r6 K/ P# h" p, M9 o2 {    // 连接MQTT服务
6 j" F) v5 d' H6 g5 U, V    function ez_connect(device_id) {
        // 获取access_token
9 x; f: P! \. r2 \1 q        // access_token是公众号的全局唯一票据，公众号调用各接口时都需使用access_token。
6 G  Q% V8 ?1 j, X( Y) |* j+ n        // 正常情况下access_token有效期为7200秒，重复获取将导致上次获取的access_token失效
        var access_token = getParameterByName('access_token')
        // websocket连接
; |* w7 b1 q$ f7 y        // wsbroker:host
        // wsport:端口 默认1983
* l1 n/ H0 Y6 _4 ^9 q        // Client-ID ： v1_web_[MAC]  //版本号_app_手机MAC(必须是12位小写)
        var wsbroker = "api.easylink.io";  //mqtt websocket enabled broker
        var wsport = 1983 // port for above
) x* ~/ P1 @# s: B        var client = new Paho.MQTT.Client(wsbroker, wsport, "v1-web-" + parseInt(Math.random() * 1000000, 12));
+ `; E8 T0 v$ E' M! L" p, W        // 基本参数配置
        // 连接丢失所对应的callback函数
        client.onConnectionLost = onConnectionLost;
        // 消息到达所对应的callback函数
        client.onMessageArrived = onMessageArrived;
4 `7 T. O9 k: {' O0 w& W/ V        // 连接成功所对应的callback函数        
9 }3 N3 X9 C! I        client.connect({onSuccessnConnect});
        // 连接成功
        function onConnect() {
            var subtopic = device_id+'/out/#';
) f) m/ [3 E: r8 w! ]) E. i  F/ _* _9 c            // Once a connection has been made, make a subscription and send a message.
            // 向某个通道发送指令
! I1 g" B& ?# J" w' c& l            // topic：通道
6 q" _* b/ g9 l/ s5 G            // commond：指令
: F7 m+ x) w5 C$ Q1 e* }; S            client.publish = function(topic, commond) {
  r5 C% B; [) z  ?* o) P$ Y                // console.log("现在执行-->:"+commond);
% \* S0 m4 R2 ?5 p7 q' m8 i                message = new Paho.MQTT.Message(commond);
9 U* x, N" z+ n( i                message.destinationName = topic;
                client.send(message);
            }
5 @$ \5 ]0 R9 q( ?8 I            // console.log("device_id:"+device_id);
3 R/ {. `& J1 t! X& c" s            console.log("onConnect");
1 i% S2 ~+ |  U" J9 y. A/ _            client.subscribe(subtopic, {qos: 0});
        }
        // 连接丢失
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0)
                console.log("onConnectionLost:"+responseObject.errorMessage);
) C; O; H* k0 K) [        }
        // 消息到达
/ z% Q) d: G' l  i6 _8 j        // var msgindex = 1;
        var msgjson;
        function onMessageArrived(message) {
            msgjson = $.parseJSON(message.payloadString);
7 w% X" Z1 s" a4 j) B( |5 P            var tempval = msgjson.dht11_temperature;
0 J5 J5 d2 `- W) ?) L2 E: Q            if("undefined" != typeof(tempval)){
8 C/ x) R, o- {8 w, s                // 显示温度
                $("#tempid").text(tempval+"℃");
9 {0 o% x; h' ^* v  z                // 显示湿度
. I. o. A  z9 I( @& b                $("#humiid").text(msgjson.dht11_humidity+'%');
                // 温度超过29则红灯亮，20-29之间则绿灯亮，低于20黄灯亮
( n  A9 C4 R: L8 m                if(tempval > "29"){
                    led_red();
9 n4 `2 x2 X& n& ~4 r# I9 x                    $("#rgbimgid").attr("src", "./image/02-red.svg");
                }else if(tempval < "30" && (tempval > "19")){
, p. g( n* p; M0 t) l' T. l                    led_green();
                    $("#rgbimgid").attr("src", "./image/02-green.svg");
  |% m- P2 m4 B1 \/ I+ Y) K                }else if(tempval < "20"){
. ~# r+ r/ I8 L, @                    led_yellow();
3 m% S/ H! l' C0 b) J/ ]                    $("#rgbimgid").attr("src", "./image/02-yellow.svg");
* S9 u+ G) ]! d! V" q$ |                }
            }
1 M$ ~8 k5 {9 w' G- }  Z        }
3 M- R$ `5 |4 ^        // 控制按钮显示的事件
        $("#switchbtn").click(function() {
            var topic = device_id+'/in';
! ?( d' X& D9 z* E% W& E            var commond;
            var swtimg = $("#switchbtn").attr("src");
            if("./image/03-turn-on.svg" == swtimg){
                commond = '{"device_switch":false}';
4 `3 T* x/ {& K% J3 z                $("#switchbtn").attr("src", "./image/03-turn-off.svg");
' [0 Z) y% S" a* w                $("#switchspan").text("关");
            }else{
                commond = '{"device_switch":true}';
# _8 S9 F0 u' x! h9 `                $("#switchbtn").attr("src", "./image/03-turn-on.svg");
                $("#switchspan").text("开");
            }
            client.publish(topic, commond);
        });
: n5 p  k7 g  {5 U3 L1 A( N7 T6 E        function led_red() {
  V( ?5 D0 T5 ^4 m8 f7 j* t            var topic = device_id+'/in';
6 m( F8 W6 O9 S3 H# h            var commond = '{"rgbled_switch":true,"rgbled_hues":0, "rgbled_saturation":100, "rgbled_brightness":100}';
# L% z6 g+ P( S6 g8 [: w; d' |/ F' O            client.publish(topic, commond);
. Z9 X" r6 D) q( R6 S  r' h0 {" G3 s        }
        function led_green() {
; r" z2 L3 Z8 O2 N0 ]            var topic = device_id+'/in';
            var commond = '{"rgbled_switch":true,"rgbled_hues":120, "rgbled_saturation":100, "rgbled_brightness":100}';
# u/ U8 ~% Q+ E6 m            client.publish(topic, commond);
        }
; L7 F; z% F* p- b& R! b6 x        function led_yellow() {
2 j- A  |. }0 e* J            var topic = device_id+'/in';
            var commond = '{"rgbled_switch":true,"rgbled_hues":60, "rgbled_saturation":100, "rgbled_brightness":100}';
            client.publish(topic, commond);
        }
8 @# `3 o. c' A9 f% B}
</script>
修改、并提交代码后，如果没有配置WebHook让FogCloud自动更新代码，则需要到FogCloud上手动点击“发布”按钮更新代码，并通过git提交记录确认是否更新成功。
2 Q1 w  v  W- O0 D
4.10.        FogCloud上生成设备二维码
（1）创建新设备
) F7 d9 ]6 U' ~6 G) H（2）填写设备MAC地址(由小写字母和数字构成，设备上电后会向串口发送MAC地址及其他数据，可用串口工具查看)接口创建设备。
6 h! |0 T* f+ [* _8 B9 t（3）为设备生成微信二维码
$ V5 k- I) }: d4 k9 j, S" y6 ~/ l2 i( k点击“同步到微信”按钮，选择创建的产品和要使用的APP后点击同步按钮。
成功后提示：{"result":200,"message":"success"}
返回到产品界面，可看到你的新设备。
极少数情况会出现result：500问题。解决方法：
% e  i# q+ _* ^2 ?3 i6 N% l; B（1）确认步骤4.6节中微信测试号已开通所有测试功能。
（2）因为微信公共平台具有“延时”的问题,等待几分钟后重试。

& ^0 y3 y+ I' d2 ^/ ^. t1 V4.11.        使用手机微信扫码，测试“Airkiss”配网功能以及设备控制功能
# S; \( A- @" Z3 y(a) Airkiss配网
Airkiss技术可以帮助你的设备在没有人机交互的情况下智能配置当前Wi-Fi环境的SSID及密码。（假如你的智能设备是一颗灯泡，总没有屏幕和按键让你输入SSID及密码吧）
) t# t3 e, x4 c! v' K+ l按设备上的Easylink按钮进入配网模式，底板上的LED(D1)灯快速闪烁；
3 W, S; t8 R6 H: x" k& p( K- Z+ ]手机输入当前所在环境的wifi密码，点击连接，成功或超时会自动跳出该页面。
  d0 i0 P0 W" v(b) 设备控制
Airkiss配网成功后会跳转到设备列表，红色圆点表示设备不在线，蓝色圆点表示设备在线。
. p  d9 m& ~7 B$ n/ |; F2 [注意：
0 S4 W( A6 V. H9 q9 E) G* r$ F8 l（1）若配网成功后，没有自动跳转至设备列表页面，请确认步骤4.9节中设备页面html文件名已改为FogCloud中的产品ID。
（2）若配网成功后，设备依然显示设备不在线，可点击右上角刷新按钮。
- i3 z" a* y! E- T  R点击列表进入设备控制界面，点击控制按钮，控制MiCOKit-3288扩展板上的RGB LED灯。

已经配网成功的设备不需要再次进行Airkiss，只需点击测试公众号中的“Devices”按钮，进入设备列表，点击设备进入设备控制界面。此时能收到MiCOKit发上来的温湿度数据，也能控制LED的开关。在温度为20度以下时，LED灯成黄色；在温度为20到30度时，LED灯成绿色；在温度为20度以下时，LED灯成红色。
  ]  c+ s8 p" R! I      
0 o7 t9 Q/ Y/ g8 `, s" ]$ a/ X5 @      
5 y9 ~3 i/ T6 {5 p0 T      
如果您完成到此步骤，那么恭喜您又通关啦！！
% t0 s2 ]# d/ K' [& t通过本案例主要向大家展示了MiCOKit上下行通信的功能。
' w1 C, R+ b) e. Z- i没有完成也不要灰心，仔细参照本文检查之前的步骤，如果还有问题，请移步至MiCO社区http://mico.io
. z0 ^4 |) T$ N+ IGood Luck！
  b& Y3 @4 R1 z7 w$ y7 ~. M. V- ~
5.        版本更新
0 Q2 y: O4 U! K2 c4 j  q: i4 H( q- O% I' B
/ F: S2 [) g( H9 V1 ^! M8 y

* \+ v# J1 J/ H; C6 p# d# h0 o6 s
MiCO.io  Wiki 下载页面
' d  Z/ s/ _9 D$ {& ]http://mico.io/wiki/doku.php?id=micokit_sdk

谢谢分享！！！！

戏如人生 发表于 2015-7-30 14:47
! q# ]1 P7 ^! m谢谢分享！！！！

好东西当然大家一起分享哈~

micolover2015 发表于 2015-7-30 17:13
好东西当然大家一起分享哈~

什么时候可以申请到板卡啊！好期待啊，底板最好是STM32单片机的哦

帮顶一下                    

谢分享     

谢谢分享！！！！！！！！