文件结构
在我们新建小程序项目的时候,工具会默认给我们新建一些文件,这也是小程序的基本文件结构。除了一些基本结构以外,我们可以根据自己的需求新建目录。
小程序包含一个描述整体程序的 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的设计思想。