1@page miniapp_agent_demo 蓝牙配网：通过支付宝小程序为HaaS板便捷配网示例 2# 1. 案例简介 3miniapp_agent_demo是我们提供的小程序配网、上云配套固件。通过配套的“HaaS小程序”，开发者可以快速实现设备的配网、上云、连接 IoT Studio 快速实现应用开发及部署。 4其完成的主要功能包括： 5 6- 蓝牙配网 7 上电启动蓝牙配网 8 连接小程序指定的 Wi-Fi 9 Ping "aliyun.com" 并将连接结果返回至小程序端显示 10 11- LinkSDK 连接物联网平台 12 接收小程序下发的三元组 13 连接物联网平台并运行业务代码 14 15该示例的运行依赖下述基本功能完成对接： 16- 内核的任务和中断运行正常 17- 系统tick定时器正常运行 18- 蓝牙通信 19- Wi-Fi连接 20 21*方案限制*：目前不支持中文SSID和中文密码。 22 23# 2. 物料清单 24 25## 2.1 HaaS100 硬件 26 27[HaaS100 硬件简介](https://help.aliyun.com/document_detail/184426.html) 28 29<div align=left display=flex> 30 <img src="https://img.alicdn.com/imgextra/i4/O1CN01XxD6Xo217CB3FZnEU_!!6000000006937-2-tps-746-497.png" style="max-width:800px;" /> 31</div> 32 33# 3. 设备端实现 34 35 36# 4. 完整使用流程 37点击这里(https://cloud.video.taobao.com/play/u/1632932/p/1/e/6/t/1/307129850804.mp4)观看演示视频。 38## 烧录固件至开发板 39*> 选择解决方案: 小程序配网 上云 应用案例* 40*> 选择开发板: Haas100 board configure* 41 42-- 编译固件可参考[《AliOS Things集成开发环境使用说明之编译固件》](https://help.aliyun.com/document_detail/302384.html)。 43-- 烧录固件可参考[《AliOS Things集成开发环境使用说明之烧录固件》](https://help.aliyun.com/document_detail/302383.html)。 44 45## 小程序配网 46- 准备一个连接至互联网的 Wi-Fi AP。它可以由手机热点产生，也可以通过路由器配置。在本案例中，热点信息如下： 47 SSID: HaaS-AP 48 PassWord: MiniAppAgentDemo 49- 将烧录好固件的设备上电 50- 在“支付宝”中搜索并打开“HaaS小程序” 51- 点击底部“配网”Tab 52- 输入目标AP的SSID及Password 53- 打开手机蓝牙 54- 点击扫描配网设备（授予蓝牙权限） 55- 在扫描列表中选择待配网设备 56- 点击“发起配网” 57- 等待配网完成，显示配网状态。当“配网状态”中显示“设备IP”时，代表配网成功。 58 59<div align=left display=flex> 60 <img src="https://img.alicdn.com/imgextra/i3/O1CN01i0HONM1TeS0OHtHk0_!!6000000002407-1-tps-626-1280.gif" style="max-width:800px;" /> 61</div> 62 63## 配置物联网平台 64点击这里(https://iot.console.aliyun.com/)进入物联网平台 65### 创建产品 66 67<div align=left display=flex> 68 <img src="https://img.alicdn.com/imgextra/i1/O1CN01dvGFo01DIR79OnB1b_!!6000000000193-2-tps-4096-2560.png" style="max-width:800px;" /> 69</div> 70 71点击 公共实例-产品-新建产品，选择自定义品类，点击创建。 72 73### 配置物模型并发布 74 75<div align=left display=flex> 76 <img src="https://img.alicdn.com/imgextra/i4/O1CN01GcyU4T1vGutcRUrX6_!!6000000006146-2-tps-4096-2560.png" style="max-width:800px;" /> 77</div> 78 79导入代码目录下的物模型文件，发布物模型。 80### 创建设备 81 82<div align=left display=flex> 83 <img src="https://img.alicdn.com/imgextra/i2/O1CN01sOZ4lC26UA7drDcmQ_!!6000000007664-2-tps-4096-2560.png" style="max-width:800px;" /> 84</div> 85 86在该产品下创建设备，获得三元组。 87### 生成三元组二维码 88点击这里(https://haas.iot.aliyun.com/gen-qrcode)，前往二维码生成工具。将三元组依次拷贝，生成二维码供小程序读取。 89 90<div align=left display=flex> 91 <img src="https://img.alicdn.com/imgextra/i4/O1CN01DrQXDt1eS33GNbyf1_!!6000000003869-2-tps-4096-2560.png" style="max-width:800px;" /> 92</div> 93 94## 小程序上云 95 96<div align=left display=flex> 97 <img src="https://img.alicdn.com/imgextra/i1/O1CN01brO1OO1zOwINrkWec_!!6000000006705-1-tps-626-1280.gif" style="max-width:800px;" /> 98</div> 99 100- 点击底部“上云”Tab 101- 输入目标三元组 102 也可以使用二维码生成工具（https://haas.iot.aliyun.com/gen-qrcode） 103 在页面输入三元组之后，点击生成二维码，并使用小程序“扫码获取三元组” 104- 打开手机蓝牙 105- 点击扫描设备（授予蓝牙权限） 106- 在扫描列表中选择设备 107- 点击“下发三元组” 108- 等待三元组下发完成 109## 配置 IoT Studio 110点击这里(https://studio.iot.aliyun.com/)进入IoT Studio 111### 创建项目 112 113<div align=left display=flex> 114 <img src="https://img.alicdn.com/imgextra/i1/O1CN01rWDZV31wO4hQAMVpg_!!6000000006297-2-tps-4096-2560.png" style="max-width:800px;" /> 115</div> 116 117### 关联物联网平台 118 119<div align=left display=flex> 120 <img src="https://img.alicdn.com/imgextra/i2/O1CN01f9csYR25ePMtZTaZD_!!6000000007551-2-tps-4096-2560.png" style="max-width:800px;" /> 121</div> 122 123 124<div align=left display=flex> 125 <img src="https://img.alicdn.com/imgextra/i1/O1CN01rWDZV31wO4hQAMVpg_!!6000000006297-2-tps-4096-2560.png" style="max-width:800px;" /> 126</div> 127 128### 创建移动端应用 129 130<div align=left display=flex> 131 <img src="https://img.alicdn.com/imgextra/i2/O1CN01EqkRaK1Ii9QmrCITV_!!6000000000926-2-tps-4096-2560.png" style="max-width:800px;" /> 132</div> 133 134编辑移动应用界面，并完成数据绑定。 135本案例中，使用6个按钮对应 HaaS100 开发板上6个灯的亮灭。 136 137<div align=left display=flex> 138 <img src="https://img.alicdn.com/imgextra/i4/O1CN01wNItls28Bxc44sieG_!!6000000007895-2-tps-4096-2560.png" style="max-width:800px;" /> 139</div> 140 141点击右上角预览图标，进入预览。 142### 预览移动端应用 143 144<div align=left display=flex> 145 <img src="https://img.alicdn.com/imgextra/i2/O1CN01Mp1Wfb1iKUzK1xtLj_!!6000000004394-2-tps-4096-2560.png" style="max-width:800px;" /> 146</div> 147 148## 小程序预览移动端应用 149 150<div align=left display=flex> 151 <img src="https://img.alicdn.com/imgextra/i3/O1CN01zoMN1X1RqEy3X2R4P_!!6000000002162-1-tps-626-1280.gif" style="max-width:800px;" /> 152</div> 153 154- 点击底部“IoT Studio”Tab 155- 扫描 IoT Studio 中提供的预览二维码 156 157 158# 5. 总结 159本实验提供了小程序方法来实现设备的快速配网、上云，帮助开发者快速连接物联网平台。开发者们可以基于此案例，开发更多的联网应用。 160
