AliOS Things 3.0應用筆記：支付寶小程式裝置控制 - 全棧開發（附全部源碼）

目錄

• 應用示範
• 架構圖
• 技術棧拆解
  • 裝置端
  • 支付寶小程式端
  • 服務端
• 一、建立産品
  • 建立産品
  • 添加功能
  • 添加裝置
• 二、裝置端開發
  • 準備工作
  • 源碼目錄
  • 配置
  • 運作
• 三、小程式端開發
• 四、服務端開發
  • 介紹
  • 部署
• 其他
  • API接口說明
    • 擷取裝置狀态
    • 擷取裝置清單
    • 擷取裝置屬性
    • 設定裝置屬性
• 結語

通過支付寶小程式即可控制裝置端。

點選觀看

視訊示範

。

• 小程式服務端（ 源碼 ）。
• 支付寶小程式端（
• 裝置端，基于AliOS Things 3.0（

裝置端運作

AliOS Things 3.0

，友善快速的就能接入到阿裡雲IoT平台。

支付寶小程式主要功能是顯示前端控制界面，通過https api控制裝置屬性。掃碼體驗小程式（小程式已上線，支付寶首頁搜尋 “xw智能燈” 也能打開小程式）：

小程式服務端主要是為小程式提供API SaaS服務，同時通過OpenAPI SDK對接阿裡雲IoT平台。

首先需要在

阿裡雲物聯網平台

上

，

建立裝置

，擷取到裝置的三元組（裝置密鑰）才能讓裝置端接入物聯網平台上。

登入到

，進入到

産品管理

頁，點選

建立産品

，所屬分類中選擇

智能生活

/

電工照明

燈

，其他選項預設即可，點選

确定

建立産品：

進入到産品詳情頁可以看到如下産品資訊：

本示例用到了RGB燈，是以需要在産品中添加RGB屬性，進入到

産品詳情

頁 >

功能定義

>

添加功能

：

功能選擇

RGB調色

屬性，點選

确認

添加：

進入

裝置管理

頁，選擇你的産品，然後點選

添加裝置

即可添加測試裝置，添加完成之後會顯示該裝置的三元組（密鑰）：

至此就完成本示例物聯網平台上的産品建立。

• AliOS Things環境安裝，參考 AliOS-Things-Environment-Setup
• AliOS Things 3.0應用開發環境搭建，參考 AliOS Things 3.0 應用開發指南
• 準備nodemcu和RGB燈。
• 下載下傳 裝置端應用開發源碼

接線圖

接線方式如下：

nodemcu引腳	RGB燈引腳
GPIO12	Blue （藍色燈引腳）
GPIO13	Green（綠色燈引腳）
GPIO15	Red （紅色燈引腳）

使用vscode打開nodemcu_demo源碼。

.
├── Config.in
├── README.md
├── aos.mk
├── app_main.c                          # 功能邏輯代碼
├── k_app_config.h
├── linkkit_client.c                    # Linkkit API封裝
└── linkkit_client.h           

更改AOS_SDK_PATH路徑

• 編輯

  .aos

  :

AOS_SDK_PATH=/Users/xxw/workspace/github/AliOS-Things
DEPENDENCIES=
MD5SUM_HEADER=a1a4b53ab917fb4a6cb08289b6007fe0           

更改

/Users/xxw/workspace/github/AliOS-Things

為你的

AliOS-Things

源碼路徑。

• Config.in

......
config AOS_SDK_PATH
    string
    default "/Users/xxw/workspace/github/AliOS-Things"
......           

/Users/xxw/workspace/github/AliOS-Things

AliOS-Things

windows使用者的路徑示例為：

C:/workspace/github/AliOS-Things

，注意路徑中用的是斜杠

/

，不是反斜杠

\

更改裝置認證資訊

更改源碼

app_main.c

中的四元組：

PRODUCT_KEY

、

PRODUCT_SECRET

DEVICE_NAME

DEVICE_SECRET

為你的裝置四元組：

#define PRODUCT_KEY "<product_key>"
#define PRODUCT_SECRET "<product_secret>"
#define DEVICE_NAME "<device_name>"
#define DEVICE_SECRET "<device_secret>"           

更改wifi資訊

app_main.c

中的

WIFI_SSID

WIFI_PASSWD

為你的路由器（網關）資訊：

#define WIFI_SSID "aiot"
#define WIFI_PASSWD "12345678"           

更改完成後，即可編譯并燒錄到nodemcu中。

啟動nodeMCU後，nodeMCU會自動連接配接指定的wifi，三色燈顯示藍色代表連接配接wifi成功，顯示紅色代表連接配接阿裡雲IoT平台成功。

在阿裡雲物聯網雲端可以看到裝置是否上線，也可以使用

線上調試

功能控制nudeMCU的顔色。

小程式和服務端之間的互動API請參考本文檔中的

• 了解支付寶小程式開發流程： 支付寶小程式快速開始
• 小程式開發工具
• 小程式源碼

xwColorLight
├── README.md               # 使用說明
├── app.acss
├── app.js                  # 小程式入口
├── app.json                # 小程式整體配置
├── asset                   # 資源檔案，包括使用的圖檔資源、字型資源
├── package.json
├── pages
│   ├── index               # 裝置控制頁面
│   └── lights              # 裝置選擇頁面
└── utils
    └── device_api.js       # 服務端api操作接口           

