小程序的页面配置

小程序的配置

小程序的配置分为全局配置、页面配置以及sitemap 配置

1、全局配置

微信小程序根据app.js 配置来对小程序进行全局配置

属性类型必填描述最低版本
pagesstring[]页面路径列表
windowObject全局的默认窗口表现
tabBarObject底部 tab 栏的表现
networkTimeoutObject网络超时时间
debugboolean是否开启 debug 模式,默认关闭
functionalPagesboolean是否启用插件功能页,默认关闭2.1.0
subpackagesObject[]分包结构配置1.7.3
workersstringWorker 代码放置的目录1.9.90
requiredBackgroundModesstring[]需要在后台使用的能力,如「音乐播放」
pluginsObject使用到的插件1.9.6
preloadRuleObject分包预下载规则2.3.0
resizablebooleaniPad 小程序是否支持屏幕旋转,默认关闭2.3.0
navigateToMiniProgramAppIdListstring[]需要跳转的小程序列表,详见 wx.navigateToMiniProgram2.4.0
usingComponentsObject全局自定义组件配置开发者工具 1.02.1810190
permissionObject小程序接口权限相关设置微信客户端 7.0.0
sitemapLocationstring指明 sitemap.json 的位置
stylestring指定使用升级后的weui样式2.8.0
useExtendedLibObject指定需要引用的扩展库2.2.1
entranceDeclareObject微信消息用小程序打开微信客户端7.0.9

1、1 pages 页面路径

直接在pages选项中写页面路径,即可创建相应的页面
在这里插入图片描述

1、2 windows 窗口设置

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

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。
微信客户端 6.6.0
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为 px。
详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)
#### 示例
 "window": {
    "backgroundTextStyle": "light", 
    "navigationBarBackgroundColor": "#fff", //导航栏背景颜色
    "navigationBarTitleText": "嗨购", //导航栏标题文字内容
    "navigationBarTextStyle": "black" //导航栏标题颜色,仅支持 black / white
  },

1、3 tabBar 底部导航

可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性类型必填默认值描述最低版本
colorHexColortab 上的文字默认颜色,仅支持十六进制颜色
selectedColorHexColortab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColortab 的背景色,仅支持十六进制颜色
borderStylestringblacktabbar 上边框的颜色, 仅支持 black / white
listArraytab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
positionstringbottomtabBar 的位置,仅支持 bottom / top
custombooleanfalse自定义 tabBar,见详情2.5.0
1.3.1 底部选项卡 list

其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

属性类型必填说明
pagePathstring页面路径,必须在 pages 中先定义
textstringtab 上按钮文字
iconPathstring图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
positiontop 时,不显示 icon。
selectedIconPathstring选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
positiontop 时,不显示 icon。
示例
"tabBar": {
    "color": "#333", // 字体的颜色
    "selectedColor": "#f66", // tab 上的文字选中时的颜色
    "borderStyle": "white",//tabbar 上边框的颜色, 仅支持 black / white
    "backgroundColor": "#efefef", //tab 的背景色,
    "list": [ //list 接受一个数组,只能配置**最少 2 个、最多 5 个 tab
      {
        "pagePath": "pages/home/home", //页面路径,必须在 pages 中先定义
        "iconPath": "image/home.png",//图片路径,使用Iconfont
        "selectedIconPath": "image/home_active.png",//选中时图片
        "text": "首页" //tab 上按钮文字
      },
      {
        "pagePath": "pages/kind/kind",
        "iconPath": "image/kind.png",
        "selectedIconPath": "image/kind_active.png",
        "text": "分类"
      }
      ]
  },

1.4 networkTimeout 各类网络请求的超时时间

各类网络请求的超时时间,单位均为毫秒。

属性类型必填默认值说明
requestnumber60000wx.request 的超时时间,单位:毫秒。
connectSocketnumber60000wx.connectSocket 的超时时间,单位:毫秒。
uploadFilenumber60000wx.uploadFile 的超时时间,单位:毫秒。
downloadFilenumber60000wx.downloadFile 的超时时间,单位:毫秒。
"networkTimeout" : {
     "request" :6000,
     "connectSocket" :5000,
     "uploadFile" : 5000,
      "downloadFile" : 5000
  },

1.7 permission 小程序接口权限相关设置

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

属性类型必填默认值描述
scope.userLocationPermissionObject位置相关权限声明

PermissionObject 结构为

属性类型必填默认值说明
descstring小程序获取权限时展示的接口用途说明。最长 30 个字符
 "permission" : {
   "scope.userLocation" : {
     "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
  },
展示效果

在这里插入图片描述

1.8 sitemapLocation

指明 sitemap.json 的位置;默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件
在这里插入图片描述

1.9 navigateToMiniProgramAppIdList

当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序 appId 列表,最多允许填写 10 个。
在这里插入图片描述

2、局部页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮
微信客户端 7.0.0
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为px。
详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)
disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。
只在页面配置中有效,无法在 app.json 中设置
usingComponentsObject页面自定义组件配置1.6.3
.json 文件
{
  "navigationBarBackgroundColor": "#ff4001", //导航栏背景颜色
  "navigationBarTextStyle": "white", //导航栏标题颜色,仅支持 black / white
  "navigationBarTitleText": "嗨购-首页", //导航栏标题文字内容
  "backgroundColorTop": "#efefef", //窗口的背景色
  "backgroundTextStyle": "light", //下拉 loading 的样式,仅支持 dark / light
  "enablePullDownRefresh": true,//是否开启当前页面下拉刷新。
  "onReachBottomDistance": 50, //页面上拉触底事件触发时距页面底部距离,单位为px。
  "disableScroll": false, //设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置
  "usingComponents": { //页面自定义组件配置
    "prolist": "/components/prolist/prolist" //组件路径
  }
}
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值