微信小程序常用组件实战

一 常用的基础内容组件

1 text

• 文本组件

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

2 rich-text

• 富文本组件

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

二 text 组件的基本使用

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

1 布局

<view>
  手机号支持长按选中效果
  <text selectable>13800005056text>
view>

2 测试效果

三 rich-text 组件的基本使用

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

1 布局

2 测试

四 其它常用组件

1 button

• 按钮组件

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

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

2 image

• 图片组件

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

3 navigator

1. 页面导航组件

2. 类似于 HTML 中的 a 链接

五 button 按钮的基本使用

1 代码

普通按钮

主色调按钮

警告按钮

普通按钮

主色调按钮

警告按钮

普通按钮

主色调按钮

警告按钮

2 测试

六 image 基本使用

1 代码

2 测试

3 image 组件的 mode 属性

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