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
<!-- 根据isOnLine状态显示在线或者离线 --> <view> <view wx:if="{{isOnLine}}"> 在线 </view> <view wx:else> 离线 </view> </view>
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>
