开发搭载阿里云平台的物联网APP（支持数据接收与发送）

一、开发环境准备

工具安装
- HBuilderX：下载并安装最新版（支持Vue.js和uni-app框架）
- 阿里云IoT SDK ：使用JavaScript版SDK（如aliyun-iot-mqtt或mqtt.js）
- 插件安装 ：HBuilderX插件市场搜索安装mqtt相关插件（如mqtt-js）

项目创建

新建uni-app项目（选择默认模板）

安装依赖：

bash 复制代码

npm install aliyun-iot-device-sdk --save  # 阿里云IoT SDK
npm install mqtt --save                    # MQTT协议库

二、阿里云平台配置

创建产品与设备
- 登录阿里云IoT控制台，创建产品（如"SmartSensor"）
- 添加设备，获取设备三元组（ProductKey、DeviceName、DeviceSecret）
定义物模型
- 添加属性（如温度、湿度）和服务（如LED控制）
- 生成Alink JSON模板（用于数据格式验证）
获取连接信息
- MQTT接入地址：iot-${YourRegionId}.mqtt.aliyuncs.com
- 端口：1883（非加密）或8883（TLS加密）

三、APP核心功能实现

1. MQTT连接与认证

javascript 复制代码

// utils/mqtt.js
import mqtt from 'mqtt/dist/mqtt';

// 设备三元组
const productKey = 'a1**********';
const deviceName = 'device001';
const deviceSecret = '****************';

// 计算MQTT连接参数
const clientId = `${deviceName}|securemode=3,signmethod=hmacsha1|`;
const username = `${deviceName}&${productKey}`;
const password = CryptoJS.HmacSHA1(clientId, deviceSecret).toString(CryptoJS.enc.Hex);

// 连接阿里云
const client = mqtt.connect(`mqtt://${productKey}.iot-as-mqtt.${region}.aliyuncs.com:1883`, {
  clientId: clientId,
  username: username,
  password: password,
  keepalive: 60
});

export default client;

2. 数据接收（订阅Topic）

vue 复制代码

// pages/index/index.vue
<script>
import mqttClient from '@/utils/mqtt.js';

export default {
  data() {
    return {
      temperature: 0,
      humidity: 0
    };
  },
  mounted() {
    // 订阅设备属性上报Topic
    mqttClient.subscribe(`/${this.productKey}/${this.deviceName}/user/update`);
    
    mqttClient.on('message', (topic, message) => {
      const data = JSON.parse(message.toString());
      if (data.params) {
        this.temperature = data.params.temperature;
        this.humidity = data.params.humidity;
      }
    });
  }
}
</script>

3. 指令发送（发布到Topic）

vue 复制代码

// 发送控制指令（如打开LED）
methods: {
  sendCommand() {
    const payload = {
      id: Date.now().toString(),
      version: "1.0",
      params: {
        switch: 1  // 1表示开启，0表示关闭
      },
      method: "thing.service.property.set"
    };
    
    mqttClient.publish(
      `/${this.productKey}/${this.deviceName}/user/service/property/set`,
      JSON.stringify(payload)
  }
}

四、APP界面设计

1. 实时数据展示

vue 复制代码

<template>
  <view class="container">
    <view class="card">
      <text class="title">环境监测</text>
      <view class="data-row">
        <text>温度: {{ temperature }}℃</text>
        <text>湿度: {{ humidity }}%</text>
      </view>
    </view>
    
    <button @click="sendCommand">打开LED</button>
  </view>
</template>

<style>
.card {
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
}
.data-row {
  flex-direction: row;
  justify-content: space-between;
}
</style>

2. 历史数据查询（需配合阿里云TSDB）

javascript 复制代码

// 调用阿里云API查询历史数据
async queryHistory() {
  const res = await uni.request({
    url: 'https://iot.cn-shanghai.aliyuncs.com',
    method: 'POST',
    header: {
      'Authorization': `Bearer ${accessToken}`
    },
    data: {
      Action: 'QueryDevicePropertyData',
      ProductKey: this.productKey,
      DeviceName: this.deviceName,
      StartTime: 1625097600000,
      EndTime: 1625184000000
    }
  });
  console.log(res.data);
}

五、安全优化

设备认证
- 使用临时Token（STS Token）替代直接存储设备密钥
- 通过后端服务器动态获取连接凭证
数据加密
- 启用MQTT over TLS（端口8883）
javascript 复制代码
```
const client = mqtt.connect(`mqtts://${endpoint}:8883`, options);
```

本地存储加密

javascript 复制代码

// 使用uni-app加密存储
uni.setStorageSync('deviceInfo', encryptedData);

六、调试与发布

真机调试
- 使用HBuilderX「运行」菜单→「运行到手机或模拟器」
- 开启调试模式查看MQTT连接日志
打包发布
- 选择「发行」→「原生App-云打包」生成APK/IPA
- 配置阿里云域名白名单（防止请求被拦截）

七、扩展功能建议

消息推送：集成uniPush实现报警消息推送
多设备管理：通过设备列表动态切换连接
离线缓存：使用SQLite存储本地数据
可视化图表：引入ucharts展示历史趋势

通过此方案，可快速构建支持阿里云物联网平台双向通信的跨平台APP（兼容Android/iOS/小程序），实现设备监控与远程控制的核心功能。关键点在于正确配置MQTT连接参数和遵循阿里云Alink数据格式规范。