最后,我们要构建一个uni-app,并调用云函数建立起属于自己的全平台客户端,这里只对uni-app做一个简单的介绍,Html,CSS,JS上手比较快,而uni-app在Vue.js的基础上封装了大量的函数,用起来非常方便。
HBuilderX (HBuilderX-高效极客技巧 (dcloud.io))
uni-app官方文档:什么是 uni-app - uni-app官网 (dcloud.io)
2. 项目结构
还是在上一章建立的uni-app中,直接在顶部选择运行,运行到浏览器即可看到当前的项目。uni-app为跨平台项目,运行到浏览器,项目将被编译为H5;运行到小程序模拟器,项目将被编译为对应的小程序;运行到手机或模拟器,项目将被编译为对应的应用程序。
更细致的项目结构请参照文档,在这里只说常用的:
- 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),
下面我们只取得数组元素DeviceInfo部分即可,也就是
success: (res) => {
console.log(res.result.DeviceInfo)
}
产品下只有一个设备,所以返回的数组长度为1,第0个元素即我们设备1的详细信息。
3.3 一个示例
现在构建一个页面显示产品下所有设备的名字和在线状态,我回到物联网平台多创建了两个设备,通过物联网平台的设备模拟器将他们激活。刷新H5页面,可以看到现在控制台打印出了三个设备,其中device3通过设备模拟器启动,为在线状态。
现在将这个数组赋值到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>
结果展示如图。
至此,从MCU+ESP8266的硬件侧,到IOT云平台+uniCloud的服务侧,再到基于uni-app的跨平台客户端,整个物联网流程讲解完毕,大家可以消化吸收,通过文章给出的大量链接自行拓展学习。整个专栏六篇文章用了两天的时间写完