配置项列表

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

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

#配置项列表

属性 类型 必填 描述 平台兼容
globalStyle Object 设置页面的窗口表现  
pages Object Array 设置页面路径及窗口表现  
easycom Object 组件自动引入规则 2.5.5+
tabBar Object 设置底部 tab 的表现  
condition Object 启动模式配置  
subPackages Object Array 分包加载配置  
preloadRule Object 分包预下载规则 微信小程序
workers String Worker 代码放置的目录 微信小程序
leftWindow Object 大屏左侧窗口 H5
topWindow Object 大屏顶部窗口 H5
rightWindow Object 大屏右侧窗口 H5
uniIdRouter Object 自动跳转相关配置,新增于HBuilderX 3.5.0  

以下是一个包含了所有配置选项的 pages.json :

{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置,仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面,必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    	"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      		"iconfont": { // 优先级高于 iconPath,该属性依赖 tabbar 根节点的 iconfontSrc
       			"text": "\ue102",
        		"selectedText": "\ue103",
        		"fontSize": "17px",
        		"color": "#000000",
        		"selectedColor": "#0000ff"
      		}
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字"

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


咱们国内现在手机分为两类,Android手机与苹果手机,现在用的各类APP,为了手机的使用安全,避免下载到病毒软件,官方都极力推荐使用手机自带的应用商城进行下载,但是国内Android手机品类众多,手机商城各式各样,做不到统一,所以Android的APP上架得一个一个平台去申请上架,一直让开发人员头
前言 上一篇做了php的微信登录,所以也总结一下Java的微信授权登录并获取用户信息这个功能的开发流程。 配置 配置什么的就不多说了,详细的配置可以直接前往我上一篇查看。 https://www.cnblogs.com/nothavebug/p/18277732 流程实现(后端)(JAVA)(spr
前言 上一篇文章写到如何上架IOS应用到Appstore,其中漏掉了些许期间遇到的小坑,现在补上 审核不通过原因 5.1.1 Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage 5.1.1(ii) Permission Ap
文件-新建-1.项目 ┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud) │─components 符合vue组件规范的uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─utssdk 存放uts文
Flexbox #Flex 容器 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 nvue布局模型基于 CSS Flexbox,以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含
globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景色等。 属性类型默认值描述平台差异说明 navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色) APP与H5为#F7F7F7,小程序平台请参考相应小程序文档 na
自定义导航栏使用注意 当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题: 非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-
背景图片 uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目大体相同,但需要注意以下几点: 支持 base64 格式图片。 支持网络路径图片。 小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。需以 base64 方式方可
1、云端 发行-原生App-云打包 2、离线 运行-原生App本地打包-生成本地打包资源,如果提示安装依赖包,安装即可 注意:项目的AppID不能为空,请在该项目下的manifest.json中重新获取
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。 #配置
https://uniapp.dcloud.net.cn/
vuex的介绍 vuex是vue.js应用程序中的状态管理模式,它是集中式存储管理所有组件的数据状态,vuex解决了多个视图之间的数据交互同步,不需要进行组件连接再传递数据。 vuex的5大模块 state:用于数据的存储,是store中的唯一数据源 const state =&
开发者、案例数量更多跨平台能力及扩展灵活性更强性能体验优秀周边生态丰富学习成本低开发成本低
pages uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下: 属性类型默认值描述 path String 配置页面路径 style Object 配置页面窗口表现,配置项参考下方 pageStyle
重点: px屏幕像素rpx响应式px屏幕基准:750px公式换算:750*元素在设计稿中的宽度/设计稿基准宽度 例如:设计稿宽度375px,元素在设计稿上的宽度为200px,那么元素在uniapp中的宽度应该设计为750*200/375,即400rpx 尺寸单位 uni-app 支持的通用
运行-运行到浏览器-选择浏览器 运行新项目:真机测试需要打开真机的开发者选项usb安装调试功能
环境搭建:下载Hbuilder X开发者工具 下载Hbuilderhttps://www.dcloud.io/index.htmlhttps://www.dcloud.io/hbuilderx.html 下载windows 正式版,之前有个标准版和App开发版,现在统一了。 下载后解压后直接打开使用
应用生命周期 onLaunch:当整个项目启动,渲染完成时触发(全局只触发一次) onShow:小程序显示出来(从后台进入前台显示,可以触发多次) onHide:小程序隐藏起来时触发(从前台进入后台,可以触发多次) onError: 出现异常时触发 页面生命周期 onLoad 监听页面加载,其参数为
运行-运行到手机或模拟器 注意事项: 1.真机运行时需要开启开发者选项中的USB调试和USB安装,否则app无法通过USB安装到手机或平板中。 2.模拟器功能有,单模拟机没有,需要自己安装,然后开放端口连接设置。
在项目根目录的uni.scss中引入此文件时。先引用一下颜色文件@import "uview-ui/theme.scss";@import "uview-ui/index.scss";