IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 关于uniapp配置文件的理解 -> 正文阅读

[游戏开发]关于uniapp配置文件的理解

首先uniapp类似于vue构建项目的时候也是有pages.json这个文件
首先介绍下一个基本的pages.json文件

{
  "pages": [{
    "path": "pages/component/index",
    "style": {
      "navigationBarTitleText": "组件"
    }
  }, {
    "path": "pages/API/index",
    "style": {
      "navigationBarTitleText": "接口"
    }
  }, {
    "path": "pages/component/view/index",
    "style": {
      "navigationBarTitleText": "view"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "接口"
    }]
  }
}

配置项里面总共有四大类

配置项类型是否为空作用
globalStyleObject设置默认页面的窗口表现
pagesObject Array设置页面路径及窗口表现
tabBarObject设置底部 tab 的表现
conditionObject启动模式配置

然后我们首先介绍
globalStyle
它是用于设置应用的状态栏、导航条、标题、窗口背景色等。
里面的配置就是以下的

配置项类型作用
navigationBarBackgroundColorHexColor (#000000)导航栏背景颜色
navigationBarTextStyleString (white )导航栏标题颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationStyleString(default )导航栏样式,仅支持 default/custom
backgroundColorHexColor (#ffffff )窗口的背景色 微信小程序

注意:navigationStyle 只在 pages.json->globalStyle 中设置生效。开启 custom 后,所有窗口均无导航栏。

接着是
pages
它接收一个数组,来指定应用由哪些页面组成。每一项代表对应页面的信息,应用中新增/减少页面,都需要对 pages 数组进行修改。
文件名不需要写后缀,框架会自动寻找路径下的页面资源。
它里面一般有两个对象一个是page,另一个是style
在pege里面需要去寻找文件路径

然后style也有配置项

配置项类型作用
navigationBarBackgroundColorHexColor (#000000)导航栏背景颜色
navigationBarTextStyleString (white )导航栏标题颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor (#ffffff )窗口的背景色 微信小程序
backgroundTextStyleString(dark )下拉 loading 的样式,仅支持 dark/light
enablePullDownRefreshBoolean(false )是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistanceNumber (50)页面上拉触底事件触发时距页面底部距离,单位为px
navigationStyleString (default )导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮。 微信小程序
backgroundColorTopString (#ffffff)顶部窗口的背景色。 微信小程序且为 iOS
backgroundColorBottomString (#ffffff)底部窗口的背景色。 微信小程序且为 iOS

注意:pages节点的第一项为应用入口页(即首页)。

{
  "pages": [{
      "index": {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页",//设置页面标题文字
          "enablePullDownRefresh":true//开启下拉刷新
        }
      }
    },
    ...
  ]
}

文件实例

tabBar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。
当设置 position 为 top 时,将不会显示 icon
tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
首先他的属性如下

配置项类型是否为空作用
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleString(black)tabbar 上边框的颜色,仅支持 black/white
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
positionString(bottom )可选值 bottom、top

其中list是一个数组,数组的每一项都是一个对象,其配置如下

配置项类型是否为空作用
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

代码实例

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "接口"
    }]
  }

condition
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

属性如下

配置项类型是否为空作用
currentNumber当前激活的模式,list节点的索引值
listArray启动模式列表

list属性如下

配置项类型是否为空作用
nameString启动模式名称
pathString启动页面路径
queryString启动参数,可在页面的 onLoad 函数里获得

代码配置如下

"condition": { //模式配置,仅开发期间生效
    "current": 0, //当前激活的模式(list 的索引项)
    "list": [{
            "name": "swiper", //模式名称
            "path": "pages/component/swiper/swiper", //启动页面,必选
            "query": "interval=4000&autoplay=false" //启动参数,在页面的onLoad函数里面得到。
        },
        {
            "name": "test",
            "path": "pages/component/switch/switch"
        }
    ]
}
  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-03-10 22:58:11  更:2022-03-10 22:58:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/27 14:31:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码