微信小程序 笔记2 WXML

WXML与js数据

一个示例对wxml和js里面的数据进行绑定和读取

<view><!--相当于div-->
  <text>页面内数据</text>
  <text>{{name}}</text><!--可以用双花括号从data里面取数据-->
  <text>{{age+2}}</text><!--花括号可以放表达式；注意：比较过程中尽量不用浮点型的-->
  <text>{{info.jingli}}{{jiangli[1]}}</text><!--复杂的东西可以一层层套,也可使用数组-->
</view>

//这里只放了data
data: {
    name:"我是张三",
    age:18,
    info:{
      jingli:"本科毕业"
    },
    jiangli:["一等勋章","二级勋章"]
  }

效果

数组里面套对象、对象里面套数组和上面的同理

使用数组访问.内容{{arr[0].title}}，{{obj.no1[0]}}

实际开发中复杂的数据结构是很常见的

条件渲染

wx:if语句

<view wx:if="{{false}}">
  你是帅哥
</view>
<view wx:else>
  你是美女
</view>

<!--结果：你是美女-->

注意：true或false要用括号括起来，否则当非空字符串处理，返回true

if,elif,else搭配使用

<view wx:if="{{age>18}}">
  你是帅哥
</view>
<view wx:elif="{{age==18}}">
  你是少年
</view>
<view wx:else>
  你是美女
</view>

也可以对block块添加条件渲染

列表渲染

主要是对数组的操作

<view wx:for="{{['苹果','梨','香蕉']}}"><!--外面有双引号了，里面再用就冲突了，可以使用用单引号 -->
  <text>{{index}}-----{{item}}</text>
</view>

效果：

也可以对数组下表和内容名字进行更新

<view wx:for="{{['苹果','梨','香蕉']}}" wx:for-item="con" wx:for-index="id">
  <text>{{id}}-----{{con}}</text>
</view>

也可以使用data里面的数组

九九乘法表

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}"  wx:for-item="row" class="row">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}"  wx:for-item="col" wx:if="{{col<=row}}" class="col">
  {{col}}*{{row}}={{col*row}}
  </view>
</view>

.row{
  display: flex;
  justify-content: flex-start;
  font-size: 10px
}

.row .col{
  width: 40px
}

效果

wx:key

警告里面写：列表渲染建议使用wx:key

什么时候用：数组内容会动态改变，要使用wx:key保持项目自己的特征和状态；不使用key的话会整个销毁再创建，导致性能下降

什么时候不需要：数组是静态的不需要改变，不关注顺序，就可以不适用

模板

新建一个page里面新建一个template

<template name="msg">
  <view>
    <text>你好</text>
    <text>666</text>
  </view>
</template>

在另一个wxml里面：

<import src="../temp/temp.wxml"></import>

<template is="msg"></template>

即可使用另一个模板

一般模板里面不放内容，内容可以由调用处传递

例如：

<template name="msg">
  <view>
    <text>{{info}}</text>
    <text>{{us}}</text>
  </view>
</template>

<import src="../temp/temp.wxml"></import>

<template is="msg" data="{{info:'今天晚上吃饭',us:'周杰伦'}}"></template>

include引入

和模板有点相似。但是include引入是直接性的引入，不需要填入动态数据；模板一般会传递数据。

如果一段代码不需要填入动态数据，则可以使用include。

 <!--temp.wxml-->
 <view>
    <text>老铁</text>
  </view>

<!--p.wxml-->
<include src="../temp/temp.wxml"></include>

输出结果：老铁

若想传入数据，可以直接在里面加：

<!--temp.wxml--> 
<view>
    <text>老铁</text>
    <text>{{info}}</text>
  </view>

<!--p.wxml-->
<include src="../temp/temp.wxml"></include>

//p.js
data: {
    info:666
  },