微信小程序学习七 视图层wxml语法

微信小程序的wxml语法和vue的挺像

数据绑定

wxml

<view> {{message}} </view>

js

Page({
 data:{
    message:"hello mina"
  }
})

列表渲染

<!--wxml-->使用wx:item 指定遍历项得别名，使用wx:index来指定遍历项的索引别名 使用wx:key指定来指定遍历项的标识符，默认得遍历项的别名为item，索引别名为index
<view wx:for="{{array}}"> {{item}}{{index}} </view>

// page.js

Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

1. key的作用是
2. 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
3. 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

条件渲染

<!--wxml-->
<view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view>
<view wx:elif="{{view == ‘APP‘}}"> APP </view>
<view wx:else="{{view == ‘MINA‘}}"> MINA </view>

// page.js
Page({
  data: {
    view: ‘MINA‘
  }
})

模板

<!--pages/index/index.wxml-->
<view>
//使用模板 使用模板时数据源的名字要和定义时一致
  <template is="first_temp" data="{{msg}}"></template>
</view>
//定义模板 定义模板时使用的时msg
<template name="first_temp">
   <view>
     {{msg}}
   </view>
</template>

模板的数据值不由page中的data项决定而是由使用模板标签的data属性决定,并且再使用模板时添加的数据源必须和模板定义时的数据名一致

多个数据可以由{{data1,data2,data3}}的形式给过来

也可以由解构的方式传递

<!--pages/index/index.wxml-->
<view>
//使用模板  datas={a:"a",b:"b"}
  <template is="first_temp" data="{{...datas,msg}}"></template>
</view>
//定义模板
<template name="first_temp">
   <view>
     {{msg}}
   </view>
   <view>
     {{a}}
   </view>
  <view>
     {{b}}
   </view>
</template>

如果使用单独的文件创建template，择需要在使用模板的的地方引入，才能使用

新建一个文件夹temp0，下面放入temp0.wxml temp0.wxss，模板文件只需要建立两个文件即可，其余的js，json没有用

temp0

temp.wxml

<template name="temp">
 <view>
   {{index}}
</view>
</template>

使用模板的idnex.wxml

<import src="../../template/temp0/temp.wxml"/>//引入模板
<view>
//使用模板 is="定义时模板的name"
 <template is="temp" data="{{index}}" wx:for="{{[1,2,3,4,5,6]}}" wx:key="{{index}}"/>
</view>

然后再再index.wxss中将temp0.wxss引入，也可以全局引入temp.wxss其目的就是能够使temp0.wxss样式生效

index.wxss

view{
  color: red;
}

请注意import引入模板存在作用域，假定有三个模板a、b、c，再a中import了b，再b中import了c，那么在a中只能使用

<import src="b"/>
<template is="b"/>//是可以的
<template is="c"/>//是不行的，import只会引入b，要使用c必须import c

个人还是比较推荐使用组件而非模板

值得一提的是

在小程序中还有另一种include引入方式，这种引入方式相当将代码于copy至指定的位置，但是被template和wxs标签所包裹的代码并不会拷贝

原文地址：https://www.cnblogs.com/wrhbk/p/12103496.html