第二章总结

2.1 小程序基本目录结构

在微信小程序的基本目录结构中，项目主目录下有两个子目录（pages和utils）和4个文件（app.js,app.json,app.wxss和project.config.json)如图所示。

在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。
project.config.json文件是项目配置文件，包含项目名称、AppID等相关信息。

pages目录中有2个子目录，分别是index和l0，每个子目录中保存着二个页面的相关文件。通常，一个页面包含4个不同扩展名(.wxml、.wxs8、·js和.json)的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个页面的4个文件必须具有相同的路径与文件名。
ulis 目录用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

2.1.1 主体文件

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

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

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

2.1.2 页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。
■.js文件页面逻辑文件，在该文件中编写Javascrip! 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
■.wxml文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTNL页面中的.html文件。该文件在页面中不可缺少。
■.wxss文件一页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有式表文件时，文件中的样式规则会层叠覆盖:中的样式规则;香则、直接app.wxss中指定的样式规则。该文件在页面中不可缺少。
■.json文件 页面配置文件。该文件在页面中不可缺少。

2.2小程序开发框架

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言WXML(WeiXin Markup Language)和用于描述 WXML组件样式的WXSS(WeiXinSnle Sheets)组成，它们的关系就像HTML和CSS的关系。逻辑层(AppService)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理，但不能使用JavaScript中的DOM操作。

2.2.1 视图层

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

2.2.2逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有,脚本文件的集合,微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层是采用JavaScmip编写的。在Javascript 的基础上，微信团队傲了适当修改，以便提高开发小程序的效率。主要修改包括:
(1)增加epp()和Page()方法，进行程序和页面的注册,
(2)提供丰富的AP1，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。

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接口，如下:
wx.reguest 发起网络请求
wx. uploadFile 上传文件。
量wx.downloadFile 下载文件
调用 URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗日打开页面

2.3创建小程序

2.3.1创建第一个页面

1.先创建一个index目录，并分别在目录中的.JS .JSON .WXML 输入以下代码：

.wxml

欢迎学习小程序

.js

Page({

})

.json

{
    
}

2.在app.json文件中加上刚刚创建好的文件位置

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

运行结果：

2.3.2创建另一个页面文件

1.打开app.json文件输入以下代码：

 "pages": [
    "pages/aipe/aipe",
    "pages/index/index"
  ]

文件保存后，我们发现系统在日录结构中自动添加了相应的目录和文件，系统还自动补会了攀个夏厂文件中必需的基本代码

2.4配置文件

2.4.1全局配置文件

小程序的全局配置保存在全局配置文件(appjson)中，使用全局配置文件来配置真文件(pages)的路径、设置窗口(window)表现、设定网络请求AP的超时时闻(networkTimeout)以及配置多个切换页(mbBar)等。如图列出了各全局配置项的相美描述。

1.pages 配置项
pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符代表对应页面的“路径”+“文件名”。pages 配置项是必填项串，设置 pages 配置项时，应注意以下3点
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json..wxml和.wxss 文件进行整合数据绑定。

2.window 配置项
window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式owIndo配置项可以配置的对象参考如图。

3.tabBar 配置项
当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。tabBar配置项可以配置的属性如表所示

其中.list(列表)接受数组值，数组中的每一项也都是一个对象。对象的数据值说明如表所示

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

 "tabBar":{
        "color":"#666666",
        "selectedColor":"#ff0000",
        "borderStyle":"black",
        "backgroundColor":"#ffffff",
        "list":[
            {
                "pagePath":"pages/index/index",
                "iconPath":"pages/index/index1.png",
                "selectedIconPath":"pages/index/index1.png",
                "text":"首页"
            },
            {
                "pagePath":"pages/news/news",
                "iconPath":"pages/news/news1.png",
                "selectedIconPath":"pages/news/news1.png",
                "text":"新闻"
            }
        ]
    }

 代码运行结果：

4.mewekTimeout配置项
小程序中各种网络请求 API的超时时间值只能通过networkTimeout配置项进行统一设置不能在AP中单独设置。networkTimeout可以配置的属性如表所示。

5. debup 配置项
debog配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上

2.4.2 页面配置文件

卖面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window 配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)中的配置值，
爽面中的windo配置只需书写配置项，不必书写window，代码示例如下:

"navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序window功能演示",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColorba":"#ccc",
    "packgroundTextStyle":"liaht"

 2.5逻辑层文件

2.5.1 项目逻辑文件

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

代码：

onLaunch: function(){
      console.log("小程序开发")
  },
  onShow: function(options){
      console.log("小程序显示")
  },
  onHide: function(){
      console.log("小程序进入后台")
  }

运行结果：

