小程序视图层（xx.xml)和逻辑层(xx.js)

整个系统分为两块视图层（View）和逻辑层（App Service）

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
name: 'WeChat'
}

// Register a Page.
Page({
data: helloData,
changeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'
})
}
})

开发者通过框架将逻辑层数据中的

name

与视图层的

name

进行了绑定，所以在页面一打开的时候会显示

Hello WeChat!

当点击按钮的时候，视图层会发送

changeName

的事件给逻辑层，逻辑层找到对应的事件处理函数

逻辑层执行了

setData

的操作，将 name 从

WeChat

变为

MINA

，因为该数据和视图层已经绑定了，从而视图层会自动改变为

Hello MINA!

。

视图层为 xx.xml

逻辑层为 xx.js

读取时会先看逻辑层初始数据来填充视图层，视图层触发逻辑层中的事件，逻辑层返回并改变视图层的内容。

逻辑层(App Service)

小程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。 在 JavaScript 的基础上，我们做了一些修改，以方便地开发小程序。

增加 App 和 Page 方法，进行程序和页面的注册。

提供丰富的 API，如扫一扫，支付等微信特有能力。

每个页面有独立的作用域，并提供模块化能力。

由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。

开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

初始化数据

初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

渲染层可以通过 WXML 对数据进行绑定。

示例代码：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})

[/code]

Page.prototype.setData()

setData

函数用于将数据从逻辑层发送到视图层，同时改变对应的

this.data

的值。

注意：

直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

setData() 参数格式

接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。

其中 key 可以非常灵活，以数据路径的形式给出，如

array[2].message

，

a.b.c.d

，并且不需要在 this.data 中预先定义。

示例代码：

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

//index.js
Page({
data: {
text: 'init data',
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data'  // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})

视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息，如id, dataset, touches。

事件的使用方式

在组件中绑定一个事件处理函数。

如

bindtap

，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
tapName: function(event) {
console.log(event)
}
})

[/code]

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件：

组件是视图层的基本组成单元。

组件自带一些功能与微信风格的样式。

一个组件通常包括

开始标签

和

结束标签

，

属性

用来修饰这个组件，

内容

在两个标签之内。

<tagname property="value">
Content goes here ...
</tagename>

注意：所有组件与属性都是小写，以连字符

-

连接