微信小程序视图层WXML/WXSS--数据绑定

小程序使用的是MINA框架，目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。
MINA的核心是一个响应的数据绑定系统。
整个系统分为两块：视图层（view,描述语言wxml和wxss）和逻辑层（App Serice，基于 JavaScript）。

视图层是由WXSS和WXML编写的，由组件显示内容。
样式语言WXSS(WeiXin Style Sheets)：描述组件样式，决定组件如何显示。

• app.wxss和每个page中的WXSS覆盖关系是：如果有同名rule,page就会覆盖app的样式。而在CSS中，同名的rul的样式只会合并。
• 定义在app.wxss中的样式，为全局样式，作用域每一个页面，再page的WXSS中的样式为局部样式，只作用于对应的页面。
• WXSS不支持大括号嵌套（{{}}）,所有key-frames、CSS animation不可用。但是transition可用。
• WXSS不能使用本地资源。例如设置background-image属性时，可以使用网络图片、base64或标签。

• WXSS的rule不支持级联，如.class p 不支持引入字体

  WXSS有3种引入方式：

• 默认方式：默认样式文件是 [页面名].wxss，页面特有的样式都可以写在该文件里；
• 样式导入：使用@import语句，导入外联样式表；
• 内联样式：使用style、class属性控制组件的样式。

标签语言WXML ：结合基础组件、事件系统可以构建出页面结构
数据绑定与渲染 ，WXML中的动态数据均来自对应的page的data,小程序框架采用了简单的使用方法，子啊view中添加一段可变的字符串，用大括号（{{}}）将变量括起来，即可

<view>{{message}}view>

//在js文件中给message赋值即可
Page({
    data:{
        message:'hello world!'
        }
    })

//如果需要改变message的值，就可以用setData方法
this.setData({
    message:'Hello 小程序！'
})

WXML中的组几点说明：
1）组件代替了HTML中大部分标签。
2）只有标签可以长按选中文本，组件不允许嵌套使用，支持转义字符 “/”。
3）目前只能小程序内部跳转导航，不能跳转到外部url。

1. 数据绑定
WXML中的动态数据均来自对应页面js文件中page的data.

• 数据简单绑定–作为内容使用

<view>{{text}}view>

//data.js
Page({
    data: {
        text: '欢迎学习微信小程序开发！'
            }
})

- 作为组件属性（需要在双引号之内）使用，比如动态定义控件view的id

<view id='item-{{id}}'>view>

//data.js
Page({
    data: {
        id:0
            }
})

- 作为控制属性（需要在双引号内）使用，条件判断是否显示控件

<view wx:if="{{condition}}">欢迎学习微信小程序开发view>

//data.js
Page({
    data: {
        condition:false
            }
})

• 作为关键字（需要在双引号之内）使用

<checkbox checked='{{true}}'>checkbox>