Text 文本组件
Text组件 text 用于显示文本, 类似于span标签, 是行内元素。
代码示例：
<!-- text组件 --> <view>------------------ text组件 ------------------</view> <text>Hello World</text> <text user-select>{{ message }}</text> <text user-select="{{true}}">{{ message }}</text> <text decode>></text>
Button按钮组件
Button组件 button 用于创建按钮，默认块级元素 ，块级元素，独占一行。
代码示例：
<view>------------------ button组件 ------------------</view> <!-- 1.基本使用 --> <button>按钮</button> <button size="mini">size属性</button> <button size="mini" type="primary">type属性</button> <button size="mini" type="warn">type属性</button> <button size="mini" class="btn">自定义属性</button> <button size="mini" plain>plain属性</button> <button size="mini" disabled>disabled属性</button> <button size="mini" loading class="btn">loading属性</button> <button size="mini" hover-class="active">hover效果</button>
View视图组件解析
视图组件 view（块级元素，独占一行，通常用作容器组件）
代码示例：
<view>------------------ View组件 ------------------</view> <view hover-class="active">我是view组件</view> <view>哈哈哈</view>
Image图片组件
Image组件 image 用于显示图片，有如下常见属性。
代码示例：
<view>------------------ Image组件 ------------------</view> <!-- 根目录: /表示根目录 --> <!-- 1.图片的基本使用 --> <!-- image元素宽度和高度: 320x240 --> <image src="/assets/zznh.png"/> <image src="https://pic3.zhimg.com/v2-9be23000490896a1bfc1df70df50ae32_b.jpg"/> <!-- 2.图片重要的属性: mode --> <image src="/assets/zznh.png" mode="aspectFit"/> <!-- image基本都是设置widthFix --> <image src="/assets/zznh.png" mode="widthFix"/> <image src="/assets/zznh.png" mode="heightFix"/> <!--3. 选择本地图片: 将本地图片使用image展示出来 --> <button bindtap="onChooseImage">选择图片</button> <image class="img" src="{{chooseImageUrl}}" mode="widthFix"/>
onChooseImage() { wx.chooseMedia({ mediaType: "image" }).then(res => { const imagePath = res.tempFiles[0].tempFilePath this.setData({ chooseImageUrl: imagePath }) }) }
ScrollView滚动组件
scroll-view组件 scroll-view可以实现局部滚动。
PS:
实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了)
垂直方向滚动必须设置scroll-view一个高度
代码示例：
<view>------------------ scroll-view组件 ------------------</view> <!-- 上下滚动(y轴) --> <scroll-view class="container scroll-y" scroll-y> <block wx:for="{{viewColors}}" wx:key="*this"> <view class="item" style="background: {{item}};">{{item}}</view> </block> </scroll-view> <!-- 左右滚动(x轴) --> <scroll-view class="container scroll-x" scroll-x enable-flex > <block wx:for="{{viewColors}}" wx:key="*this"> <view class="item" style="background: {{item}};">{{item}}</view> </block> </scroll-view>
组件共同的属性
