阿里云IoT小程序应用开发和组件实践

简介: 通过实验,了解阿里云IoT小程序的应用开发的方法,了解其内置的基础组件使用,以及基于Vue.js实现可复用的自定义组件的方法。

阿里云IoT小程序应用开发和组件实践

1. 创建一个新应用,并尝试修改调整界面

  1. 安装开发调试环境,详情请参考开发环境安装
  2. 创建一个新应用并运行到模拟器。

  1. 尝试修改代码,并刷新,例如编辑src/pages/index.vue中greeting样式。

  1. 刷新之后重新运行应用。

2. 内置基础组件实践

  1. 学习IoT小程序文档中的基础组件介绍及用法,详情请参考前端基础组件

  1. 通过使用div、image以及text组件组合,以及布局样式,实现一个如下效果的九宫格界面。

代码示例:

<template>
  <div class="page">
    <div v-for="i in 9" v-bind:key="i" class="card">
      <image class="card_bg" :src="require('../../images/img.jpg')" />
      <text class="card_title">我是标题</text>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
};
</script>
<style>
.page {
  width:100%; 
  height:100%; 
  background-color:black; 
  flex-direction:row; 
  flex-wrap:wrap;
}
.card {
  width:152px; 
  height:152px; 
  margin:3px; 
  align-items:center; 
  justify-content: flex-end;
}
.card_bg {
  position:absolute; 
  width:100%; 
  height:100%; 
  border-radius: 20px;
}
.card_title {
  font-size:24px; 
  color:black;
}
</style>
  1. 将以上vue代码拷贝进自己创建的app,编译运行可显示为九宫格卡片效果(模拟器运行在480x480分辨率下)。

说明:可调整一些样式布局等,显示不同的效果。

3. 实现一个自定义组件

实践Vue.js的组件化开发方式,实现一个组件,并在多个地方复用它,详情请参考局部注册

说明:IoT小程序组件注册主要采用局部注册机制。

  1. 创建第一个自定义组件。

1.1 创建一个child.vue文件,显示外部传入的一段文本。

示例代码:

<template>
    <text>{{message}}</text>
</template>
<script>
export default {
  name: 'Child',
  props: {
    message: {                          // 属性名
      type: String,             // 属性类型
      default: '',              // 默认值
      validator(val) {      // 属性值合法验证
        return true;
      }
    },
    }
}
</script>

1.2 在应用页面vue文件中使用它。

示例代码:

<template>
  <div>
    <!-- 动态prop -->
    <Child v-bind:message="message" />
    <!-- 静态prop -->
    <Child message="message static" />
  </div>
</template>
<script>
import Child from "./child.vue";
export default {
  // 注册自定义Child组件,当前实例内可复用
  components: {
    Child,
  },
  data() {
    return {
      message: 'Hello world',
    };
  },
};
</script>

显示效果:

  1. 实现一个如下图效果的switch开关组件。

2.1 创建一个switch.vue组件。

示例代码:

<template>
  <!-- box为组件外框 -->
  <div class='box' :style="{'width': width + 'px', 'height': height + 'px', 'background-color': internalChecked ? colorChecked : colorNormal}" @click="toggle">
    <!-- button为内部圆球 -->
    <div class='button' :style="{'width': (height-4) + 'px', 'height': (height-4) + 'px', 'transform': `translateX(${internalChecked ? (width - height) + 'px' : (0 + 'px')})`, 'background-color' : colorButton}"></div>
  </div>
