qidao123.com技术社区-IT企服评测·应用市场

标题: 微信小程序开辟-配置文件详解 [打印本页]

---

作者: 前进之路    时间: 2024-10-8 08:44
标题: 微信小程序开辟-配置文件详解
一，小程序创建的配置文件介绍

根据图片内容，微信小程序中包罗几种不同的配置文件，每种文件都有其特定的用途和作用。以下是这些配置文件的介绍：

• app.json：
  
  
  
  • 这是小程序的全局配置文件。
    
  • 用于配置小程序的一些全局属性和页面路由。
    
  • 例如，你可以在这里设置小程序的页面路径、窗口表现、网络超时时间、底部 tab 等。
    
  
  
• 页面.json：
  
  
  
  • 每个小程序页面都可以有一个对应的.json配置文件，称为局部配置文件。
    
  • 用于配置当前页面的窗口样式、导航栏标题、导航栏颜色等。
    
  • 这些配置仅对该页面有效。
    
  
  
• project.config.json：
  
  
  
  • 这是小程序项目的配置文件。
    
  • 用于生存项目的一些配置信息，如项目名称、appid、项目目录布局等。
    
  • 也用于生存开辟者的个人设置。
    
  
  
• sitemap.json：
  
  
  
  • 用于配置小程序及其页面是否允许被微信索引。
    
  • 通过这个文件，可以提高小程序在微信搜索引擎中的搜索概率，从而增长小程序的曝光率。
    
  
  
• project.private.config.json：
  
  
  
  • 这是一个私有的项目配置文件。
    
  • 通常用于存储敏感信息或不应提交到版本控制系统的配置，如API密钥等。
    
  
  

二，配置文件-全局配置-pages 配置

在微信小程序的全局配置文件app.json中，pages字段饰演着至关重要的角色。以下是pages字段的作用和留意事项：
作用：

• 界说页面路径：
  
  
  
  • pages字段用来指定小程序由哪些页面组成。
    
  • 它界说了小程序中所有页面的路径，让小程序知道页面界说在哪个目录。
    
  
  
• 页面路由：
  
  
  
  • 通过pages数组，小程序框架可以或许知道如何根据路径加载对应的页面。
    
  • 它不需要写文件后缀，框架会自动查找对应位置的.json、.js、.wxml、.wxss四个文件举行处理。
    
  
  
• 初始页面：
  
  
  
  • 假如没有指定entryPagePath，数组的第一项代表小程序的初始页面（首页）。
    
  
  

留意事项：

• 文件后缀：
  
  
  
  • 在配置pages字段时，不需要写文件后缀，如index而不是index.wxml。
    
  
  
• 动态修改：
  
  
  
  • 小程序中新增或减少页面时，都需要对pages数组举行相应的修改。
    
  
  
• 初始页面：
  
  
  
  • 假如没有指定entryPagePath，数组的第一项自动成为小程序的初始页面。
    
  
  
• 路径格式：
  
  
  
  • 路径应该以斜杠/开头，表示相对于项目根目录的路径。
    
  
  
• 数组顺序：
  
  
  
  • pages数组中的顺序会影响小程序的页面加载顺序。
    
  
  

示例：

1. {
2.   "pages": [
3.     "pages/index/index",
4.     "pages/logs/logs",
5.     "pages/about/about"
6.   ]
7. }

复制代码

在这个示例中：

• pages/index/index 是小程序的初始页面。
  
• pages/logs/logs 和 pages/about/about 是其他页面。
  

通过合理配置pages字段，可以确保小程序的页面布局清楚，便于管理和维护。
三，配置文件-全局配置-window 配置

参考官方文档

在微信小程序的全局配置文件app.json中，window字段用于设置小程序的状态栏、导航条、标题、窗口配景色等全局样式属性。以下是window配置的作用：

• 状态栏样式：
  
  
  
  • 可以设置状态栏的颜色、隐藏或显示等。
    
  
  
• 导航栏样式：
  
  
  
  • 可以设置导航栏的颜色、字体颜色、配景色等。
    
  
  
• 导航栏标题：
  
  
  
  • 可以设置导航栏标题的文本内容、字体巨细、字体颜色等。
    
  
  
• 窗口配景色：
  
  
  
  • 可以设置小程序窗口的配景颜色。
    
  
  
• 导航栏高度：
  
  
  
  • 可以设置导航栏的高度。
    
  
  
