第二章 微信小程序开发基础

2.1 小程序的基本目录结构

2.1.1 主体文件

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

（1）app.js:小程序逻辑文件，主要用来注册小程序全局实例

（2）app.json:小程序公共设置文件，配置小程序全局设置

（3）app.wxss：小程序主要样式表文件，在主样式表文件中设置样式在其他页面文件中同样有效。

2.1.2 页面文件

（1）.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

（2）.wxml:页面结构文件，用于设计页面的布局、数据绑定等。

（3）.wxss：页面样式表文件，用于定义本页面中用到的各类样式表。

（4）.json：页面配置文件，该文件在页面中不可缺少。

2.2 小程序的开发框架

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: 原窗口打开页面

2.3 创建小程序页面

在page目录下创建一个news目录，并在news目录下创建 news.js 、news.json、 news.wxml和 news.wxss空文件。

首先，打开news.wxml文件，输入“欢迎学习小程序”

然后，打开项目配置文件app.json ，输入“pages/news/news"

接下来，打开news.json文件，输入{   }

打开news.js文件，输入

Page({

})

点击编译即可

2.4 配置文件

2.4.1全局配置项

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

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

                                       window配置项及其描述

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

                                    tabBar 配置项及其描述

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

                                     tabBar 中list 选项

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

                                     networkTimeout配置项

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

2.4.2 页面配置文件

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

页面中的window配置只需书写配置项，不必书写window，代码示例如下：

{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"页面window配置演示",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}

2.5逻辑层文件

小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件

2.5.1 项目逻辑文件

项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

App()函数用于注册一个小程序，参数为Object，用于指定小程序的生命周期函数、用户自定义属性和方法

                                                  项目逻辑文件配置项

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

运行结果

2.5.2页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数 等。

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个。

                                           页面逻辑文件配置项

1.设置初始数据：设置初始数据是对页面的第一次数据绑定，对象data将会以JSON的形式由逻辑层传至视图层。

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

2.定义当前页面的生命周期函数

在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onHide、onUnload.

onLoad:页面加载函数，当页面加载完成后调用该函数，一个页面只会调用一次。

onShow:页面显示函数，当页面显示时调用该函数，每次打开页面都会调用一次。

onReady:页面数据绑定函数，当页面初次数据绑定完成时调用该函数，每次打开页面都会调用一次。

onHide:页面隐藏函数，当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。

onUload:页面卸载函数，当页面卸载、进行navigateBack或redirectTo操作时，调用该函数。

在logs.js和news.js文件中加入如图：

 保存并编译后，Console面板出现了如图所示的效果：

2.6 页面结构文件

页面构建文件（WXML）是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构。

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

2.6.1 数据绑定

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

<view>{{name}}</view>
<imagesrc="{{img}}"></image>
<view wx:if="{{sex}}"男</view>
Page({
data:{
name:'/wk',
img:'/images/news2.png',
sex:true
},
})

2.运算：在{{ }}内可以做一些简单的运算

//wxml
<!--算术运算--->
<view>{{num1}}+{{num2}}={{num1+num2}}</view>
<!---逻辑运算-->
<view>{{num1+num2==num1+num2}}</view>
<!---三元运算-->
<view>{{num1>num2?'num1>num2':'num1<num2'}}</view>
<!---字符串运算-->
<view>{{Hello+name}}</view>
<!---数据路径运算-->
<view>{{object.hobby}}</view>
<view>{{birthday[0]}}</view>
//js
Page({
name:'lwk',
num1:2,
num2:3,
num3:10,
object:{hobby:'computer'},
birthday:[1988,11,18]
},
})

2.6.2 条件数据绑定

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

<view wx:if="{{condition}}">内容</view>

当condition变量为true时，view组件将数据绑定输出相关内容；condition变量的值为false时，view组件将不数据绑定。

当需要添加多个分支块时，可以使用wx:elif、wx:else属性。当控制表达式为true时，数据绑定一个分支；当控制表达式为false时，数据绑定为另一个分支，例如：

<view wx:if="{{x>0}}">1</view>
<view wx:elif="{{x==0}}">0</view>
<view wx:else>-1</view>

2.block wx:if条件数据绑定

当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性即可。

2.6.3 列表数据绑定

1. wx:for：在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该数组，格式如下：

<view  wx:for="{{items}}">
{{index}}:{{item}}
</view>

2. block wx;for：与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定

<block wx:for="{{student}}">
<view>
<text>{{indent}}</text>
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</view>
</block>

2.6.4 模板

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

<template name="模板名">

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

<template is="模板名称" data=="{{传入的数据"}}/>

2.6.5 引用页面文件

1.import方式：如果在要引用的文件中定义了模板代码，则需要用import方式引用。

例如：在a.wxml文件中定义一个item模板，代码如下：

//a.wxml
<template name="item">
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</template>

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

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

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

2.6.6  页面事件

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

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

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

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

在WXML中，冒泡事件有6个

2.7 页面样式文件

1.尺寸单位：由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx。WXSS规定屏幕宽度为375rpx,在系统数据绑定过程中rpx会按比例转化为px。2.样式导入 ：为了便于管理WXSS文件，我们可以将样式存放与不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。

3.选择器：目前，WX仅支持CSS中常用的选择器，如.class、#id、element、brfore、aftert等。

4.WXSS常用属性