微信小程序学习笔记-第六周-自定义模板引入、wx:for嵌套使用

小笔记

1.微信开发通常拿iphone6的屏幕大小，此时的 1rpx = 0.5px，便于大家开发

1.模板引入

新建模板文件tmpl.wxml：
比如在index.wxml中引用：

<import src="../template/tmpl.wxml" />
<template is="tmp1" data="{{text: 'template test'}}"></template>
<template is="tmp2" data="{{...student}}"></template>

我这里写了两个模板，使用{{}}，为动态数据，使用的时候带个data传入数据，其中{{...student}}代表在当前js文件下的data中找student变量：

结果：

2.样式引入

同样自定义a.wxss样式文件，在index.wxss中引入：

@import "../template/a.wxss";

引入后内容就会改变：

多层wx:for的嵌套

这里用两层的wx:for为例
js的data里面定义list:

wxml:

<view class="num_5" wx:for="{{list}}" wx:key="group{{index}}" wx:for-item="group">
  <view class="body" wx:for="{{group}}" wx:key="row{{index}}" wx:for-item="item">
    <image class="demo a" src="{{item.img}}"></image>
    <view class="demo b">{{item.name}}</view>
    <image class="demo c" src="../../libs/2020326/arrow.png"></image>
  </view>
</view>

微信小程序里面可以不写wx:key，但是调试栏会有黄色文字提示不爽！
第一层的wx:for-item里面的group意思是给本次循环的数组取别名,便于下一层的循环，来到第二层循环就wx:for="{{group}}"， 给当前遍历的数组取名item，不写的话其实是默认item, 单层循环可以不写，但是多层一定要写清楚!!!
结果：