微信小程序（十一）- 常见组件1

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第十一篇：关于微信小程序的常见组件1

view

view代替原来h5中的div标签，语法用法基本一致，使用如下

<view>hello~vivi!</view>

text

text是文本标签，只能嵌套text，可以长按文字可以复制（只有该标签有这个功能），可以对空格 回车 进行编码

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

使用如下：

<text>
    my name is vivi
  </text>

navigator

navigator为导航组件，类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

以下是关于open-type有效值:

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

rich-text

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

代码如下：

// 1   index.wxml  加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'></rich-text> 
 
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})