uni-app的pages.json的各种配置

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

"pages": [ //pages数组中第一项表示应用启动页"path" : "pages/mine/mine","style" : {"app-plus":{//顶部导航栏消失"titleNView":false}}},{"path" : "pages/class/class","style" : {"app-plus":{//导航栏设置"titleNView":{//导航栏控件的背景颜色"backgroundColor":"#fff",//原生导航栏上的搜索框样式 "searchInput":{//非输入状态下文本的对齐方式 center|right|left"align":"left",//提示文本"placeholder":"智能积木 越野四驱车",//提示文本的颜色"backgroundColor":"#f7f7f7",//是否可输入类型: Boolean "disabled":true,//输入框的圆角半径"borderRadius":"5px",//是否自动获取焦点 类型: Boolean "autoFocus":true,},//标题栏上的自定义按钮 类型: Array "buttons":[{ //按钮上文字使用的字体文件路径 "fontSrc":"/static/fonts/iconfont.ttf",//按钮在标题栏上的显示位置 left | right"float":"right",//标题栏控件的标题文字超出显示区域时处理方式//\ue67a 字符"text":"\ue67a",//按钮上的文字颜色"color":"#858585",//按下状态按钮文字颜色 "colorPressed":"",//按钮样式。运行环境中内置按钮样式直接使用，//内置样式忽略fontSrc和text属性。 "type":"直接显示各种按钮随便选",//按钮上文字的粗细 "fontWeight":"bold",}]}}}}],"globalStyle": {//导航栏背景颜色 "backgroundColor":"#000000",//APP与H5为#F7F7F7，小程序平台请参考相应小程序文档"navigationBarBackgroundColor":"#000000",//导航栏标题颜色及状态栏前景颜色，仅支持 black/white"navigationBarTextStyle": "black",//导航栏标题文字内容"navigationBarTitleText": "内容",//导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明"transparentTitle":"支付宝小程序、H5、APP""backgroundColor": "#F8F8F8"},
//底部导航栏
"tabBar":{"color":"#aaa",//当前字体颜色"selectedColor":"f46d01",//点击激活的字体颜色"backgroundColor":"#fff",//背景颜色"list":[{"text":"首页",//字体"iconPath":"static/tab/index.png",//当前图片的颜色"selectedIconPath":"static/tab/index-on.png",//选中图片的颜色"pagePath":"pages/index/index"//路径},{"text":"分类","iconPath":"static/tab/class.png","selectedIconPath":"static/tab/class-on.png","pagePath":"pages/class/class"},{"text":"购物车","iconPath":"static/tab/shop.png","selectedIconPath":"static/tab/shop-on.png","pagePath":"pages/car/car"},{"text":"我的","iconPath":"static/tab/mine.png","selectedIconPath":"static/tab/mine-on.png","pagePath":"pages/mine/mine"}]}

uni-app的pages.json的各种配置相关推荐

uni - app 的 pages.json 文件页面配置与全局配置
1. 新建页面 pages 文件上右键新建页面创建同名目录,注册 pages.json ,使用 scss 页面页面新建完成: 且 pages.json 文件中已经注册,这个注册和原生微信小程序 ...
uniapp的目录结构反思与整理 app.vue【base】pages.json【配置】main.json【框架入口文件】
App.vue 作用是全局样式+全局的生命周期相当于PHP里面的BaseControlller文件 [Base] pages.json作用是配置路由+导航条+选项卡+tabbar ...
pages.json
pages.json概述 pages.json 文件用来对uni-app进行全局配置,决定页面文件的路径.窗口表现.设置多tab页(底部导航)等. pages.json 配置内容 (1)globalS ...
uniapp微信小程序系列（2）pages.json实用配置详解
本篇主要介绍其中几个实用的配置: 1. 配置应用级别样式.tabBar样式 2. 配置前端页面路由.分包路由 3. 配置easycom全局组件(组件无需import引入直接使用) 一. 配置应用级别样 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结最近使用 uni-app 的感受. 使用体验没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和小程序结合的感觉.写类似小程序的标签,有着小程 ...
android string数组转json_移动端开发基础【20】pages.json的配置项pages
uni-app项目是通过pages节点配置应用由哪些页面组成,pages节点接收一个数组,数组每个项都是一个对象,其属性值如下:(1) 属性:path类型:String描述:配置页面路径(2) 属性: ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架.开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验.Uni-a ...

uni-app的pages.json的各种配置

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

uni-app的pages.json的各种配置相关推荐

最新文章

热门文章