web学习笔记（七十三）微信小程序

1. 微信公众平台和微信开放平台

1.1 微信公众平台：

微信公众平台是用于创建和管理公众号和小程序，主要面向内容传播和客户服务的平台。

1.2 微信开放平台：

微信开放平台是用于开发者接入微信生态系统，开发应用和服务，主要面向技术开发和创新的第三方平台。比如自己研发的系统需要接入微信支付或者需要微信登录等功能。

2.全局配置和局部配置

2.1 全局配置

我们可以通过小程序根目录下的

app.json

文件用来对微信小程序进行全局配置

（1） "pages": [] 用来定义小程序的所有页面路径，默认展示数组第一项的页面。

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

（2） "renderer"和 "rendererOptions"是小程序的渲染配置，如果我们不想使用自带的navigation-bar时需要删除相关配置，此处的渲染配置也需要进行删除操作，否则会产生警告。

  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },

（3） "window" 是用来定义小程序的窗口表现的配置项。这些配置项包括小程序的基本信息、样式、导航栏、背景颜色等。以下是一些常见的

"window"

配置项及其作用：

1. navigationBarBackgroundColor：导航栏背景颜色。
2. navigationBarTextStyle：导航栏标题颜色，支持 "black" 或 "white"。
3. navigationBarTitleText：导航栏标题文字内容。
4. backgroundColor：窗口的背景色。
5. backgroundTextStyle：下拉 loading 的样式，仅支持 "dark" 或 "light"。
6. enablePullDownRefresh：是否开启下拉刷新。
7. onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位为 px。
8. disableScroll：设置为 true 则页面整体不能上下滚动。

（4）

"tabBar"

是用来定义底部导航栏的配置项。底部导航栏（Tab Bar）通常用于在不同页面之间进行快速导航，用户可以通过点击底部的图标或文本切换到不同的页面。以下是

"tabBar"

配置中常见的选项：

1. list：定义底部导航的按钮列表，最少配置两个，最多配置五个，每个按钮包含以下属性：- pagePath：页面路径，必须是在 "pages" 数组中定义过的页面路径。- text：按钮文字，长度不超过 4 个字符。- iconPath：按钮图标路径，建议尺寸为 81px * 81px，支持网络图片路径或本地路径。- selectedIconPath：按钮选中时的图标路径，建议尺寸为 81px * 81px，支持网络图片路径或本地路径。
2. color：底部导航栏的默认文字颜色，例如 "#333333"。
3. selectedColor：底部导航栏的选中态文字颜色，例如 "#ff0000"。
4. backgroundColor：底部导航栏的背景色，例如 "#ffffff"。
5. borderStyle：底部导航栏的边框样式，支持 "black" 或 "white"。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/tabbar/logs.png",
        "selectedIconPath": "images/tabbar/logs_selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/tabbar/mine.png",
        "selectedIconPath": "images/tabbar/mine_selected.png"
      }
    ],
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black"
  }
}

（5）"entryPagePath": "", 用来配置入口页面。

"entryPagePath": "pages/index/index", 

2.2 页面配置

每一个小程序页面也可以使用同名

.json

文件来对本页面的窗口表现进行配置，页面中配置项会覆盖

app.json

的

window

中相同的配置项。