微信小程序常用组件实战

一 常用的基础内容组件

1 text

• 文本组件

• 类似于 HTML 中的 span 标签，是一个行内元素

2 rich-text

• 富文本组件

• 支持把 HTML 字符串渲染为 WXML 结构

二 text 组件的基本使用

通过 text 组件的 selectable 属性，实现长按选中文本内容的效果。

1 布局

<!-- 常用的基础内容组件 text 和 rich-text 的用法 -->
<view>
  手机号支持长按选中效果
  <text selectable>13800005056</text>
</view>

2 测试效果

三 rich-text 组件的基本使用

通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构。

1 布局

<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

2 测试

四 其它常用组件

1 button

• 按钮组件

• 功能比 HTML 中的 button 按钮丰富

• 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

2 image

• 图片组件

• image 组件默认宽度约 300px、高度约 240px

3 navigator

1. 页面导航组件

2. 类似于 HTML 中的 a 链接

五 button 按钮的基本使用

1 代码

<!-- 按钮组件的基本使用 -->

<!-- 通过 type 属性指定按钮颜色类型 -->

<button>普通按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button>

<!-- size="mini" 小尺寸按钮 -->

<button size="mini">普通按钮</button>

<button type="primary" size="mini">主色调按钮</button>

<button type="warn" size="mini">警告按钮</button>

<!-- plain 镂空按钮 -->

<button size="mini" plain>普通按钮</button>

<button type="primary" size="mini" plain>主色调按钮</button>

<button type="warn" size="mini" plain>警告按钮</button>

2 测试

六 image 基本使用

1 代码

<image></image>

<image src="/images/1.png" mode="widthFix"></image>

2 测试

3 image 组件的 mode 属性

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：