第二章总结

一、主体结构

在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，其中

1、app.js为小程序文件，主要用于注册小程序全局实例

2、app.json为小程序公共设置文件，配置小程序全局设置

3、app.wxss为小程序样式表文件，类似于HTML的.css文件

（如图所示）

二、页面文件

1，.js文件，页面逻辑文件

2，.wxss文件，页面样式表文件

3，.json文件，页面配置文件

4，.wxml文件，页面结构文件

二、小程序的开发框架

1，视图层

视图层由WXSS与WXML编写，有组件来进行展示

2，逻辑层

逻辑层用于处理事务逻辑

3，数据层

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

(如图所示）

三、创建一个页面文件

1，在pages目录下面新建一个news目录，并且在news目录下新建news.js、news.json、news.wxml和news.wxss空文件首先在 news.json中输入一个大括号“{}” 在news.js中输入“Page({})”，在news.wxml中可以输入任何文字，不能为空。最后打开“app.json”在pages中输入“ "pages/news/news",”保存后左边页面将会显示你所输入的文字。

 

四、配置文件

1，全局配置文件分为五个配置项，分别为：

pages配置项用来指定小程序有哪些页面组成，数组的每一项都市字符串，pages配置项是必填项。

window配置项负责设置小程序状态栏、导航栏、标题、窗口背景色等系统样式。

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

networkTimeout配置项，在小程序中各种网络请求APL的超时时间只能通过networkTimeout配置项进行统一设置，不能在APL中单独设置。

debug配置项，配置调试功能，设置是否开启debug模式。

五、逻辑层文件

1、项目逻辑文件

2、页面逻辑文件

六、页面结构文件

1、数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法(111)将变量或运算规则包起来

2、条件数据绑定

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件

3、列表数据绑定

列表数据绑定用于将列表中的各项数据进行重复数据绑定

4、模版

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

5、引用页面文件

（如图所示）

代码示例：

<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==40}}</view>
<view>三元运算:{{age==40 ?'happy' :'nohappy'}}</view>
<view wx:if="age>40">1</view>
<view wx:elif="age=40">0</view>
<view wx:else>-1</view>
<template name="stu">
<block wx:for="{{students}}">
<view>
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</block>
</template>
<template is="stu" data="{{students}}" />

6、页面事件

七、页面样式 文件

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

由于 CSS 原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS 在此基础上增加了尺寸单位rpx(respnesive pixel)。WXSS规定屏幕宽度为750px，在系统数据绑定过程中x会按比例转化为px。例如，iPhone6的屏幕宽度为375Px，即750Px需按比例转化为375 px，所以，在iPhone6中，1 rpx=0.5 px。

2、样式导入：

为了便于管理 WXSS 文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import 语句导人即可。例如:
//a. wxss
.contiborder:lpx solid #f00;}
//b. wxss
@ import"a.wxss;"
.contipadding:5rpx;margin:5px}

以上代码的效果与下列代码的效果相同:
//b. wxss
.contiborder:lpx solid #f00
Padding:5px;margin:5px;

3、选择器：目前，wxss仅支持css中常用的选择器，如.css、#id、elemeent等

4、wxss常用属性