第二章总结

2.1 小程序的基本目录结构

项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）。

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

子目录 pages：

子目录 utils:

2.1.1 主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，他们的名称是固定的。
1）app.js：小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.j文件会和其他页面的逻辑文件打包成一个 JavaScript 文件。该文件在项目中不可缺少。

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

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

2.1.2 页面文件

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

1）.js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
2）.wxml文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
3）.wxss文件 页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。
4）.json文件 页面配置文件。该文件在页面中不可缺少。

2.2 小程序的开发框架

微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统网络通信、任务管理、数据安全等基础功能，对上层提供了一整套 JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

小程序MINA框架示意

2.2.1 视图层

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

2.2.2 逻辑层

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

2.2.3 数据层

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

1）页面临时数据或缓存
在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this. data 的值。
setData()兩数的参数接收一个对象，以(key,value)的形式表示将 key 在 this.data中对应的值改变成 value。
2）文件存储(本地存储)
使用数据 API接口，如下:

wx.getStorage 获取本地数据缓存

wx.setStorage 设置本地数据缓存

wx.clearStorage 清理本地数据缓存

3）网络存储与调用

上传或下载文件API接口，如下:
1）wx.request 发起网络请求
2）wx.uploadFile 上传文件
3）wx.downloadFile下载文件
调用 URL的 API接口，如下:
1）wx.navigateTo 新窗口打开页面
2）wx.redirectTo 原窗口打开页面

2.3 创建小程序页面

启动微信开发工具，创建新的项目zjj,此处勾选不使用云服务。

2.3.1 创建一个页面文件 

继续在项目主目录下新建一个pages目录，在pages目录下新建一个index目录 并在index目录下新建index.js、index.json、index.wxml、index.wxss空文件。

首先，打开index.wxml文件，输入“欢迎学习微信小程序，实现大梦想”

 然后打开项目配置文件app.json，输入代码：

"pages": [
    "pages/index/index"
  ]

接下来打开index.json 文件，输入代码：

{
  
}

打开index.js文件，输入代码：

// index.js
Page({
  
})

2.3.2 创建另一个页面文件

在2.3.1小节中，我们采用逐步创建目录及4个文件的方式成功创建了一个页面文件在本节中，我们采用另一种方式来创建另一个页面文件news。

添加zjj页面文件

