[toc]

6、rich-text

富文本标签
可以将字符串解析成 对应标签,类似 vue中 v--html 功能

属性类型默认值必填说明最低版本
nodesarray/string[]节点列表/HTML String1.4.0
spacestring 显示连续空格2.4.1

pace 的合法值

说明最低版本
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

image.png

// pages/demo/demo.js
Page({
   data: {
     nodes: [{
       name: 'div',
       attrs: {
         class: 'div_class',
         style: 'line-height: 60px; color: red;'
      },
       children: [{
         type: 'text',
         text: 'Hello World!'
      }]
    }],
    html:"<div><span>hello MINA</span></div>"

  },
   tap() {
     console.log('tap')
  }
 })
<!--pages/demo/demo.wxml-->
<!-- 1   index.wxml 加载 节点数组  -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<rich-text nodes="{{html}}" bindtap="tap"></rich-text>

image.png

nodes属性

现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点 元素节点:type = node*

属性说明类型必填备注
name标签名string支持部分受信任的 HTML 节点
attrs属性object支持部分受信任的属性,遵循 Pascal 命名法
children子节点列表array结构和 nodes 一致

文本节点:type = text*

属性说明类型必填备注
text文本string支持entities

Bug & Tip

  1. tip: nodes 不推荐使用 String 类型,性能会有所下降。
  2. tip: rich-text 组件内屏蔽所有节点的事件。
  3. tip: attrs 属性不支持 id ,支持 class 。
  4. tip: name 属性大小写不敏感。
  5. tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
  6. tip: img 标签仅支持网络图片。
  7. tip: 如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

7、button

image.png

属性类型默认值必填说明最低版本
sizestringdefault按钮的大小1.0.0
typestringdefault按钮的样式类型1.0.0
plainbooleanfalse按钮是否镂空,背景色透明1.0.0
disabledbooleanfalse是否禁用1.0.0
loadingbooleanfalse名称前是否带 loading 图标1.0.0
form-typestring 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件1.0.0
open-typestring 微信开放能力1.1.0

size 的合法值

说明最低版本
default默认大小
mini小尺寸

type 的合法值

说明最低版本
primary绿色
default白色
warn红色

form-type 的合法值

说明最低版本
submit提交表单
reset重置表单

open-type 的合法值

说明最低版本
contact打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明小程序插件中不能使用1.1.0
share触发用户转发,使用前建议先阅读使用指引1.2.0
getPhoneNumber获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明小程序插件中不能使用1.2.0
getUserInfo获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 (小程序插件中不能使用1.3.0
launchApp打开APP,可以通过app-parameter属性设定向APP传的参数具体说明1.9.5
openSetting打开授权设置页2.0.7
feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0

lang 的合法值

说明最低版本
en英文
zh_CN简体中文
zh_TW繁体中文

Bug & Tip

  1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  2. tip: bindgetphonenumber 从1.2.0 开始支持,但是在1.5.3以下版本中无法使用wx.canIUse进行检测,建议使用基础库版本进行判断。
  3. tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。
  4. tip: 从 2.1.0 起,button 可作为原生组件的子节点嵌入,以便在原生组件上使用 open-type 的能力。
  5. tip: 目前设置了 form-typebutton 只会对当前组件中的 form 有效。因而,将 button 封装在自定义组件中,而 form 在自定义组件外,将会使这个 buttonform-type 失效。

8、icon

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

属性类型默认值必填说明最低版本
typestring icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear1.0.0
sizenumber/string23icon的大小1.0.0
colorstring icon的颜色,同css的color1.0.0
// pages/demo/demo.js
Page({
   data: {
    icons:[
      "success",
      "success_no_circle",
      "info", 
      "warn", 
      "waiting", 
      "cancel", 
      "download", 
      "search", 
      "clear"
    ]
  }
 })
<!--pages/demo/demo.wxml-->
<block wx:for="{{icons}}" wx:key="*this">
  <icon type="{{item}}" size="50px"></icon>
</block>

image.png

9、radio

单选项

需要搭配 radio-group ⼀起使⽤

属性类型默认值必填说明最低版本
valuestring radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value1.0.0
checkedbooleanfalse当前是否选中1.0.0
disabledbooleanfalse是否禁用1.0.0
colorstring#09BB07radio的颜色,同css的color1.0.0
<!--pages/demo/demo.wxml-->
<!-- 单独使用可以全部选中、需要配合radio-group使用 -->
<radio class="r1">香蕉</radio>
<radio class="r2">苹果</radio>

<radio-group>
  <radio class="r1">香蕉</radio>
  <radio class="r2">苹果</radio>
</radio-group>

image.png

10、checkbox

需要搭配 checkbox-group ⼀起使⽤

<!--pages/demo/demo.wxml-->

<checkbox-group>
  <checkbox>香蕉</checkbox>
  <checkbox>苹果</checkbox> 
</checkbox-group>

image.png

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。