• 下拉配景字体色：
  
  
  
  • 可以设置下拉时配景字体的颜色。
    
  
  
• 下拉配景色：
  
  
  
  • 可以设置下拉时配景的颜色。
    
  
  
• 导航栏阴影：
  
  
  
  • 可以设置导航栏的阴影效果。
    
  
  
• 导航栏圆角：
  
  
  
  • 可以设置导航栏的圆角效果。
    
  
  
• 导航栏边框：
  
  
  
  • 可以设置导航栏的边框。
    
  
  

示例：

1. {
2.   "window": {
3.     "navigationBarTitleText": "小程序标题",
4.     "navigationBarBackgroundColor": "#ffffff",
5.     "navigationBarTextStyle": "black",
6.     "backgroundColor": "#eeeeee",
7.     "backgroundTextStyle": "light",
8.     "navigationBarShadow": "#000000",
9.     "navigationStyle": "custom",
10.     "enablePullDownRefresh": true
11.   }
12. }

复制代码

在这个示例中：

• navigationBarTitleText 设置导航栏标题为“小程序标题”。
  
• navigationBarBackgroundColor 设置导航栏配景颜色为白色。
  
• navigationBarTextStyle 设置导航栏笔墨颜色为黑色。
  
• backgroundColor 设置窗口的配景颜色为浅灰色。
  
• backgroundTextStyle 设置下拉时配景字体颜色为浅色。
  
• navigationBarShadow 设置导航栏的阴影效果。
  
• navigationStyle 设置导航栏样式为自界说。
  
• enablePullDownRefresh 启用下拉革新功能。
  

通过合理配置window字段，可以确保小程序的界面风格同一，提升用户体验。
四，配置文件-全局配置-tabbar 配置

在微信小程序的全局配置文件app.json中，tabBar字段用于界说小程序的底部 tab 栏，它允许用户快速在不同的页面间切换。

以下是tabBar的核心作用和配置项。
核心作用：

• 页面快速切换：
  
  
  
  • 提供一个直观的界面元素，让用户可以快速在不同的页面间切换。
    
  
  
• 持久显示：
  
  
  
  • 在小程序的底部或顶部持久显示，方便用户随时访问。
    
  
  
• 提升用户体验：
  
  
  
  • 通过直观的图标和文本，提高用户的操作便利性和小程序的用户体验。
    
  
  

配置项：

• list：
  
  
  
  • 一个数组，界说了 tab 栏中的所有 tab 项，最少包罗 2 个，最多 5 个。
    
  
  
• pagePath：
  
  
  
  • 指定 tab 对应页面的路径。
    
  
  
• iconPath：
  
  
  
  • 指定 tab 的默认图标路径。
    
  
  
• selectedIconPath：
  
  
  
  • 指定 tab 被选中时的图标路径。
    
  
  
• text：
  
  
  
  • 指定 tab 的笔墨形貌。
    
  
  
• borderStyle：
  
  
  
  • 指定 tab 栏边框的颜色。
    
  
  
• backgroundColor：
  
  
  
  • 指定 tab 栏的配景色。
    
  
  
• color：
  
  
  
  • 指定 tab 的笔墨和图标的默认颜色。
    
  
  
• selectedColor：
  
  
  
  • 指定 tab 被选中时的笔墨和图标颜色。
    
  
  

示例配置：

1. {
2.   "tabBar": {
3.     "list": [
4.       {
5.         "pagePath": "pages/index/index",
6.         "text": "首页",
7.         "iconPath": "path/to/icon.png",
8.         "selectedIconPath": "path/to/selected-icon.png"
9.       },
10.       {
11.         "pagePath": "pages/category/category",
12.         "text": "分类",
13.         "iconPath": "path/to/icon.png",
14.         "selectedIconPath": "path/to/selected-icon.png"
15.       }
16.     ],
17.     "borderStyle": "black",
18.     "backgroundColor": "#ffffff",
19.     "color": "#000000",
20.     "selectedColor": "#3cc51f"
21.   }
22. }

复制代码

在这个示例中：

• list 数组界说了两个 tab 项，每个项都包罗页面路径、文本、默认图标和选中图标。
  
• borderStyle、backgroundColor、color 和 selectedColor 分别界说了 tab 栏的边框颜色、配景色、默认笔墨颜色和选中笔墨颜色。
  

通过合理配置tabBar，开辟者可以创建一个既雅观又实用的导航栏，提升小程序的团体体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4