第二章总结

小程序基本目录结构

在微信小程序的基本目录结构中，项目主目录下有两个子目录（pages和utils）和4个文件。

页面文件

       小程序通常是由多个页而组成的,每个页而包含4个文件,同一页面的这4个文件必须
具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时,小程序会根据
app. json设置的路径找到相对应的资源进行数据绑定。

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言WXML(WeiXin Markup Language)和用于描述 WXML组件样式的WXSS(WeiXinSnle Sheets)组成，它们的关系就像HTML和CSS的关系。逻辑层(AppService)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理，但不能使用JavaScript中的DOM操作。
视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构:wxss 文件用于描述页面的样式。

逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有,脚本文件的集合,微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层是采用JavaScmip编写的。在Javascript 的基础上，微信团队傲了适当修改，以便提高开发小程序的效率。主要修改包括:
(1)增加epp()和Page()方法，进行程序和页面的注册,
(2)提供丰富的AP1，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。
数据层

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用
1.页面临时数据或缓存
在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this. data 的值。
setData()函数的参数接收一个对象，以(key,value)的形式表示将 key 在 this. data 中对应的值改变成 value。
2.文件存储(本地存储)
使用数据API接口，如下:
获取本地数据缓存wx. getStorage
设置本地数据缓存。wx. setStorage
清理本地数据缓存wx.clearStorage
3.网络存储与调用
上传或下载文件API接口，如下:
wx.reguest 发起网络请求
wx. uploadFile 上传文件。
量wx.downloadFile 下载文件
调用 URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗日打开页面

页面结构文件

数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的 data 进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法(11)将变量或运算规则包起来
1.简单绑定
简单绑定是指使用双大括号(1111)将变量包起来，在页面中直接作为字符串输出使用简单绑定可以作用于内容、组件属性、控制属性等的输出。
2.运算
在11}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaSeript 运算规则。
示例代码如下:、

<view>算数运算：{{age+num}}</view>
  <view>逻辑运算：{{age+100==130}}</view>
  <view>三元运算：{{age==1 ? 3 : num}}</view>
 
//js
age:30,
num:100
代码结果：

页面样式文件

页面样式文件(WXSS)是基于CSS拓的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。
1.尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位px(nespnesive pixel)。WXSS规定屏幕宽度为750rpx，在系统数据绑定过程中px会按比例转化为px。例如，iPhone6的屏幕宽度为375px，即750rpx需按比例转化为375px，所以，在iPhone6中，1rpx=0.5px。
2、样式导入
为了便于管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语导人即可。
3.选择器
目前、WXSS 仅支持 CSS 中常用的选择器，如.class、#id、element、::before、:aftert 等
4.WXSS 常用属性
WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如表所示。