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

        

一、基本目录结构：

在微信下程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）
在主目录中3个以“app”开头的文件是微信下程序框架的主描述文件，是应用程序级别的文件
project.config.json文件是项目配置文件，包含项目名称、AppID等相关信息

Vpages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同的扩展名（.wxml、.wxss、.js、.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件、页面配置文件。按照规定，同一个页面的4个文件必须用来存放具有相同的路径与文件名

主题文件：

app.js：小程序逻辑文件

app.json：小程序公共设置文件

app.wxss：小程序主样式表文件

页面文件：

.js：页面逻辑文件

.wxml：页面结构文件

.wxss：页面样式文件

.json：页面配置文件

2小程序开发框架

小程序MINA框架将整个系统划分为视图层、逻辑层和（数据层）
视图层：MINA框架的视图层由WXML与WXSS编写，由组件来进行展示

视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构wxss 文件用于描述页面的样式

逻辑层：逻辑层用于处理事务逻辑（采用JavaScript编写）

1.增加app()和Page()方法，进行程序和页面的注册

2.提供丰富的 API,如扫一扫、支付等微信特有的能力

3.每个页面有独立的作用域，并提供模块化能力

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

1.页面临时数据或缓存

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

使用数据 API接口，如下:
wx.getStorage    获取本地数据缓存
wx. setStorage   设置本地数据缓存
wx.clearStorage 清理本地数据缓存
3.网络存储与调用

上传或下载文件 API接口，如下:
wx.request           发起网络请求
wx.uploadFile      上传文件。
wx.downloadFile 下载文件
调用 URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx.redirectTo  原窗口打开页面
三、创建小程序页面：

2.4配置文件

        小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容
2.4.1全局配置文件

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

1.配置项

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

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

1.配置项

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

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

5.debug配置项

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

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

2.5逻辑层文件

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

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

当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法，然后通过epp.json的 pages属性注册相应的页面，最后根据默认路径加载首页;当用户单击左上角的“关闭”按钮或单击设备的Home键离开微信时，小程序没有被直接销毁，而是进入后台这两种情况都会触发onHide方法;当用户再次进入微信或再次打开小程序时，小程序会从后台进人前台，这时会触发onShow方法。只有当小程序进人后台一段时间(或者系统资源占用过高)时，小程序才会被销毁

2.5.2页面逻辑文件

        页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件
        在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示

2.5.2页面逻辑文件

        页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件
        在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示

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

运行结果：