【微信小程序_5_小程序text、button、image组件】

摘要：本文介绍微信小程序部分组件。基础内容组件包括 text（类似 span，可通过 selectable 实现长按选中文本）和 rich - text（渲染 HTML 为 WXML）。其它常用组件有 button（功能丰富，通过 open - type 调用微信功能）、image（默认宽高约 300px、240px，通过 src 显示图片，有多种 mode 属性）和 navigator（类似 a 链接），并给出相关代码示例。

一、基础内容组件

1.text 组件

• 基本介绍：类似于 HTML 中的 span 标签，是行内元素。
• 基本使用：通过设置 selectable 属性可实现长按选中文本内容的效果。

<view class="container">
  测试选中效果：
  <text selectable>12312323</text>
</view>

.container{
   
  background-color: lightskyblue;
}

2.rich - text 组件

• 基本介绍：支持把 HTML 字符串渲染为 WXML 结构。
• 基本使用：通过设置 nodes 属性节点，可把 HTML 字符串渲染为对应的 UI 结构，如应用在商品详情页的结构渲染。

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