微信小程序 筆記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
  },