</template>
<script>
export default {
  name: 'FlSwitch',
  model:{           // v-model双向数据绑定
    prop: 'checked',
    event: 'change'
  },
  props: {
    colorChecked: { // 选中时的背景色
      type: String,
      default: '#108ee9'
    },
    colorNormal: {  // 默认未选中时的背景色
      type: String,
      default: '#fff'
    },
    colorButton: {  // 按钮颜色
      type: String,
      default: '#fff'
    },
    width: {        // 宽度(px),需大于高度,设置整体组件宽度
      type: Number,
      default: 50
    },
    height: {       // 高度(px),需小于宽度,设置组件高度
      type: Number,
      default: 25
    },
    checked: {      // 是否选中
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      internalChecked : this.checked
    };
  },
  methods: {
    toggle() {
      this.internalChecked = !this.internalChecked;
    }
  },
  watch: {
    checked() {
      this.internalChecked = this.checked;
    },
    internalChecked() {
      this.$emit('change', this.internalChecked);
    }
  }
}
</script>
<style scoped>
.box {  /* switch背景样式 */
  border-style: solid;
  border-width: 1px;
  border-color: #888;
  border-radius: 1000px;
  box-sizing: border-box;
  transition-property: background-color;
  transition-duration: 100ms;
  padding: 1px;
}
.button { /* switch圆球样式 */
  border-radius: 1000px;
  box-shadow: 0px 0px 5px #888;
  transition-property: transform;
  transition-duration: 100ms;
}
</style>

2.2 在应用页面vue文件中使用它。

示例代码:

<template>
  <div class="page">
    <div class="list-item">
      <text class="list-item-title">普通样式:</text>
      <FlSwitch v-model="switch1" /><text class="list-item-text">{{switch1Value}}</text>
    </div>
    <div class="list-item">
      <text class="list-item-title">双向绑定:</text>
      <FlSwitch v-model="switch1" /><text class="list-item-text">{{switch1Value}}</text>
    </div>
    <div class="list-item">
      <text class="list-item-title">修改样式:</text>
      <FlSwitch v-model="switch2" colorChecked="red" colorButton="green" colorNormal="#ccc"/><text class="list-item-text">{{switch2Value}}</text>
    </div>
    <div class="list-item">
      <text class="list-item-title">修改大小:</text>
      <FlSwitch v-model="switch3" :width="200" :height="100"/><text class="list-item-text">{{switch3Value}}</text>
    </div>
  </div>
</template>
<script>
import FlSwitch from "./switch.vue";
export default {
  components: {
    FlSwitch,
  },
  data() {
    return {
      switch1: true,
      switch2: false,
      switch3: false,
    };
  },
  computed: {
    switch1Value() {
      return this.switch1 ? 'checked' : 'unchecked';
    },
    switch2Value() {
      return this.switch2 ? 'checked' : 'unchecked';
    },
    switch3Value() {
      return this.switch3 ? 'checked' : 'unchecked';
    },
  }
};
</script>
<style scoped>
.page {
  padding: 30px;
}
.list-item {
  flex-direction: row;
  margin-bottom: 30px;
  align-items: center;
}
.list-item-title {
  font-size: 20px;
  margin-right: 30px;
  width: 100px;
}
.list-item-text {
  font-size: 20px;
  color: red;
  margin-left: 30px;
}
</style>

显示效果:

实验链接:https://developer.aliyun.com/adc/scenario/5c468c60d8ca4e7fbcdaae4b0f0d64a4

