一、wxml文本介绍

此处只列举了一些常用的标签
具体可查阅微信小程序开放文档

1、<text>

text 相当于 web 的 span 标签 行内元素不会换行

小程序只有 text能长按复制

<!-- 
  1 长按文字复制 selectable
  2 对文本内容进行解码 decode
 -->
<text selectable decode>&nbsp;demo&nbsp;&lt;</text>

2、<view>

view 相当于web的 div标签 块级元素会换行

<view>1</view>
<view>2</view>

3、<checkbox>

checkbox 相当于 web 的复选框

<checkbox checked="{{isGirl}}">自定义属性</checkbox>

4、<block>

block：1. 占位符的标签

2. 写代码的时候，可以看淡这标签存在

3. 页面渲染小程序会把它移除

<view>
  <block class="my_list" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
    索引： {{index}}
    --
    值：{{item.name}}
  </block>
</view>

5、<image>

1、src ：图片路径

2、默认大小是：320 * 240

3、mode 决定图片内容的适配模式

常用： 3.1、aspectFill 保持宽高比，确保图片长边显示出来

3.2、widthFix web的常用模式，指定宽，高自动适配

4、lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

<!-- 
  image 图片标签
  1 src 图片路径
 -->
 <image mode="widthFix" src="https://timgsa.baidu.com/6.jpg"> </image>

6、<swiper> / <swiper-item>

1、轮播图外层容器 swiper

2、每一个轮播项 swiper-item

3、默认样式：

width:100%

height: 150px

4、 autoplay 自动轮播

5、 interval 修改轮播时间

6、 circular 衔接轮播

7、 indicator-dots 显示小圆点

8、 indicator-color 未选择颜色

9、 indicator-active-color 选中颜色

<swiper autoplay interval="1000" circular indicator-dots>
  <swiper-item >
    <image mode="aspectFill" src="//gw.alicdn.com/imgextra/i1/1198001/O1CN01PADsTZ28yVVzly8Tp_!!1198001-0-lubanu.jpg" />
  </swiper-item>
  <swiper-item >
    <image mode="aspectFill" src="//gw.alicdn.com/imgextra/i4/176/O1CN01mKi1tW1DAeIeexZYu_!!176-0-lubanu.jpg" />
  </swiper-item>
  <swiper-item >
    <image mode="aspectFill" src="//gw.alicdn.com/imgextra/i4/65/O1CN01a4I91Y1CLoL0Gh8nC_!!65-0-lubanu.jpg" />
  </swiper-item>
</swiper>

7、<navigator>

导航组件

1、块级元素，默认换行

2、url 调整的页面路径绝对/相对路径

3、target 要跳转当前的小程序，还是其他的小程序

3.1、self：默认值，自己

3.2、minProgram 其他的小程序页面

4、open-type 跳转的方式

4.1、navigate 默认值 保留当前页面，跳转到其他页面，不能跳到tabbar页面

4.2、redirect 关闭当前页面，跳转到其他页面，不能跳到tabbar页面

4.3、switchTab 跳转到tabbar页面， 并关闭其他所有非 tabbar 页面

4.4、reLaunch 关闭所有页面， 打开到应用内的某个页面

4.5、navigateBack 返回上一个页面

4.6、exit 退出小程序

 <navigator url="../demo07/demo07">轮播图页面</navigator>
 <navigator url="../demo07/demo07" open-type="redirect">轮播图页面</navigator>
 <navigator url="../index/index" open-type="switchTab">轮播图页面</navigator>
 <navigator url="../index/index" open-type="reLaunch">轮播图页面</navigator>

8、<rich-text>

rich-text 富文本标签

1 nodes 属性来实现

1.1、接收标签字符串

1.2、接收对象数组

 <rich-text nodes="{{html}}"></rich-text>

data: {
    // 1 标签字符串 (最常用)
    // html: '<div>adad</div>'

    // 2 对象数组
    html: [
      {
        // name: 决定标签
        name: 'div',  
        // attrs 标签上的属性
        attrs: {
          class: 'mydiv',
          style: 'color:red'
        },
        // children: 子节点
        children: [
          {
            name: 'p',
            attrs: {},
            children: [
              {type: 'text',
              text: 'hello'}
            ]
          }
        ]
      }
    ]
  }

9、<button>

样式：

1、size：大小 (mini、default)

2、type：颜色(default：灰色， primary：绿色， warn：红色)

3、plain：是否镂空、背景色

4、loading：显示加载中

<button>默认按钮</button>
<button size="mini">默认按钮</button>

<button type="primary" loading="{{true}}">默认按钮</button>
<button type="warn" plain="{{true}}">默认按钮</button>

行为：

1、contact 打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从 bindcontact回调中获得具体信息，

2、share 转发当前的小程序不能分享到朋友圈

3、getPhoneNumber 获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，需要解密

1 绑定一个事件bindgetphonenumber

2 在事件的回调函数中，通过参数来获取信息

3 获取到的信息已加密

4、getUserInfo 获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息

1 类似手机号码

5、launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明

6、openSetting 打开授权设置⻚

1 只会出现用户点击过的权限

7、feedback 打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

// 获取用户的手机号码信息
  getPhoneNumber(e) {
    console.log(e)
  },
  // 获取用户信息
  getUserInfo(e) {
    console.log(e)
  }

10、<radio>

radio 单选框

1、必须 radio 和父元素 radio-group配合

2、value 选中的值

3、给radio-group 绑定change事件

4、color：选中的颜色显示

 <radio-group bindchange="handleChange">
   <radio value="male">男</radio>
   <radio value="female" color="red">女</radio>
 </radio-group>

 <view>{{gender}}</view>

data: {
    gender: ''
  },
  // 值改变事件
  handleChange(e) {
    const gender = e.detail.value;
    this.setData({
      gender
    })
  }

11、<checkbox>

复选框，具体用法类似单选框

 <checkbox-group bindchange="handleItemChange">
   <checkbox  value="{{item.value}}" wx:for="{{list}}" wx:key="id">
     {{item.name}}
   </checkbox>
 </checkbox-group>

 <view wx:for="{{checkValue}}" wx:key="item">
   {{item}}
 </view>

data: {
    // gender: ''
    list: [
      { id: 0,name: '苹果',value: 'apple'},
      { id: 1,name: '香蕉',value: 'banana'},
      { id: 2,name: '葡萄',value: 'grape'}
    ],
    checkValue: []
  },
  // 复选框值改变事件
  handleItemChange(e) {
    const value = e.detail.value;
    this.setData({
      checkValue: value
    })
  }