一、小程序的基本目录结构
1、pages：存放全部的页面文件，有两子目录index与logs
2、utils：存放一些公共的.js文件（例如：格式化时间的自定义模块）
3、app.json：小程序公共设置文件，配置小程序全局设置
4、app.js：小程序逻辑文件，用来小程序全局实例
5、app.wxss：小程序主样式表文件
6、project.config.json：项目配置文件
通常，每一个页面包含4个不同扩展名（.wxml、.wxss、.js、.json） 的文件，分别用于表示页面的结构、样式、逻辑、配置文件。
二、小程序的开发框架
1.视图层：MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示.wxml文件用于描述页面的结构； .wxss文件用于描述页面的样式。
2. 逻辑层：逻辑层用于处理事务逻辑。
3.数据层：数据层在逻辑上包括页面临时数据或缓存文件存储（本地存储）和网络存储与调用。
（1）页面临时数据或缓存
（2）文件存储（本地存储）
wx.getStorage:获取本地数据缓存
wx.setStorage:设置本地数据缓存
wx.clearStorage:清理本地数据缓存
（3）网络存储与调用
wx.request: 发起网络请求
wx.uploadFile: 上传文件
wx.downloadFile: 下载文件
调用URL的API接口，如下：
wx.navigateTo ：新窗口打开页面
wx.redirectTo: 原窗口打开页面
三、小程序的配置文件
1、小程序的全局配置保存在全局配置文件（app.json）中，用来配置页面的文件的路径（pages）、设置窗口（window）、设定网络请求API的超时时间值（networkTimeout）与配置切换页（tabBar）等。
全局配置项
全局配置文件内容结构：
{
//设置页面路径
"pages":[],
//设置默认页面的窗口表现
"window": { },
//设置底部tab的表现
"tabBar": {},
//设置网络请求AIPI的超时时间值
"networkTimeout": {},
//设置是否开启debug模式
"debug": false
}2、pages配置项：
设置pages的注意项：
（1）：数组的第一项用于设定小程序的初始页面。
（2）：在小程序中新增或减少页面时，都需要都数组进行修改。
（3）：文件名不需要写文件扩展名。
文件配置：
"pages": [
"pages/h/h",
"pages/logs/logs"
]}
3、window配置项：
window配置项负责设置小程序状态栏，导航栏，标题，窗口背景颜色的系统样式。
window配置项及其描述
window配置项：
"window": {
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
}4、tabBar配置项
tabBar配置项 当需要在程序顶部与底部设置菜单栏时，可以通过配置tabBar配置项实现。
tabBar配置项及其描述
tabBar中的list选项
tabBar配置项：
"tabBar": {
"color": "#000000"
"borderStyle": "black"
"backgroundColor": "#ffffff"
"selectedColor": "#000000"
"list": [{
"pagePath": "pagePath",
"text": "text",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath"
}]
}5、 networkTimeout配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。
networkTimeout配置项
networkTimeout配置项:
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
}6、debug配置项
debug配置项用于开启开发者工具的调试模式，默认为false。
四、逻辑层文件
小程序中逻辑层文件分为项目逻辑文件与页面逻辑文件。
1、项目逻辑文件
项目逻辑文件app.js中可以通过App（）函数注册小程序周期函数、全局属性和全局方法、已注册的小程序实例可以在其他逻辑文件中通过getApp（）获取。
项目逻辑文件配置项
2、页面逻辑文件
页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。
1、设置初始数据：设置初始数据是对页面的第一次数据绑定
2、定义当前页面的生命周期函数：在Page（）函数的参数中，可以定义当前页面的生命周期函数，函数如下：
（1）：onLoad 页面加载函数
（2）：onShow 页面显示函数
（3）：onReady 页面数据绑定函数
（4）：onHide 页面隐藏函数
（5）：onUnload 页面卸载函数
数据初始、绑定、运行结果与代码
app.josn 代码：
{
"pages": [
"pages/h/h",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序",
"navigationBarBackgroundColor": "#ffffff"
},
"tabBar": {
"list": [{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "images/a.jpg",
"selectedIconPath": "images/a.jpg"
},{
"pagePath": "pages/h/h",
"text": "页面",
"iconPath": "images/a.jpg",
"selectedIconPath": "images/a.jpg"
}]
},
"style": "v2",
"componentFramework": "glass-easel",
"lazyCodeLoading": "requiredComponents"
}h.js代码：
Page({
data:{
name:'何弃疗',
age:30,
birthday:[{year:1998},{month:11},{date:18}],
// object:{hobby:'computer'}
num:100,
students:[
{nickname:"小何",height:180,weight:150},
{nickname:"小疗",height:160,weight:100}
]
}
})h.wxml代码：
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{age+100==130}}</view>
<view>三元运算：{{age==1?3: num}}</view>
<view wx:if="age>40">1</view>
<view wx:elif="age==40">2</view>
<view wx:else>3</view>
<template name="stu">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>3、定义事件处理函数：开发者在Page（）中自定义的函数称为事件处理函数
4、使用setData更新数据：小程序在Page对象中封装了一个名为setData（）的函数，用来更新data中的数据
五、 页面结构文件
页面结构文件（wxml）是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建页面的结构，即.wxml文件。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。
1、数据绑定
（1）：简单绑定：是指用大括号（{{}}）将变量包起来，作为字符串输出使用
代码：
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>（2）：运算：做一些简单的运算（算术、逻辑、三元、字符串等运算）
代码：
<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{age+100==130}}</view>
<view>三元运算：{{age==1?3: num}}</view>2、条件数据绑定
（1）：wx:if 是指使用wx:if这个属性来判断是否数据绑定当前组件
代码：
<view wx:if="age>40">1</view>
<view wx:elif="age==40">2</view>
<view wx:else>3</view>（2）：block wx:if 是需要一个组件去控制多个组件，可以通过block包起来
代码：
<block wx:if="{{one}}">
<view wx:if="age>40">1</view>
</block>3、列表数据绑定
（1）：wx：for 用来绑定一个数组
代码：
<view wx:for="{{students}}">（2）：block wx:for 是需要一个组件去控制多个数组，可以通过block包起来
代码：
<block wx:for="{{students}}">
<view>
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</block>4、模板
（1）：定义模板
代码：
<template name="stu">（2）：调用模板
代码：
<template name="stu">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>5、引用页面文件
（1）：import方式
在a.wxml中定义了一个item模板
代码：
<template name="item">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>（2）：include方式
代码：
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>6、页面事件 ：简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。
（1）定义事件函数： 在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
（1）调用事件： 调用事件也称为注册事件。
在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
（1）冒泡事件： 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
（2）非冒泡事件： 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。
六、页面样式文件
页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS 的大部分特性，小程序对WxSs做了一些扩充和修改。
1、尺寸单位：由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WxsS在此基础上增back 加了尺寸单位rpx(respnesive pixel)。
2、样式导入：为了便于管理Wxss文件，我们可以将样式存放于不同的文件中。
3、选择器：目前，WXSS仅支持CSS中常用的选择器，如，class、#id、element、:: before、∷: aftert等。
4、WXSS常用属性：WXSS文件与CSS 文件有大部分属性名及属性值相同，WXSS 的常用属性及属性值如表：