安裝依賴

打開源碼的時候，IDE會提示安裝依賴，點選确定安裝依賴：

更改參數

utils/device_api.js

defaultServerURL

為你的伺服器API位址（服務端本地調試時，位址為

http://localhost:7001/api/device

）、更改

defaultProductKey

defaultDeviceName

為你的裝置

product key

和

device name

const defaultServerURL = '<your-domain>';
const defaultProductKey = '<product-key>';
const defaultDeviceName = '<device-name>';           

本示例通過openAPI接口對接阿裡雲物聯網平台，阿裡雲物聯網平台提供的雲端API文檔可以參考：

雲端開發指南 > API清單

，也可以進入

OpenAPI Explorer

對openAPI接口進行可視化調試。

本服務端向小程式端提供的API接口說明請參考本文檔中的

需要了解egg.js請參考 eggjs 官方文檔。

• 安裝 nodeJS
• 下載下傳小程式 服務端源碼

如果需要部署到線上或者上線小程式，還需要準備：

• ECS或者公網可通路的伺服器。
• 有效域名（已備案）。
• SSL證書。

申請加入 阿裡巴巴小程式繁星計劃 ，可以免費試用ECS和其他的小程式服務。

xwColorLight-server
├── README.md                 # 說明文檔
├── app
│   ├── controller
│   │   └── home.js           # API接口實作
│   ├── router.js             # API路由
│   └── service
│       └── aliyunIoT.js      # OpenAPI接口
├── config
│   ├── config.default.js     # 全局配置
│   └── plugin.js
├── package.json
└── test           

app/service/aliyunIoT.js

中

config

變量的

accessKey

accessSecret

endPoint

regionId

詳細說明請參考 阿裡雲物聯網平台 > 調用API

const config = {
  accessKey: '<access-key>',
  accessSecret: '<access-secret>',
  endPoint: 'https://iot.cn-shanghai.aliyuncs.com',
  apiVersion: '2018-01-20',
  regionId: 'cn-shanghai',
};           

accessKey

accessSecret

accessKey

accessSecret

是阿裡雲頒發給使用者的通路服務所用的密鑰，

登入阿裡雲控制台，将光标移至賬号頭像上，然後單擊accesskeys，跳轉至使用者資訊管理頁，即可建立和檢視AccessKey。阿裡雲控制台的通路控制機制具體請參考

什麼是通路控制 阿裡雲物聯網平台 > 子賬号通路

endPoint

regionId

阿裡雲物聯網平台有多個地域，不同地域有不同的資料中心，詳情請檢視：

地域和可用區

$ npm i
$ npm run dev
$ open http://localhost:7001           

浏覽器中打開

http://localhost:7001

，會出現如下介紹界面：

使用REST API測試工具可以測試API接口是否有效：

本示例用的REST api測試工具為 insomnia

如果要把該服務端工程部署上線，使用如下指令：

$ npm start
$ npm stop           

本示例提供如下的API接口供小程式通路：

定義

GET

/api/device/status

參數

	類型	說明
product_key	String	必填，裝置pk
device_name		必填，裝置名稱

傳回

msg		描述請求結果的産生原因， success 成功，其他為失敗
status		裝置狀态，可能值為： ONLINE OFFLINE INACTIVE DISABLED

示例

請求：

http://localhost:7001/api/device/status?product_key=xxxxxxxxxx&device_name=nodemcu_01           

code: 200           

{
    "msg": "success",
    "status": "INACTIVE"
}           

GET

/api/device/list

product_key
page_size	Integer	必填，指定傳回結果中每頁顯示的記錄數量，最大值是50。預設值是10
current_page		必填，指定顯示傳回結果中的第幾頁的内容。預設值是1

msg		success
data	Object	裝置清單

http://localhost:7001/api/device/list?product_key=xxxxxxxxxx&page_size=10&current_page=1           

code: 200           

{
    "msg": "success",
    "data": {
        "DeviceInfo": [
            {
                ......
            },
            {
                ......
            }
        ]
    }
}           

GET

/api/device/props

product_key
device_name

msg		success
props		裝置屬性

http://localhost:7001/api/device/props?product_key=xxxxxxxxxx&device_name=nodemcu_01           

code: 200           

{
    "msg": "success",
    "props": "{\"RGBColor\":{\"Red\":0,\"Green\":255,\"Blue\":0}}"
}           

POST

/api/device/props

product_key
device_name
items		需要設定的屬性，需要是JSON字元串

msg		success

http://localhost:7001/api/device/props           

請求參數：

{
    "product_key": "xxxxxxxxxx",
    "device_name": "nodemcu_01",
    "items": "{\"RGBColor\":{\"Red\":0,\"Green\":255,\"Blue\":0}}"
}           

code: 200           

{
    "msg": "success"
}           

GitHub

丨

加入釘釘群交流 給AliOS Tings 3.0 一顆STAR 擷取整套阿裡雲AIoT技術/産品

AliOS Things 近期内容集錦（更新中···）

相關開發者交流釘釘群

支付寶小程式