当前位置: 首页>前端>正文

uniapp控制物联网设备 uniapp能否用于物联网开发

最后,我们要构建一个uni-app,并调用云函数建立起属于自己的全平台客户端,这里只对uni-app做一个简单的介绍,Html,CSS,JS上手比较快,而uni-app在Vue.js的基础上封装了大量的函数,用起来非常方便。

1. 准备工具

HBuilderX (HBuilderX-高效极客技巧 (dcloud.io))

uni-app官方文档:什么是 uni-app - uni-app官网 (dcloud.io)

2. 项目结构

还是在上一章建立的uni-app中,直接在顶部选择运行,运行到浏览器即可看到当前的项目。uni-app为跨平台项目,运行到浏览器,项目将被编译为H5;运行到小程序模拟器,项目将被编译为对应的小程序;运行到手机或模拟器,项目将被编译为对应的应用程序。

uniapp控制物联网设备 uniapp能否用于物联网开发,uniapp控制物联网设备 uniapp能否用于物联网开发_javascript,第1张

更细致的项目结构请参照文档,在这里只说常用的:

  • pages:在这里右键可以新建页面,页面为.vue格式,一般放置在与页面名相同的文件夹下,index.vue默认为我们的主页(启动页)。
  • pages.json:可以配置启动页、页面样式、导航栏等。pages.json - uni-app官网 (dcloud.io)
  • static:这里存放所有的静态文件,如示例中的图片。
  • manifest.json:项目配置页面。

3. 页面结构

我们打开index.vue,这是这个项目的启动页,他由HTML(<template>)、JavaScript(<script>)和CSS(<style>)构成。

3.1 大体介绍

  • HTML

HTML部分非常简单,注意<template>下只能有一个容器<view>存在,里面再包裹页面的所有元素,可以看到里面有一个图片元素<image>和<view>包裹的文字元素<text>。HTML 教程 | 菜鸟教程 (runoob.com)

  • JS

uni-app基于Vue,因此这一部分与Vue一致,

<script>
	export default {
		data() {
			return {
                // 此处存放页面声明的变量
				title: 'Hello'
			}
		},
		onLoad() {
			// 页面在加载时需要执行的函数和任务 
		},
		methods: {
			// 页面声明的函数
		}
	}
</script>

JavaScript 教程 | 菜鸟教程 (runoob.com)

介绍 — Vue.js (vuejs.org)

  • CSS

此部分请参考教程。CSS 教程 | 菜鸟教程 (runoob.com)

3.2 HTML变量引用

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

在HTML部分,可以看到文本元素内存在一个{{title}},像两个大括号“{{}}”这样的形式是用来引用JS中data部分声明的页面变量的,在JS中,可以看到声明了一个title变量,title为字符串类型,值为‘hello’,因此在编译后,原本的“{{title}}”会变为title的值,也即hello。

3.3 云函数的调用

下面我们在JS中methods部分声明一个函数,来调用云函数,并将云函数的返回值打印到控制台。

首先在使用其他浏览器通过本项目调用云函数访问其他服务器时,要配置跨域配置,进入服务空间 - uniCloud (dcloud.net.cn),选择项目所在的服务空间,左边栏选择跨域配置,添加域名“iot.cn-shanghai.aliyuncs.com”即可。

先把JS部分添加一个函数IOT_QueryDevice(),通过封装好的函数uniCloud.callFunction()来调用上一章我们创建的名为“QueryDevice”的云函数,使用callback方法,函数调用成功后执行success内的任务,即打印云函数的返回值。开发云函数 - uni-app官网 (dcloud.net.cn)

但是目前这个函数生命好后还没有被页面调用,因此我们在页面加载时执行此函数,也即在onLoad()里调用,这里要特别注意,在Vue.js中,要调用所有在methods中声明的函数和在data中声明的变量,需要为this.xxx的格式,同时要注意在callback异步中的调用方法(即你所使用的封装好的函数使用callback方法,success中的调用)还有所不同,下一节会提到

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				Devices :[]
			}
		},
		onLoad() {
			this.IOT_QueryDevice()
		},
		methods: {
			IOT_QueryDevice(){
				uniCloud.callFunction({
					name: 'QueryDevice',
					success: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

在控制台中,我们看到了云函数返回的数据(result.Data),

uniapp控制物联网设备 uniapp能否用于物联网开发,uniapp控制物联网设备 uniapp能否用于物联网开发_javascript_02,第2张

下面我们只取得数组元素DeviceInfo部分即可,也就是

success: (res) => {
						console.log(res.result.DeviceInfo)
					}

uniapp控制物联网设备 uniapp能否用于物联网开发,uniapp控制物联网设备 uniapp能否用于物联网开发_vue.js_03,第3张

产品下只有一个设备,所以返回的数组长度为1,第0个元素即我们设备1的详细信息。

3.3 一个示例

现在构建一个页面显示产品下所有设备的名字和在线状态,我回到物联网平台多创建了两个设备,通过物联网平台的设备模拟器将他们激活。刷新H5页面,可以看到现在控制台打印出了三个设备,其中device3通过设备模拟器启动,为在线状态。

uniapp控制物联网设备 uniapp能否用于物联网开发,uniapp控制物联网设备 uniapp能否用于物联网开发_javascript_04,第4张

现在将这个数组赋值到JS中data声明的一个名为Devices的数组里,这里我们提到了刚才的异步调用问题,申明that=this,并在异步函数中改this为that即可。

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				Devices :[]
			}
		},
		onLoad() {
			this.IOT_QueryDevice()
		},
		methods: {
			IOT_QueryDevice(){
				let that = this;
				uniCloud.callFunction({
					name: 'QueryDevice',
					success: (res) => {
						console.log(res.result.DeviceInfo)
						that.Devices = res.result.DeviceInfo;
					}
				})
				console.log(this.Devices);
			}
		}
	}
</script>

下面在HTML中需要使用Vue的V-for函数,他就是一个便利,将数组中所有元素遍历。v-for的推荐格式如下,其中括号里的item为数组中所遍历到的当前元素替代名,比如我们要引用arr[i].name,遍历到arr[i]元素后,其可替代为item,index为刚才的“i”,为遍历到的元素序号,”in“后面跟的是你需要遍历的数组。最后别忘绑定一个key(:key)。介绍 — Vue.js (vuejs.org)

通过刚才控制台的日志,我们知道了返回数据的结构,设备名应该为res.result.DeviceInfo[i].DeviceName,我们将DeviceInfo赋值到Devices,又通过v-for便利元素,因此页面变量调用这里直接写{{item.DeviceName}}即可。

<template>
	<view class="content">
		<view v-for="(item, index) in Devices" :key="index">
			DeviceName:{{item.DeviceName}} , DeviceStatus  : {{item.DeviceStatus}}
		</view>
	</view>
</template>

结果展示如图。

uniapp控制物联网设备 uniapp能否用于物联网开发,uniapp控制物联网设备 uniapp能否用于物联网开发_vue.js_05,第5张

至此,从MCU+ESP8266的硬件侧,到IOT云平台+uniCloud的服务侧,再到基于uni-app的跨平台客户端,整个物联网流程讲解完毕,大家可以消化吸收,通过文章给出的大量链接自行拓展学习。整个专栏六篇文章用了两天的时间写完


https://www.xamrdz.com/web/2k41937774.html

相关文章: