微信小程序-day2

day2
1.app.json中的全局配置
pages：页面路径列表
windows：全局的默认窗口表现
tabBar：底部tab栏的表现
2.pages用于指定小程序由哪些页面组成，文件名不需要写文件后缀，框架会自动寻找
3.Windows用于设计小程序的状态栏、导航条、标题、窗口背景色
4在wxml中的具体数据的使用
1.数据绑定
wxml中的动态数据均来自对应Page的data
数据绑定使用Mustache语法(双大括号)将变量包起来
1.简单绑定
例如：<view>{{message}}</view>
Page({
data: {
message: 'Hello MINA!'
}
})
2.组件属性绑定(需要在双引号之内)
例如：<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
3.控制属性、关键字也得在双引号之内
2.列表渲染
在组件上使用wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
此时的wx:for 类似于循环
例如：
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
此段代码：显示为message:foo message:bar
1.使用 wx:for-item 可以指定数组当前元素的变量名
2.使用 wx:for-index 可以指定数组当前下标的变量名
例如：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
循环数组array中的数据，将分别命名为idx,itemName
3.条件渲染
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
当然也能添加else块
4.模板
WXML提供模板(template),可以在模板中定义代码片段，然后在不同的地方调用
1.首先定义模板：
使用name属性，作为模板的名字，然后在template中定义代码片段
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
2.模板的使用：
使用is属性，声明需要使用的模板，然后将模板所需的data传入
<template is="msgItem" data="{{...item}}"/>
5.引用
WXML 提供两种文件引用方式import和include
1.import
使用：
import可以在该文件中使用目标文件定义的template，如：
在item.wxml中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在index.wxml中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
简易的解释就是：使用别人的东西必须声明：这里使用
<import src="item.wxml"/>
作用域：
C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template
简单说法：导入谁，使用谁
2.include
include可以将目标文件除了<template/><wxs/>外的整个代码引入，相当于是拷贝到 include 位置
使用：
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>