打开 app.json 文件，输人以下代码:

 "pages": [
    "pages/zjj/zjj",

2.4 配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。

2.4.1 全局配置文件

小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求 API的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等。

全局配置文件内容的整体结构如下：

 1、pages 配置项 

pages配置项接受一个数组，用来指定小程序由哪些页面来组成，数组的每一项字符串代表对应页面的“路径”+“文件名”。

app.json文件的配置项：

"pages": [
    "pages/zjj/zjj",
     "pages/logs/logs"
  ],

2、window 配置项

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

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

"window": {
    "navigationBarTextStyle": "black",
    "backgroundTextStyle": "light" ,
    "navigationBarBackgroundColor":"#ff00ff",
    "navigationBarTitleText":"微信小程序",
    "BackgroundColor":"#ccc"
  },

3、tabBar 配置项

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

其中，list（列表）接受数组值，数组中的每一项也都是一个对象。

在app.json文件中设置如下tabBar 配置：

"tabBar":{
    "color":"#666666",
    "selectedColor":"#ff0000",
    "borderstyle":"black",
    "backgroundColor":"#ffffff",
    "list":[
      {
        "pagePath":"pages/logs/logs",
        "iconPath":"images/index1.png",
        "selectedIconPath":"images/index2.png",
        "text":"首页"
      },
      {
        "pagePath":"pages/zjj/zjj",
        "iconPath":"images/index1.png",
        "selectedIconPath":"images/index2.png",
        "text":"新闻"
      }
    ]
  },

运行结果：

2.5 逻辑层文件

2.5.1  项目逻辑文件

项目逻辑文件 app.js中可以通过 App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getpp()获取。
App()函数用于注册一个小程序，参数为 0bject，用于指定小程序的生命周期函数、用户自定义属性和方法。

当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法，然后通过app.json的 pages 属性注册相应的页面，最后根据默认路径加载首页;

app.js代码：

App({
  onLaunch(){
    console.log("小程序初始化");
  },
  onShow(){
    console.log("小程序启动");
  },
  onHide(){
    console.log("小程序隐藏");
  }
})

运行结果：

2.5.2 页面逻辑文件

1、设置初始数据

（a）数据初始代码：zjj.js文件

Page({
  data:{
    name:'俞诗涵',
    age:18,
    birthday:[{year:2005},{month:11},{date:07}],
    object:{hobby:'computer'},

 （b）数据绑定代码：zjj.wxml

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>

（c）运行结果： 

2.6 页面结构

WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

2.6.1 数据绑定

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

1.简单绑定

简单绑定是指使用双大括号(1111)将变量包起来，在页面中直接作为字符串输出使用简单绑定可以作用于内容、组件属性、控制属性等的输出。

【注意】

简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。

示例代码如下：

Page({
  data:{
    name:'俞诗涵',
    age:18,
    birthday:[{year:2005},{month:11},{date:07}],
    object:{hobby:'computer'},

//wxml
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>

2.运算

在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符运算等)，这些运算均应符合 JavaScript 运算规则。

示例代码如下:

//wxml
<view>算数运算：{{age+200}}</view>
<view>逻辑运算：{{age==90}}</view>
<view>三元运算：{{1==age ? 3 : 9}}</view>

运行结果： 

2.6.2 条件数据绑定

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

1.wx：if 条件数据绑定

wx：if 条件数据绑定是指使用wx：if 这个属性来判断是否数据绑定当前组件。

代码如下：

<view wx:if="{{age>40}}">条件语句：1</view>
<view wx:elif="{{age==40}}">条件语句：2</view>
<view wx:else>条件语句：3</view>

以上代码中，当age大于40时，输出1；当age等于40，输出2；否则输出3。

2.6.3 列表数据绑定

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

1.wx：for

zjj.js代码如下：

students:[
      {nickname:"Tom",height:180,weight:150},
      {nickname:"Anne",height:168,weight:100}
    ]

zjj.wxml代码如下：

<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>

运行结果：

2.6.4 模板

1.定义模板

模板代码由wxml组成，因此其定义也是在wxml文件中，定义模板格式为：

<template name="stu">

相关组件代码为：

</template>

2.调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为：

<template is="stu" data="{{students}}"></template>

上面的示例用模板来实现，代码如下：

<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>

2.6.5 引用页面文件

在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供了两种方式来引用其他页面文件。

1.import 方式
如果在要引用的文件中定义了模板代码，则需要用import 方式引用。
例如，在 a.wxml文件中定义一个 item 模板。代码如下:

/a. wxml
<template name ="item">
<text>||item.name)</text >
<text >iiitem.age||</ext>
</template>

如果要在 b. wxml 文件中使用 item 模板，首先需要使用import 方式引用a.wxml文件，然后通过template使用item模板。代码如下：

//b.wxml
<import src="a.wxml"/>
<template is="item" data="{{student}}"/>

2.include方式

imnclude 方式可以将源文件中除模板之外的其他代码全部引人，相当于将源文件中的代码复制到include 所在位置。
例如，在aa.wxml文件中定义如下代码:

//aa.wxml
<text>{|item.name }</text>
<text>|item.age}}</text>

在bb.wxml文件中定义如下代码：

//bb .wxml
<include src="aa.wxml"/>
<text>iitem.hobby}}</text>

bb.wxml文件通过 include 把 aa.wxml 文件代码加载，其结果为如下结构:

<text>iitem.name}}</text>
<text>item.agel}</text >
<text>item.hobby}f</text >

2.6.6 页面事件

在wxml中,冒泡有六个

 2.7 页面样式文件

页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，央定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。
1.尺寸单位
由于 CSS 原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS 在此基础上增加了尺寸单位npx(respnesive pixel)。WXSS规定屏幕宽度为750rpx，在系统数据绑定过程中币会按比例转化为px。例如，iPhone6的屏幕宽度为375px，即750rpx需按比例转化为375 px，所以，在iPhone6 中，1 mpx =0.5 px。
2.样式导入
为了便于管理WXSS 文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import 语句导人即可。例如:

//a.wxsS
contiborder:lpx solid #f00 ;}
/b.wxss
@ import"a.wxss;"
contlpadding:5rpx;margin:5px;}

以上代码的效果与下列代码的效果相同:

//b.wxss
.cont iborder:lpx solid #f00;
Padding:5px;margin:5px;}

3.选择器
目前，WXSS 仅支持CSS 中常用的选择器，如.class、#id、element、::before、:atert 等。
4.WXSS 常用属性
WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值

2.8 总结 

本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础。