阿里云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>
显示效果：
实验链接：https://developer.aliyun.com/adc/scenario/5c468c60d8ca4e7fbcdaae4b0f0d64a4