2.5.2页面逻辑文件

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

1.设置初始数据设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Object No-laton，JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过 WXM,对数据进行绑定

2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。
该函数的参数可以获取 wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互，
onHide 页面隐藏函数。当页面隐藏时及当navigateTo 或小程序底部进行 tab 切换时调用该函数。
onUnload 页面卸载函数。当页面卸载、进行navigateBack或redirectTo 操作时，调用该函数。

数据初始代码：

data: {
    name:'lwk',
    age:30,
    birthday:[{year:1988},{month:11},{date:18}],
    object:{hobby:'computer'}
  }

数据绑定代码：

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

代码结果：

3.定义事件处理函数
开发者在 Page()中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行 Page()中定义的事件处理函数。

4.使用 setData 更新数据
小程序在 Page 对象中封装了一个名为 setData()的函数，用来更新data中的数据。函数参数为 0bject，以“key:value”对的形式表示将 this. data中的key 对应的值修改为 value.

2.6页面结构文件

2.6.1数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的 data 进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法(11)将变量或运算规则包起来
1.简单绑定
简单绑定是指使用双大括号(1111)将变量包起来，在页面中直接作为字符串输出使用简单绑定可以作用于内容、组件属性、控制属性等的输出。

2.运算
在11}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaSeript 运算规则。
示例代码如下:、

<view>算数运算：{{age+num}}</view>
  <view>逻辑运算：{{age+100==130}}</view>
  <view>三元运算：{{age==1 ? 3 : num}}</view>

//js
age:30,
num:100

代码结果：

2.6.2条件数据绑定

1.wx:if条件数据绑定
wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。在以上代码中，当condition 变量的值为ue 时，view 组件将数据绑定输出相关内容;当condition 变量的值为false 时，view 组件将不数据绑定。
当需要添加多个分支块时，可以使用wx:elif、wx:else 属性。当控制表达式为true 时数据绑定一个分支;当控制表达式为false 时，数据绑定另一个分支。

2.block wx:if条件数据绑定
当需要通过一个表达式去控制多个组件时，可以通过<bock>将多个组件包起来，然后在<block>中添加wx:if属性即可。例如：

<view wx:if="age>40">年龄小于40</view>
  <view wx:elif="age==40">年龄等于40</view>
  <viem wx:else>年龄大于40</viem>

2.6.3列表数据绑定

1. wx: for
在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，ilems为一个数组，数组当前项的下标变量名默认为index，数组当前项的变量名默认为item。

代码如下：

/js
students:[
        {nickname:"nice",height:180,weight:120},
        {nickname:"mimi",height:150,weight:80}
    ]
/wxml
<view wx:for="{{students}}">
  <text>姓名：{{item.nickname}}</text>
  <text>身高：{{item.height}}</text>
  <text>体重：{{item.weight}}</text>
  </view>

代码结果：

2. block wx : for
与 block wx:if类似，在 wxml中也可以使用<block>包装多个组件进行列表数据绑定例如，上面的代码可以被修改为以下形式，效果不变。

2.6.4模板

在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板。
1.定义模板
模板代码由 wxml组成，因此其定义也是在wxml 文件中，定义模板的格式为:

<template name="模板名称">

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

<template is="stu" data="{{studebts}}">

 其中，<template>为模板标签;is属性用于指定要调用的模板名称;data属性定义要传人的数据，如果模板中不需要传人数据，data属性可以省略。
我们可以把上面的示例用模板来实现，代码如下:

<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="{{studebts}}"></template>

2.6.5引用页面文件

在文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供了两科方式来引限其他页面文件。
1. impa 方式
如无在要引用的文件中定义了模板代码，则需要用import 方式引用阒如，在wxm 文件中定义一个iem 模板。如果要在bwxm 文件中使用item模板，首先需要使用import方式引用awxml文件，然后通过 template 使用 item 模板。

2.inelude 方式
include方式可以将源文件中除模板之外的其他代码全部引人，相当于将源文件中的代码复制到 include 所在位置。

2.6.6页面事件

简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。要实现这种机制，需要定义事件函数和调用事件，
■定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
■调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind或 catch开头，再加上事件类型，如 bindtap、catchlongtap其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。在小程序中，事件分为冒泡事件和非冒泡事件两大类型。冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个

2.7页面样式文件

页面样式文件(WXSS)是基于CSS拓的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。
1.尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位px(nespnesive pixel)。WXSS规定屏幕宽度为750rpx，在系统数据绑定过程中px会按比例转化为px。例如，iPhone6的屏幕宽度为375px，即750rpx需按比例转化为375px，所以，在iPhone6中，1rpx=0.5px。

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

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

4.WXSS 常用属性
WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如表所示。