微信小程序全局文件的使用详解

什么是微信小程序全局文件

微信小程序中，全局文件是指 app.js、app.json 和 app.wxss，它们分别用于配置小程序的全局信息、全局样式和全局脚本。这些文件都处于小程序的根目录下，并且是小程序初始化时自动载入的，所以我们可以在全局文件中定义小程序的整体风格和功能。

app.json

app.json 是小程序的全局配置文件，用于定义小程序的页面路径、窗口背景色、顶部导航栏样式、底部标签栏样式等信息。

在 app.json 的 pages 字段中定义小程序的所有页面路径，例如：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/user/user"
  ],
  "window": {
    "backgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }
}

上述配置定义了小程序的三个页面：首页、详情页和用户中心页，在底部设置了首页和用户中心页的标签栏。窗口的背景色为白色。

app.js

app.js 是小程序的全局脚本文件，用于定义小程序的全局变量及全局方法。

我们可以在 app.js 中定义全局变量，在整个小程序中都可以访问。例如：

App({
  globalData: {
    userInfo: {
      name: "张三",
      age: 18
    },
    apiUrl: "https://api.example.com"
  },
  onLaunch: function () {
    // 小程序初始化
  },
  onHide: function () {
    // 小程序隐藏
  }
})

在上述代码中，我们定义了全局变量 globalData，其中包含了用户信息和后端接口的地址。我们还可以在 app.js 中添加全局方法，例如：

App({
  globalData: {
    apiUrl: "https://api.example.com"
  },
  request: function (url, data, successCallback, errorCallback) {
    wx.request({
      url: this.globalData.apiUrl + url,
      data: data,
      success: successCallback,
      fail: errorCallback
    })
  }
})

在上述代码中，我们定义了全局方法 request，它可以在小程序的任何页面中使用，用于向后端发送请求。

app.wxss

app.wxss 是小程序的全局样式文件，用于定义小程序的全局样式。

我们可以在 app.wxss 中定义全局样式，例如：

/*app.wxss*/
body {
  background: #f6f6f6;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

在上述代码中，我们定义了全局样式，将页面的背景色设置为灰色，字体设置为 Helvetica Neue 字体、Arial 或 sans-serif 字体。

示例

以下是一个通过全局文件配置标题栏的示例：

我们在 app.json 中设置全局窗口颜色和标题栏样式：

{
  "window": {
    "navigationBarBackgroundColor": "#96c7d2",
    "navigationBarTitleText": "网站名",
    "navigationBarTextStyle": "white"
  }
}

然后，在 page 中设置页面的标题：

<!-- index.wxml -->
<view class="pageTitle">首页</view>

<!-- index.wxss -->
.pageTitle {
  font-size: 20px;
  font-weight: bold;
}

以上代码定义了页面的标题为“首页”，并设置了标题字体大小和粗细。

又如，我们在 app.js 中定义全局请求方法：

App({
  globalData: {
    apiUrl: "https://api.example.com"
  },
  request: function (url, data, successCallback, errorCallback) {
    wx.request({
      url: this.globalData.apiUrl + url,
      data: data,
      success: successCallback,
      fail: errorCallback
    })
  }
})

然后在另一个页面中使用这个全局方法：

// detail.js

const app = getApp()

Page({
  onLoad: function () {
    app.request('/api/detail', {}, function (res) {
      console.log(res)
    }, function (error) {
      console.log(error)
    })
  }
})

以上代码定义了一个详情页，该页面在加载时向服务器请求数据，并将返回结果打印到控制台上。