小程序配置app.json(页面路径、窗口多tab)

(1)我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
App.json文件

{  
"pages": [    //页面路径
"pages/index/index",    
"pages/logs/index"  
], 
"window": {   
   "navigationBarTitleText": "Demo"  
 }, 
 "tabBar": {  
   "list": [{     
     "pagePath": "pages/index/index",      
     "text": "首页"    
    }, 
    {      
     "pagePath": "pages/logs/logs",      
     "text": "日志"    
   }]  
 },  
"networkTimeout": {    
   "request": 10000,    
   "downloadFile": 10000  
   },  "debug": true}

(2)pages每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
(3)窗口表现设置。用于设置小程序的状态栏、导航条、标题、窗口背景色。app.json :

{  
"window":{   
 "navigationBarBackgroundColor": "#ffffff",  
 //导航栏背景颜色      
 "navigationBarTextStyle": "black",  
 //导航栏标题颜色,仅支持 black/white    
 "navigationBarTitleText": "微信接口功能演示", 
 //导航栏标题文字内容    
 "backgroundColor": "#eeeeee", 
 // 窗口的背景色   
  "backgroundTextStyle": "light"  
  //下拉背景字体、loading 图的样式,仅支持 dark/light  
}
} 
  

在页面的.json里面编写,注意在根节点写,不要画蛇添足加windows节点!page.json文件

{ 
   "navigationBarBackgroundColor": "#ffffff",  
   "navigationBarTextStyle": "black", 
   "navigationBarTitleText": "微信接口功能演示", 
   "backgroundColor": "#eeeeee", 
  "backgroundTextStyle": "light"
}
### 支付宝小程序 `app` 文件配置说明及用法 #### 1. 全局配置文件 `app.json` 支付宝小程序中的 `app.json` 是用于对整个应用进行全局配置的关键文件。此文件决定了页面文件的路径窗口的表现形式、网络超时时间以及 tab 的设置等[^1]。 ```json { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "networkTimeout": { "request": 10000, "downloadFile": 10000 } } ``` 上述 JSON 配置定义了一个简单的应用程序结构,其中包含了两个页面,并设置了导航栏的颜色和文字风格,同时也指定了请求和下载文件的最大等待时间为 10 秒。 #### 2. 应用逻辑脚本 `App.js` 对于希望在整个项目中共享的数据或函数,在 `App.js` 中可以初始化并导出这些资源供各个页面使用。考虑到异步操作可能导致数据获取延迟的问题,建议采用同步机制或者合理安排加载顺序来确保数据能够及时传递给目标页面[^2]。 ```javascript // App.js const app = getApp(); App({ onLaunch() { this.globalData = { userInfo: null }; // 假设这里有一个耗时较长的操作 setTimeout(() => { this.globalData.userInfo = 'some user info'; }, 3000); }, globalData: {} }); ``` 为了使其他页面能安全访问来自 `App.js` 的数据,可以在页面生命周期方法内通过如下方式读取: ```javascript Page({ onLoad(options) { const appInstance = getApp(); console.log(appInstance.globalData.userInfo); // 可能在初次打印时为空 // 如果需要保证一定能获得最新数据,则可监听globalData的变化或其他策略 } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值