组件模版和样式

说明

• 组件是视图层的基本组成单元。
• 组件是一个单独且可复用的功能模块的封装。
• 一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。
• 根节点为  <template>，这个  <template>  下只能且必须有一个根  <view>  组件。这是vue 单文件组件规范 (opens new window)。
• 一个组件的 data 选项必须是一个函数。

下面是一个基本组件示例，在根<view>组件下再次引入一个<view>组件，并给组件的 text 区绑定一个 data。

<template>
  <view>
    <view>{{ userName }}</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      userName: "foo",
    };
  },
};
</script>
<style>
// 样式
</style>

模版

像 vue 规范一样，在 template 中编写该组件的视图模版，但又有不同之处，如标签应当使用小程序规范的组件

<template>
  <view class="container">
    <view class="userinfo">
      <button bindtap="showMessage">点击按钮显示Message</button>
    </view>

    <view class="textinfo" v-if="isShowMessage">
      <text class="text">{{ message }}</text>
    </view>
  </view>
</template>

常用的标签替换如下：

• div 改成 view
• span、font 改成 text
• a 改成 navigator
• img 改成 image
• input 仅仅是输入框。 原 html 规范中 input 不仅是输入框，还有 radio、checkbox、时间、日期、文件选择功能。在小程序规范中，input 仅仅是输入框。其他功能有单独的组件或 API
• form 、button 、label 、textarea 、canvas 、video 这些还在。
• iframe 改成 web-view
• ul、li 没有了，都用 view 替代。
• audio 不再推荐使用，改成 api 方式

样式

像 vue 规范一样，在 style 中编写该组件的视图样式，可以使用 scss 与处理器写法

<style> 与以往写网页项目也有小部分不同

• * 选择器不支持
• 元素选择器里没有 body，改为了page
• 如果想使用根据屏幕宽度自适应的单位，推荐使用rpx

<style>
page{
	
}
</style>