# 微信小程序开发之-app.json

认识app.json

app.json官方给的定义是小程序 公共设置

在这里面可以配置的东西有官方给的定义 微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tabbar

也就是在iOS中 baseViewController、navController、tabbarController的一个结合文件

下面剖析一下这个文件:

app.json剖析

{
    "pages": [],
    "window": {},
    "tabBar": {},
    "networkTimeout": {},
    "debug": true
}
  1. pages 存放页面路径 类型为Array 是唯一一个在app.json必须存在的配置项 接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。 文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。 数组元素最少要2个,最多5个 比如我有四个tabbaritem 让pages一一对应代码如下
"pages": [
    "pages/index/index",
    "pages/order/order",
    "pages/selete/selete",
    "pages/me/me"
  ],

2.window 类型为Object 可选则不设置,他的作用是设置默认页面的窗口表现,也就是用于设置小程序的状态栏、导航条、标题、窗口背景色。

官方属性图:

image.png

代码如下:

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff7e67",
    "navigationBarTitleText": "Q点餐",
    "navigationBarTextStyle": "white"
    "backgroundColor": "#f3f3f3",
    "backgroundTextStyle": "light"
  },

3.tabBar 类型为Object,可以不设置 先看我设置tabbar的完整代码:

"tabBar": {

    "color": "#2D2E3B",
    "selectedColor": "#ff7e67",
    "backgroundColor":"#ffffff",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/tabbar/icon_tabbar_home_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_home_s.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "点菜",
        "color": "#fca900",
        "iconPath": "image/tabbar/icon_tabbar_order_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_order_s.png"
      },
      {
        "pagePath": "pages/selete/selete",
        "text": "已选",
        "color": "#fca900",
        "iconPath": "image/tabbar/icon_tabbar_selected_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_selected_s.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我",
        "color":"#fca900",
        "iconPath": "image/tabbar/icon_tabbar_me_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_me_s.png"
      }
    ]
  },

代码解读

"tabBar": {
    "color": tab 上的文字默认颜色
    
    "selectedColor":tab 上的文字选中时的颜色
    
    "backgroundColor":tab 的背景色
    
    "borderStyle":tabbar上边框的颜色, 仅支持 black/white
    
    "position":默认bottom 可选值 bottom、top, 当设置 position 为 top 时,将不会显示 icon
    
    "list": [tab 的列表,最少2个、最多5个 tab
    
                {
                "pagePath":页面路径,必须在 pages 中先定义 必须设置
                "text": tab 上按钮文字 必须设置
                "iconPath":图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效
                "selectedIconPath":选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效
                },
                {第二个tabbaritem设置
                },
                {第三个tabbaritem设置
                },
                {第四个tabbaritem设置
                }
    ]
}

4.networkTimeout 可以设置各种网络请求的超时时间。

image.png

debug 可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

Android Studio快捷键

最常用快捷键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O ...

3547
来自专栏hbbliyong

Android Studio 快捷键

Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入...

3076
来自专栏hightopo

原 3D拓扑自动布局之Node.js篇

1483
来自专栏進无尽的文章

Java工具篇| Eclipse 常用快捷键

古人云:工欲善其事,必先利其器。快键键作为开发中及其常用的节省开发时间提升效率的方式之一,其重要性不言而喻,也许你可以不使用它,但是当你熟练使用、巧妙使用这些快...

1142
来自专栏小狼的世界

Vimperator:玩酷你的Firefox

First there was a Navigator, then there was an Explorer. Later it was time for a...

1264
来自专栏老马寒门IT

06Vue.js快速入门-Vue组件化开发

组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一,Vue的组件和也...

2855
来自专栏xingoo, 一个梦想做发明家的程序员

[收藏]IntelliJ Idea快捷键

Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化...

3046
来自专栏大前端开发

从编程小白到全栈开发:响应用户的操作

咳嗽连续咳了一个多月,蓝瘦,我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了,我才提起一口气,嘎吱嘎吱的重新转起我这磨损严重的脑袋来。

964
来自专栏极客编程

Cheerio,服务端的JQuery。

cheerio 是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现。它工作于DOM模型上,且解析、操作、呈送都很高效。

1091
来自专栏前端新视界

Vue.js 系列教程 1:渲染,指令,事件

原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可...

2419

扫码关注云+社区

领取腾讯云代金券