微信小程序开发详解——项目结构分析和页面的框架结构MINA（MVVM）

文件结构

在我们新建小程序项目的时候，工具会默认给我们新建一些文件，这也是小程序的基本文件结构。除了一些基本结构以外，我们可以根据自己的需求新建目录。

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

1.一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑,设置全局属性、方法，小程序的生命周期
app.json	是	小程序公共设置，所有的页面必须在这里注册，
app.wxss	否	小程序公共样式表

2.一个小程序页面由四个文件组成，分别是：

文件	必填	作用
js	是	页面逻辑，页面的生命周期
wxml	是	页面结构
wxss	否	页面样式表，如果和app.wxss配置不同，则会覆盖app.wxss中的属性设置，但是仅仅只影响所在的页面
json	否	页面配置

js用于处理页面逻辑，网络请求，数据处理

wxml和wxss共同渲染页面。

3.小程序页面设计的框架结构MINA（MVVM）

MINA(MINA IS NOT APP)就是微信小程序开发使用的框架。

基本工作原理

MINA的核心是一个响应的数据绑定系统。

整个系统分为两块：视图层(View) 和 逻辑层(App Service)。

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

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

<!--视图层 -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

//  App Service
// 初始数据创建
var helloData = {
name: 'WeChat'
}

// 注册页面.
Page({
data: helloData,
changeName: function(e) {
this.setData({
name: 'MINA'
})
}
})

开发者通过MINA将逻辑层数据中的name与视图层的name进行了绑定，所以在页面一打开的时候会显示Hello WeChat!

当点击按钮的时候，视图层会发送changeName的事件给逻辑层，逻辑层找到对应的事件处理函数

逻辑层执行了setData的操作，将name从weChat变为MINA，因为该数据和视图层已经绑定了，从而视图层会自动响应改变为Hello MINA! 。

简单来说，视图层中绑定了name，在逻辑层中只需要对绑定的name操作就行了，而无需再获取”DOM对象”,因为这部分关联工作MINA 已经做好了。

MINA是腾讯给微信小程序命名的框架，其实他实际上应用的是目前IT界最被推崇的MVVM模式。首先他是将逻辑层数据中的name与视图层的name进行了绑定，当逻辑层中name的值发生变化的时候，视图层的值也会随之变化。然后视图层的点击事件changeName也是和逻辑层的changeName绑定的，当点击视图按钮的时候，逻辑层的changeName方法会响应并改变逻辑层的数据，视图层的数据又随之变化。所以MINA框架中体现了MVVM的设计思想。