文件结构

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

小程序由一个描述整体程序的应用和多个描述各个页面的页面组成。

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

应用程序.js

是的

小程序逻辑，设置全局属性、方法，以及小程序的生命周期

应用程序.json

是的

小程序公共设置，所有页面都必须在这里注册，

应用程序.wxss

不

小程序公共样式表

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

js

是的

页面逻辑、页面生命周期

动态链接库

是的

页面结构

维克斯

不

如果页面样式表与app.wxss配置不同，则会覆盖app.wxss中的属性设置，但只影响页面

json

不

页面配置

js用于处理页面逻辑、网络请求、数据处理。wxml和wxss共同渲染页面。3.小程序页面设计框架MINA（MVVM）

MINA（MINA IS NOT APP）是用于开发微信小程序的框架。

基本工作原理

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

整个系统分为两部分：视图层（View）和逻辑层（App）。

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将逻辑层数据中的名称和视图层中的名称进行绑定，这样在页面打开的时候就会显示出来！

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

逻辑层执行将名称从 更改为 MINA 的操作。由于数据与视图层绑定，因此视图层会自动响应，更改为 MINA!。

简单来说，就是在视图层绑定名称，在逻辑层只需要对绑定的名称进行操作，而不需要获取“DOM对象”，因为MINA已经做好了这部分关联的工作。

MINA是腾讯为微信小程序命名的框架，其实它应用的是目前IT界最推崇的MVVM模式。首先它将逻辑层数据中的名字和视图层中的名字进行绑定，当逻辑层中的名字的值发生改变时，视图层的值也会随之改变。然后视图层的点击事件也和逻辑层进行绑定，当点击视图按钮时，逻辑层的方法会做出响应，并改变逻辑层的数据，视图层的数据也会随之改变。所以，MVVM的设计理念在MINA框架中得到了很好的体现。