小程序模板下载与定制平台
客服QQ客服QQ 客服微信客服微信 公众号公众号

微信小程序app.json文件常用配置说明

微信小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段去掉注释即可。

小程序定义color建议使用16进制颜色

1. pages定义页面路径列表

"pages": [

"pages/news/news",

 "pages/index/index",

"pages/movie/movie",

"pages/logs/logs"

],

2. window 用于设置小程序的状态栏、导航条、标题、窗口背景色

"window": {

"backgroundTextStyle": "light",  // 下拉 loading 的样式,仅支持 dark / light

"navigationBarBackgroundColor": "white",  // 导航栏背景颜色

"navigationBarTitleText": "哈哈", // 导航栏标题内容

"navigationBarTextStyle": "black",  // 导航栏标题颜色 black / white

"navigationStyle": "custom",  // 导航栏样式 默认为default  custom 表示自定义导航栏,只保留右上角

"backgroundColor":"#ffffff"  // 窗口的背景颜色

},

3. tabBar

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

"tabBar": {

"color": "#000",     // 文字默认颜色 

"borderStyle": "black",      //  tabBar上边框的颜色  仅支持 black / white

"selectedColor": "#ff6600",   // tab 上的文字选中时的颜色

 "position":"bottom",  // 位置 top | bottom,

 "custom": "false",    // 自定义tabBar  默认false

"list": [  // tab列表

  {

    "pagePath": "pages/news/news",  // 页面路径

    "text": "新闻",  // tab 上按钮文字

    "iconPath": "pages/images/yuedu.png",  //  图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

当 position 为 top 时,不显示 icon。

    "selectedIconPath": "pages/images/193.jpg"  //  选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

当 position 为 top 时,不显示 icon。

  },

  {

    "pagePath": "pages/movie/movie",

    "text": "电影",

    "iconPath": "pages/images/diany.png",

    "selectedIconPath": "pages/images/506.jpg"

  }

]

},

4. networkTimeout

各类网络请求的超时时间,单位均为毫秒 默认值60000

"networkTimeout": {

"request": 10000,  //  wx.request 的超时时间

"downloadFile": 10000,  // wx.downloadFile 的超时时间

"connectSocket": 10000,  // wx.connectSocket 的超时时间

"uploadFile": 10000  // wx.uploadFile 的超时时间

},

5. debug

可以在开发者工具中开启 debug 模式

"debug": true,

6. requiredBackgroundModes

申明需要后台运行的能力,类型为数组 目前支持audio后台音乐播放 / location 后台定位

"requiredBackgroundModes": ["audio", "location"],

7. permission

小程序接口权限相关设置。字段类型为 Object

"permission": {

"scope.userLocation": {  // 位置相关权限声明

  "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位

}

},

8. style

微信小程序基础组件样式升级

"style": "v2",

完整app.json文件

{

"pages": [

    "pages/news/news",

    "pages/index/index",

    "pages/movie/movie",

    "pages/logs/logs"

],

"window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "white",

    "navigationBarTitleText": "哈哈",

    "navigationBarTextStyle": "black",

    "navigationStyle": "custom",

    "backgroundColor": "#ffffff"

},

"tabBar": {

    "color": "#000",

    "borderStyle": "black",

    "selectedColor": "#ff6600",

    "position": "bottom",

    "custom": "false",

    "list": [

        {

            "pagePath": "pages/news/news",

            "text": "新闻",

            "iconPath": "pages/images/yuedu.png",

            "selectedIconPath": "pages/images/193.jpg"

        },

        {

            "pagePath": "pages/movie/movie",

            "text": "电影",

            "iconPath": "pages/images/diany.png",

            "selectedIconPath": "pages/images/506.jpg"

        }

    ]

},

"networkTimeout": {

    "request": 6000, 

    "downloadFile": 60000, 

    "connectSocket": 60000 ,

    "uploadFile": 60000 

},

"debug": true,

"requiredBackgroundModes": [

    "audio",

    "location"

],

"permission": {

    "scope.userLocation": { 

        "desc": "你的位置信息将用于小程序位置接口的效果展示" 

    }

},

"style": "v2"

}

TAG标签:小程序配置 app.json配置

上一个:第一页
下一个:小程序开发工具常用快捷键 掌握了就能提高效率

小程序模板

免责声明:本站资源均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。

咨询客服

QQ:1847629575

全年 09:00-23:00

(其他时间请留言)

在线客服

Copyright©2021 www.why114.com 瓦窑模板 版权所有 鲁ICP备20017802号

展开