uniapp vue2 连接阿里云物联网服务器的方法

本文介绍了如何在Vue项目中集成阿里云物联网设备SDK,包括从官方教程导入库、在`main.js`中设置设备连接和监听事件,以及在页面上实现消息发送功能。
摘要由CSDN通过智能技术生成

一、装官方的链接包:alibabacloud-iot-device-sdk

第一种方法(阿里云官方教程):https://help.aliyun.com/document_detail/96618.html?spm=a2c4g.11186623.0.0.11a233e4noa08J

第二:直接下包到uni_moudles里调用js文件 链接: https://pan.baidu.com/s/1FqkBJkcA_rdK96UTq2GWjQ?pwd=8888 提取码: 8888 

二、main.js

import Vue from 'vue'
// import uView from '@/uni_modules/uview-ui'
// Vue.use(uView)
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

// 将 device 设置为全局变量
window.device = null;

const app = new Vue({
  ...App,
  data() {
    return {
      message: '' // 将设备消息显示在页面上
    };
  },
  mounted() {
    // node引入包名.
    const iot = require('./uni_modules/alibabacloud-iot-device-sdk/dist/alibabacloud-iot-device-sdk.js');
    //这里我的包直接拉到uni_modules里面用的,此外vue3千万别试这个代码,会一直报require的 
   //错并且官方没有给出解决方案
    //如果用官方的教程成功了那就用下面这句
    //const iot = require('alibabacloud-iot-device-sdk');

    // 创建iot.device对象将会发起到阿里云IoT的连接
    window.device = iot.device({
        productKey: "ProductKey", // 将<productKey>修改为实际产品的ProductKey
        deviceName: "deviceName", // 将<deviceName>修改为实际设备的DeviceName
        deviceSecret: "<deviceSecret>", // 将<deviceSecret>修改为实际设备的DeviceSecret
    });

    // 监听connect事件
    device.on('connect', () => {
        // 将<productKey> <deviceName>修改为实际值
        device.subscribe('/ProductKey/deviceName/user/get');
        console.log('connect successfully!');
        // device.publish('/ProductKey/deviceName/user/update', 'hello world!');
    });

    // 监听message事件
    // device.on('message', (topic, payload) => {
    //     console.log(topic, payload.toString());
    //     // 将设备消息显示在页面上
    //     this.message = payload.toString();
    // });

    // 上报设备属性
    device.postProps({
        LightStatus: 1
    }, (res) => {
        console.log(res);
    });

    // 监听云端设置属性服务消息,示例代码为一个灯
    // device.onProps((cmd) => {
    //     console.log('>>>onProps', cmd); // 打印完整的属性设置消息
    //     for (var key in cmd.params) {
    //         if (key == 'LightStatus') { // 判断是否设置的是LightSwitch属性
    //             console.log('set property ', key);
    //             // 示例代码将云端设置的属性在本地进行保存,实际产品开发时需要修改为去将灯打开或者关闭
    //             lightState = cmd.params.LightSwitch;
    //             // 本地设置完毕之后,将更新后的状态报告给云端。
    //             // 注意:云端下发命令后,云端属性的值并不会改变,云端需要等待来自设备端的属性上报
    //             device.postProps({ 'LightSwitch': lightState });
    //         }
    //     }
    // });
  }
})

app.$mount()

三、页面调用

<template>
  <div>
    <h1>Device Message: {{ message }}</h1>
    <button @click="sendMessage_led1">Send Message to Device</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 从设备接收的消息将在这里显示
                 //但是我没写函数,以后可能会更新
    };
  },
  methods: {
		sendMessage_led1() {
		  // 向设备发送 JSON 格式的消息
		  const messageToSend = {
			led1: '1',
			led2: '3'
		  };
		  const topic = "/ProductKey/deviceName/user/update"; // 指定要发送的主题
		  device.publish(topic, JSON.stringify(messageToSend)); // 发布消息到指定主题
		  console.log("Message sent to device:", messageToSend);
		},
		sendMessage_led2() {
		  // 向设备发送 JSON 格式的消息
		  const messageToSend = {
			led1: '3',
			led2: '1'
		  };
		  const topic = "/ProductKey/deviceName/user/update"; // 指定要发送的主题
		  device.publish(topic, JSON.stringify(messageToSend)); // 发布消息到指定主题
		  console.log("Message sent to device:", messageToSend);
		}		
  }
}
</script>

<style>
/* 可选的样式 */
</style>

我这边做了一个点击按钮就可以发送数据到服务器的例子

四、效果展示

点击按钮显示这个,在阿里云服务器也可以看到日志了

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值