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

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

2023-09-17 443

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

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

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

刷新之后重新运行应用。

2. 内置基础组件实践

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

通过使用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>

将以上vue代码拷贝进自己创建的app，编译运行可显示为九宫格卡片效果（模拟器运行在480x480分辨率下）。

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

3. 实现一个自定义组件

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

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

创建第一个自定义组件。

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>

显示效果：

实现一个如下图效果的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>