相关文章
|
4月前
|
XML 网络协议 物联网
基于surging的木舟IOT平台如何添加网络组件
【8月更文挑战第30天】在基于 Surging 的木舟 IOT 平台中添加网络组件需经历八个步骤:首先理解 Surging 及平台架构;其次明确组件需求,选择合适技术库;接着创建项目并配置;然后设计实现网络功能;再将组件集成至平台;接着进行详尽测试;最后根据反馈持续优化与维护。具体实施时应参照最新文档调整。
84 10
|
2月前
|
存储 JSON 运维
智能物联网平台:Azure IoT Hub在设备管理中的实践
【10月更文挑战第26天】随着物联网技术的发展,Azure IoT Hub成为企业管理和连接数百万台设备的强大平台。本文介绍Azure IoT Hub的设备管理功能,包括设备注册、设备孪生、直接方法和监控诊断,并通过示例代码展示其应用。
103 4
|
7月前
|
存储 小程序 前端开发
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
601 0
|
3月前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【10月更文挑战第3天】随着移动互联网的发展,小程序因便捷的用户体验和社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的WebSocket实时通信实践,包括其实时通信、长连接及双向通信的特点,并通过实时聊天、推送、游戏和监控等功能的实现,展示了WebSocket在小程序中的应用。开发者需注意安全性、性能及兼容性等问题,以保障小程序的稳定运行和用户体验。
73 7
|
5月前
|
存储 分布式计算 物联网
Apache IoTDB进行IoT相关开发实践
当今社会,物联网技术的发展带来了许多繁琐的挑战,尤其是在数据库管理系统领域,比如实时整合海量数据、处理流中的事件以及处理数据的安全性。例如,应用于智能城市的基于物联网的交通传感器可以实时生成大量的交通数据。据估计,未来5年,物联网设备的数量将达数万亿。物联网产生大量的数据,包括流数据、时间序列数据、RFID数据、传感数据等。要有效地管理这些数据,就需要使用数据库。数据库在充分处理物联网数据方面扮演着非常重要的角色。因此,适当的数据库与适当的平台同等重要。由于物联网在世界上不同的环境中运行,选择合适的数据库变得非常重要。 原创文字,IoTDB 社区可进行使用与传播 一、什么是IoTDB 我
216 9
Apache IoTDB进行IoT相关开发实践
|
5月前
|
监控 小程序 安全
小程序全栈开发中的WebSocket实时通信实践是一种高效的开发模式。
随着移动互联网的发展,小程序成为企业拓展业务的新渠道。WebSocket作为一种实时通信协议,可在小程序中实现如实时聊天、推送、游戏等功能。它支持客户端与服务器间的全双工长连接通信,优于传统HTTP。开发者需注意安全、性能及兼容性等问题,以优化体验并保障稳定运行。掌握WebSocket有助于提升小程序功能性与用户体验。
60 1
|
6月前
|
小程序
尝试使用阿里云服务器搭建微信小程序
华北电力大学核工程大一学生,出于对编程的热爱与大创项目需求,涉足微信小程序搭建。初期在实验指导下克服不熟悉编程的困难,但后期发现教程引导不足,尤其是对于代码定位缺乏清晰指引。建议加强网页图像指导,以适应不同编程水平用户,尤其是新手。
尝试使用阿里云服务器搭建微信小程序
|
6月前
|
存储 分布式计算 物联网
Apache IoTDB进行IoT相关开发实践
IoTDB是专为物联网(IoT)设计的开源时间序列数据库,提供数据收集、存储、管理和分析。它支持高效的数据写入、查询,适用于处理大规模物联网数据,包括流数据、时间序列等。IoTDB采用轻量级架构,可与Hadoop和Spark集成,支持多种存储策略,确保数据安全和高可用性。此外,它还具有InfluxDB协议适配器,允许无缝迁移和兼容InfluxDB的API和查询语法,简化物联网项目的数据管理。随着物联网设备数量的快速增长,选择适合的数据库如IoTDB对于数据管理和分析至关重要。
271 12
|
5月前
|
缓存 小程序 定位技术
深度剖析:支付宝小程序走向成功的关键要素和实践路径
【8月更文挑战第27天】随着移动互联网的发展,小程序已成为各大平台不可或缺的一部分。支付宝小程序凭借其强大的生态系统和便捷服务脱颖而出。本文将通过案例和代码分析成功的支付宝小程序的打造过程:首先注重良好的用户体验,包括简洁的界面设计与快速响应;充分利用支付宝的功能如支付和地理位置服务吸引用户;进行性能优化如合理代码结构和缓存机制提升运行效率;采取精准营销策略增加用户关注度;并持续更新优化以适应市场变化和用户需求。
93 0
|
6月前
|
存储 分布式计算 物联网
Apache IoTDB进行IoT相关开发实践
The article introduces IoTDB, an open-source time-series database designed for efficient management of IoT-generated data. It addresses challenges like real-time integration of massive datasets and security. IoTDB supports high-performance storage,
163 0
Apache IoTDB进行IoT相关开发实践