微信小程序（二、wxml语法）

WXML语法

1、数据绑定

pages\info\info.wxml

<!-- 变量渲染  插值表达式 -->
  <view>
    {{msg}}
  </view>

pages\info\info.js

// pages/info/info.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg:'好开心，又要上班了,又要上学了'
  },
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(this.data.msg);
    // this.data.msg = 'msg被修改了'
    console.log(this.data.msg);
    // 定时器
    setTimeout(()=>{
    // 渲染修改后的数据,需要通过setData
      this.setData({msg:'真的栓Q'})
    },3000)
  },
})

2、循环遍历

pages\info\info.wxml

 <!-- 2、循环遍历 -->
  <view>
    <view wx:for="{{skills}}" wx:key="index">
    <!-- 默认item代表值  index代表下标或者key -->
      {{index+1}}、{{item}}
    </view>
    <!-- 修改默认的index和item变量 -->
    <view wx:for="{{skills}}" wx:for-index="i" wx:for-item="val" wx:key="i">
    <!-- 调用修改后的下标变量和值变量 -->
      {{i+1}}、{{val}}
    </view>
  </view>

pages\info\info.js

/**
   * 页面的初始数据
   */
  data: {
    msg:'好开心，又要上班了,又要上学了',
    skills:['html','css','javascript','vue','react','miniprogram']
  },

3、判断

属性是：wx:if、wx:elif、wx:else

pages\info\info.wxml

<!-- 判断 -->
<view wx:if="{{onLine}}">在线</view>
<view wx:else>离线</view>
​
<!-- hidden 隐藏 为真隐藏 -->
<view hidden="{{onLine===false}}">在线</view>
<view hidden="{{onLine===true}}">离线</view>

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

4、模板包含和引用

4.1、包含include

①建立一个wxml模板文件 复用的代码文件

template\header.wxml

<view>
  头部内容
</view>

②哪里使用在哪里引入就可以

include标签引入的位置显示

pages\info\info.wxml

<!-- include引入文件 -->
<include src="../../template/header"></include>

4.2、import导入

import具有作用域: C引入了B，B引入了A，C可以使用B定义的template，但是不能使用A的template

template\template.wxml 定义template name名称

<template name="one">
  我是一
</template>
<template name="two">
  我很二
</template>
<template name='three'>
  我很{{msg}}
</template>

pages\info\info.wxml template标签调用 is属性对应name名称

<!-- import template使用 -->
<import src="../../template/template"/>
<!-- is和template的name对应 -->
<template is="two"/>
<template is="one"/>
<!-- 传递属性变量 并解析 -->
<template is="three" data="{{msg:'厉害'}}"/>
<template is="three" data="{{msg:'害羞'}}"/>
</view>