04-微信小程序常用组件-基础组件

04-微信小程序常用组件-基础组件

文章目录

• 基础内容

微信小程序包含了六大组件： 视图容器、 基础内容、 导航、 表单、 互动和 导航。这些组件可以通过WXML和WXSS进行布局和样式设置，从而构建出丰富的小程序界面和交互体验。

• 其中，视图容器组件包括view和scroll-view等，用于实现页面的结构和滚动效果；
• 基础内容组件包括text和image等，用于显示文本和图片内容；
• 表单组件包括button、input和checkbox等，用于实现用户输入和选择；
• 互动组件包括contact和action-sheet等，用于实现用户之间的互动和操作。

基础内容

icon 图标

• 功能描述：图标组件

• 属性说明

案例代码

wxml

<view class="group">
  <icon type="success" size="20" />
  <icon type="success_no_circle" size="30" />
  <icon type="waiting" size="40" />
  <icon type="search" size="50" />
  <icon type="info" size="60" />
  <icon type="warn" size="50" />
  <icon type="cancel" size="40" />
  <icon type="download" size="20" />
</view>

• 效果图

text 文本

属性说明

Bug & Tip

1. tip: decode可以解析的有 < > & '    
2. tip: 各个操作系统的空格标准并不一致。
3. tip:text 组件内只支持 text 嵌套。
4. tip: 除了文本节点以外的其他节点都无法长按选中。
5. bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效。

案例代码

<view class="container">
  <text>这是一段文本</text>
</view>

• 效果

progress 进度条

功能描述

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性说明

案例代码

wxml

<view>
  <progress percent="20" show-info />
  <progress percent="40" stroke-width="12" />
  <progress percent="60" color="pink" />
  <progress percent="80" active />
</view>

• 样式代码

wxss

/* pages/demo/index.wxss */
progress{
  margin: 10px
  }

• 效果图
  

下一章节 微信小程序常用组件-表单组件