第二章总结

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

主目录中有3个app开头的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

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

pages目录中有两个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。

一个页面包含四个不同的扩展名（.wxml、.wxss、.js和.json）文件，分别用于表示页面结构，页面样式，页面逻辑和页面配置文件。

utils目录用于存放公共的.js文件需要时可直接引用。

1、主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定。

app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。

app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

app.wxss 小程序主样式表文件，类似HTML的.ess文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2、页面文件

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

.js 文件页面逻辑文件,在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

.wxml 文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html 文件。该文件在页面中不可缺少。

.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用 app.wxss中指定的样式规则。该文件在页面中不可缺少。

.json 文件 页面配置文件。该文件在页面中不可缺少

二、小程序的开发框架

1视图层 

逻辑层用于处理事务逻辑

2逻辑层 

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

3数据层

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

三、创建小程序页面

创建第一个页面文件新建一个pages目录，目录中新建index目录，在此目录下新建四个空文件

news.js,news.json,news.wxss,news.wxml。

 在wxml中输入如图文字

 json中输入空{}即可

js文件输page({})

项目中各文件代码内容

四、配置文件

小程序的全局配置如图 

设置pages配置项时，注意3点

(1)数组的第一项用于设定小程序的初始页面。

(2)在小程序中新增或减少页面时，都需要对数组进行修改

(3)文件名不需要写文件文件扩展名。小程序框架会自动寻找路径及对。js 、 .js 、.wxml和 .wxss文件进行整合数据绑定。

1app.json文件的配置如下

{

"pages": [

            "pages/news/news",

             "pages/index/index"

]

}

2window配置项

 3在app.json 中设置如下window 配置项:

"window": {
"navigationBarBackgroundColor": "#fff"，

"navigationBarTextStyle": "black"，
"navigationBarTitleText":"小程序window 功能演示"，

"backgroundColor": "#ccc",
"backgroundTextStyle": "light"

}

3.tabBar 配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置来实现。如图所示

其中list（列表）接受数组值，数组中每一项也都是一个对象如图所示

4app文件中设置如下tabBar配置

"tabBar": {
"color":"#666666"、
"selectedcColor": "#ff0000",

"borderstyle": "black",
"backgroundColor": "#ffffff"，

"list":[

{
"pagePath": "pages/index/index",

"iconPath": "images /index1 .png",
"selectedIconPath": "images /index2.png",
 "text":"首页"    

}，

{
"pagePath": "pages /news /news",

"iconPath": "images/news1.png",
"selectedIconPath": "images/news2.png",

"text":"新闻"

}

]

}

}

结果如图所示

4networkTimeout配置项

{

"networkTimeout" :{

"request":20000,

"connectSocket":20000,

"uploadFile":20000,

"downloadFile":20000

}

页面配置文件

页面配置文件（*.json）只能设置本页的窗口表现，而且只能设置Windows配置项内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app.json）中的配置值。

代码示例

{

"navigationBarBackgroundColor": "#ffffff",  

"navigationBarTextStyle":"black",  

"navigationBarTitleText": "页面window配置演示",  

"backgroundColor": "#eeeeee",

  "backgroundTextStyle":"light"

}

五、逻辑层文件

页面逻辑文件的主要功能有: 设置初始数据; 定义当前页面的生命周期函数; 定义事件处理函数等。 每个页面文件都有一个相应的逻辑文件, 逻辑文件是运行在纯javaScrict引擎中。 因此, 在逻辑文件中不能使用浏览器提供的特有对象(document、window) 及通过操作DOM改变页面, 只能采用数据绑定和事件响应来实现。

在逻辑层，Page（）方法用来注册一个页面，并且每个页面有且仅有一个，如图所示。

1设置初始数据：设置初始数据是对页面的第一次数据绑定

对象data将会以JS0N(Javascript 0bject Notaton，Js对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。

视图层可以通过WXML对数据进行绑定。

数据初始、数据绑定及运行效果如下图：

2数据绑定

 3代码运行结果

六、算术运算

1算术运算

<view>算术运算:{{age+99}}</view>

代码运行结果

2逻辑运算

<view>逻辑运算:{{age==30}}</view>

代码运行结果

3三元运算

<view>三元运算:{{age==1 ? 3 : 99}}</view>

代码运行结果

4  if语句

<view wx:if="{{age>30}}">1</view>

<view wx:elif="{{age==40}}">2</view>

<view wx:else="">3</view>

代码运行结果

6 模板

 在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板。如图所示

 代码运行结果

七、页面事件

简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。要实现这种机制，需要定义事件函数和调用事件。

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。

调用事件调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。

冒泡事件冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，    以上代码的    
级元素再向其父级元素传递，一直到页面的顶级元素。

非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递

如图所示有6个冒泡事件

八、页面样式文件

页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CS的大部分特性，小程序对WXSS做了一些扩充和修改。

 1. 尺寸单位

由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx(respnesivepixel)。WXSS规定屏幕宽度为750rpx，在系统数据绑定过中rpx会按比例转化为px。

2样式导入

为了便于管理 WXSS 文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。

3.选择器

 目前，WXSS 仅支持CSS 中常用的选择器，如.class、#id、element、::before、:：aftert 等.

4.WXSS常用属性

 WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值：

如图所示