微信小程序开发基础

2.1 小程序的基本目录结构

2.1.1 主体文件

（1）app.js:小程序逻辑文件，主要用来注册小程序全局实例。

（2）app.json:小程序公共设置文件，配置小程序全局设置。

（3）app.wxss:小程序主样式表文件，类似HTML的.css文件。

2.1.2 页面文件

（1）.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

（2）.wxml文件：页面结构文件，用于设计页面的布局，数据绑定等，类似Html页面中的.html文件。

（3）.wxss文件：页面样式表文件，用于定义本页面中用到的各类样式表。

（4）.json文件：页面配置文件。

2.2 小程序的开发框架

小程序 MINA 框架将整个系统划分为视图层和逻辑层。视图层（View）由框架设计的标
签语言 WXML (Weixin Markup Language）和用于描述 WXML 组件样式的 WxSS ( Weixin
Style Sheets ）组成，它们的关系就像 HTVL 和 CSS 的关系。逻辑层（App Service）是 MINA
框架的服务中心，由微信客户端启用异步线程单独加运行。页面数据鄉定所需的数据、页
面交互处理逻辑都在逻辑层中实现。MINA 框架中的逻辑层使用 JavaScript 来编写交互逻辑
网络请求、数据处理，但不能使用 JavaScript 中的,DOM 操作。小程序中的各个页面可以通过
逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。
MINA 框架为页面组件提供了 bindtap、bindtouchstart 等与事件监听相关的属性，并与逻
辑层中的事件处理两数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA 框架还提
供了很多方法将逻辑层中的数据与页面进行单向鄉定，当逻辑层中的数据变更时，小程序会
主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能（如page 切
换、tab 切换、多媒体、网络连接等）上使用接近于系统层（Native）的组件承载。所以
小程序 MINA 框架有着接近原生 App 的运行速度，对 Android 端和 i0s 端能呈现得高度一致
并为开发者准备了完备的开发和调试工具。

小程序MINA框架示意图

2.2.1 视图层 

微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。组件是视图的基本组成单元。

2.2.2 逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有，js 脚本文件的集合。
微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层是采用 JavaSeript 编写的。在JavaSeript 的基础上，微信团
队做了适当修改，以便提高开发小程序的效率。主要修改包括：
(1）增加 app(）和Page(）方法，进行程序和页面的注册。

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

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

app.js文件内容

2.2.3 数据层

数据层在逻辑上包括页面临时数据或缓存，文件储存（本地存储）和网络存储与调用。

1.页面临时数据或缓存

在Pege(）中，使用 setData 函数将数据从逻辑层发送到视图层，同时改变对应的
this. data 的值
setData（）两数的参数接收一个对象，以 （koy,valve）的形式表示将key 在this. data 中
对应的值改变成 value。

2.文件存储（本地存储） 

wx. getStorage：获取本地数据缓存。

wx. setStorage：设置本地数据缓存。

wx. clearStorage：清理本地数据缓存。

3.网络存储和调用

上传或下载文件API接口，如下：

wx. request：发起网络请。
wx. uploadFile：上传文件。