五、微信小程序-快速回顾 ( 应用文件 )

应用文件结构

前面文章已经回顾了页面文件和组件文件，应用文件与它们大同小异，所以不用写太多，应该一看就懂

微信小程序的页面文件结构和组件文件结构都是 4 个文件为一组，而应用文件结构只有 3 个文件，而且仅能有一组
并且文件名固定、文件目录位置固定，应用文件结构位于根目录：

应用文件结构中的文件分别是：

1. 应用样式文件：app.wxss，控制全局样式，会被页面样式覆盖
2. 应用配置文件：app.json，控制全局窗口配置，会被页面配置覆盖
3. 应用逻辑文件：app.js，用来绑定应用的生命周期函数、请求超时处理、未找到页面处理、定义全局函数和属性等
   
   

1. 应用样式文件

在 app.wxss 文件中设置的样式，属于全局样式，简单说就是标签的默认样式，当页面样式文件中，单独对标签样
式进行设置后，那么页面样式会覆盖应用样式

示例：在应用样式文件中设置标签的默认样式

(1) 应用样式文件部分：在 app.wxss 中设置 <view> 标签的默认样式

view{
  width: 300rpx;
  height: 300rpx;
  border:1rpx solid black;
}

(2) 页面布局文件部分：使用 <view> 标签

<view></view>

(3) 运行效果：页面布局文件中的 <view> 标签拥有了默认样式

2. 应用配置文件

应用配置文件 app.json 的常用功能如下，更多请参考 微信小程序 - 应用全局配置：

1. 应用中要显示的页面必须在此声明
2. 可以对页面窗口进行统一设置（ 可以在页面配置文件中进行覆盖 ）
3. 设置请求超时时间
4. 设置 Tab 导航

本文主要回顾一下 页面声明 和 Tab 导航 这两个非常常见的功能

2.1. 页面声明

我们想添加新的页面，除了要创建目录和文件以外，还要在 app.json 的 pages 数组中声明页面的相对路径

使用微信开发者工具可以简化我们创建目录和文件的操作，在微信开发者工具内打开 app.json，然后在 pages 数组
中，把待创建的页面的相对路径添加进去，最后保存，微信开发者工具就会自动按照路径帮我们创建目录和文件

示例：创建购物车目录

假设现在想添加一个购物车画面：

通过上面动图可以看到，当我们在 app.json 的 pages 数组中添加完购物车路径后，微信开发者工具会自动按照路
径帮我们创建好购物车的页面结构目录和页面相关文件

2.2. Tab 导航

Tab 导航是通过选项卡效果来切换内容，下图就是一个标准的 Tab 导航：

在传统 web 开发中，实现上面效果我们需要写大量代码，或者引入开源样式库，而在微信小程序中通过一些简单
的配置就可以实现 Tab 导航的效果，在使用微信小程序中自带的 Tab 导航切换选项卡时，是页面间的切换

使用微信小程序自带的 Tab 导航，我们需要在 app.json 中配置 tabBar 对象，下面表格中列举 tabBar 对象的常用属
性，想了解更多请参考 微信小程序 tabBar：

属性名	类型	描述
color	字符(16 进制颜色)	选项卡项目上的文字颜色
selectedColor	字符(16 进制颜色)	选项卡项目处于激活状态时的文字颜色
backgroundColor	字符(16 进制颜色)	选项卡的背景颜色
list	对象数组	详细配置选项卡中的项目

上面列表中的 list 对象数组用来详细配置选项卡中的每一项，数组中的每个元素对应一个选项卡项目，小程序规定
最少得有 2 个项目，最多不能超过 5 个项目，数组中元素的属性如下：

属性名	类型	描述
pagePath	字符串	选项卡项目对应的页面相对路径，不要忘记在 pages 中声明
text	字符串	选项卡项目中显示的文字
iconPath	字符串	选项卡项目中显示的图片
selectedIconPath	字符串	选项卡项目激活时显示的图片

示例：tabbar 导航

(1) 首先，在项目里放入 4 张图片，后面用来在选项卡项目中显示

(2) 使用微信开发者工具创建项目后，会有一个 pages/index 页面，我们就用它当首页，然后再创建一个购物车
页面，预想路径为 /pages/cart，用简化的方式创建，在 app.json 的 pages 数组中添加相对路径：

(3) 为了方便辨别，我们在首页和购物车页面中添加些内容：

首页 pages/index/index.wxml：

<view>这是首页</view>

购物车 pages/cart/index.wxml：

<view>这是购物车页面</view>

(4) 在 app.json 中添加 tabBar 对象，重点代码在12 - 28 行，我们一共设置了两个选项卡项目，一个是首页，一个
是购物车页面：

{
    "pages": [
        "pages/index/index",
        "pages/cart/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {
        "color":"#0eb83a",
        "selectedColor":"#FF0000",
        "backgroundColor":"#ccc",
        "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "/icons/home.png",
            "selectedIconPath": "/icons/home-active.png"
        },
        {
            "pagePath": "pages/cart/index",
            "text": "购物车",
            "iconPath": "/icons/cart.png",
            "selectedIconPath": "/icons/cart-active.png"
        }]
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

(5) 运行效果：

3. 应用逻辑文件

前面回顾了那么多，现在这个应用逻辑文件实在是没啥说的，跟页面逻辑文件和组件逻辑文件差不多，只不过调
用的函数不是 Page() 和 Component()，而是 App() ，同样 App() 的参数对象中也有自己的一些预定义生命周期函数，
详细请参考 微信小程序 - 应用逻辑文件

有一点要注意的是，App() 函数在整个应用中只能调用一次，通过 getApp() 可以获取到这个小程序全局唯一的
App 实例，所以我们可以在 App() 函数的参数对象中自定义属性和方法，然后通过 getApp() 调用，从而达到
全局函数和全局属性的效果

示例：

(1) 应用逻辑文件

// app.js
App({
  // 生命周期函数，小程序初始化完成。每次启动小程序只会执行一次
  onLaunch(){
    console.log('onLaunch')
  },
  // 生命周期函数，应用每次显示时执行
  onShow(){
    console.log('onShow')
  },
  // 自定义全局函数，所有页面和组件的逻辑文件中都可以通过 this 调用
  myGlobalMethod(){
    console.log('全局函数')
  }
})

(2) 页面逻辑文件

// /pages/index/index.js
Page({
  // 页面生命周期函数，页面显示时执行
  onShow() {
    // 获取全局唯一应用实例
    const app = getApp()
    // 调用全局函数
    app.myGlobalMethod()
  }
});

(3) 运行效果：