微信小程序开发，第二章总结

2.1、小程序的基本目录结构

在微信小程序的基本目录结构中，项目主目录下有2个子目录(pages和utils)和4个文件(app.js、app.json、app.wxss和project.config.json)。

2.1.1、app文件

app.js—主要逻辑文件、app.json—全局配置信息、app.wxss—样式
在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

2.1.2、project.config.json文件

project.config.json文件是项目配置文件，包含项目名称、AppID等相关信息

2.1.3、pages文件夹

有两个子目录，分别是index和logs，每个子目录中保存一个相关文件。一个页面包含4个不同的扩展名（.wxml\.wxss\.js\.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按规定，同一个页面的4个文件必须具有相同的路径与文件夹。

2.1.4、utils文件夹

用来存放一些公共的.js文件，当某个界面需要用到utils.js函数时，可以将其引入后直接使用。

 2.2、小程序的开发框架

小程序MINA框架示意图：

 2.2.1、视图层：

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

2.2.2、逻辑层：

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。（js交互、数据处理、网络请求。）

2.2.3、数据层：

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

2.3、创建小程序界面

2.3.1、步骤一（新建项目）

打开微信开发者工具点击加号新建项目如图：

 输入AppID，把文件放入D盘并取好文件名，最后点击确定按钮。

创建后效果图：

  

2.3.2、步骤二（创建pages目录） 

新建一个pages目录如图：

 在pages目录下新建一个wjh目录，wjh目录下新建wjh.js\wjh.json\wjh.wxml\wjh.wxss。如图：

 在wjh.js里面输入代码：