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

Posted 你看得到我?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序学习七 视图层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标签所包裹的代码并不会拷贝

  

以上是关于微信小程序学习七 视图层wxml语法的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序视图层WXML_小程序条件渲染

微信小程序第七天WXML语法之模板用法

微信小程序第七天WXML语法之模板用法

微信小程序视图层WXML_引用

微信小程序视图层WXML_小程序引用

微信小程序视图层WXML_事件