标签：目的 key 数据 拷贝 解构 框架 class 自身 小程序
微信小程序的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.jsPage({ data: { array: [1, 2, 3, 4, 5] } })
key的作用是
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 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标签所包裹的代码并不会拷贝
标签：目的 key 数据 拷贝 解构 框架 class 自身 小程序
原文地址：https://www.cnblogs.com/wrhbk/p/12103496.html
