小程序开发之框架初览，视图层 WXML 与 WXSS 的基本用法
概要
经过 上篇 的操作，我们已经得到一个小程序的 Hello World，那么这一篇就来进一步了解微信小程序的开发框架。
有很长一段时间，我都误以为前端所说的”框架“类似 android 开发中第三方库，可以直接被引入到项目中，并且其代码结构是独立于其他项目代码的。
其实，这里的开发框架还是指框架（Framework），即是整个或部分系统的可重用设计，阐明应用结构间各部件的协助关系，相当于应用骨架。那么，小程序框架完成了那些工作，以及我还需要做什么才能实现一个完整的符合业务需求的小程序呢？
先看看微信官方文档中对小程序开发框架的描述。
小程序框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
也就是说，对于小程序框架，我需要了解wxml 与 wxss的基本构成与使用方法，JavaScript 的基础语法，了解视图层与逻辑层的数据通信机制。
本篇先从视图层 wxml 与 wxss 开始。
视图层之 wxml
wxml 类似 android 中的 XML，为构建页面服务，但语法更类似于 HTML。
wxml 之数据绑定
- 简单绑定
将对应页面的.js文件中 data 中的数据绑定到页面对应位置。
<!--index.xml--->
<view>{{ message }}</view>
//index.js
Page({
data: {
message: 'Hello World!'
}
})
还可以对组件的属性绑定，关键字绑定，if 条件绑定等，以及进行简单的运算，组合与拆分新的对象和数组等。
只要符合以上形式，.wxml文件中，用双括号包围变量名，.js文件中写明变量值即可
注意： wxml 中双引号和括号间最好不要有空格。
wxml之列表渲染
使用 wx:for="{{array}}"，可以用该数组数据反复渲染子项，构建列表 。
子项默认下表名index,默认变量名item，使用 wx:for-item ， wx:for-index 可修改
<!---index.xml-->
<view wx:for="{{array}}" wx:for-index="no" wx:for-item = "each">
{{no}}: {{each.message}}
</view>
//index.js
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
注意：不设置 wx:key 会出现 warning
如果列表会动态改变而且希望保留列表各子项的状态，可以设置 wx:key作为子项的唯一标识。
当子项为唯一字符串或数字时，可以使用"*this"作为 key 的值；或者可以使用子项的某个属性名作为 key 的值，该属性值必须是唯一字符串或者数字，而且不能动态改变
如果是静态列表，或顺序无所谓，可以忽略此 warning
wxml之条件渲染
只有值为真时，内容才会被渲染，相比 hidden，无论是否为真都会渲染，更节约初次渲染时间，但 if 的切换消耗较大。因此，如果值不会发生频繁的切换用 if 较好，否则应使用 hidden。
<view wx:if="{{ture_or_false}}">True</view>
wxml 之模板
使用模板可以提高代码复用性，在开发中是大家都喜闻乐见的一种做法。
- 定义模板，使用name为模板命名
<!---banner.xml-->
<template name="banner">
<view>
<text>Title: {{title}}</text>
</view>
</template>
- 使用模板，利用 is 属性声明所使用的模板，如模板不在当前目录，需要使用 <import> 标签引入
<improt src = "banner.xml"/>
<template is = "banner" data = "{{title}}">
- 定义数据，在上述 xml 对应的.js的 data 中定义需要的值
data: {
title:'这是个大新闻'
}
template 存在作用域限制，如 a 引用 b，b 再引用 c，a 中不会出现 c 模板定义的内容，这样的设计是为了避免互相引用陷入死循环。如果实在是需要嵌套引用，可以使用 <include> 标签。<include> 可以引入目标文件除模板外所有内容，等于复制原文件代码，与 android 开发 xml 文件的 <include >效果相似。
视图层之WXSS
与 css 非常相似，有部分扩充。
- 尺寸：使用了一种名为“响应式像素”的单位，即rpx（responsive pixel） 可以根据屏幕宽度进行自适应，并规定屏幕宽始终为750rpx。在 Ipone6 屏幕下，1rpx = 0.5px
- 外联引入：使用 @import xxx.wxss；可引入外部 wxss 文件，增加代码可重用性
- 内联引入：各组件可使用 class 定义静态样式，style 定义动态样式，一般不将静态样式写入 style，以免影响渲染速度
<!---index.xml-->
<view style = "color:{{color}};"/>
//index.js
data:{
color:'red'
}
WXSS 之选择器
我理解的选择器其实就是样式的作用范围，可以用此一次性设置小到一个组件，大到一类或几类组件的样式。
最常用的操作,直接指定控件 class 值，在 wxss 为该 class 指定样式
<view class = "a"/>
.a{
border：#ffffff
}
小结
本篇梳理了小程序框架中视图层 wxml 与 wxss 的功能与使用，下篇进入逻辑层
京公网安备 11010502036488号