写在前面：分享技术，共同进步，有不足请见谅，相关意见可评论告知 ~

有道无术，术尚可求； 有术无道，终止于术!

多端运行，架式简化； 编程路漫，学无止尽！

文章目录

配置全局配置和页面配置通过globalStyle进行全局配置通过pages来配置页面 配置tabbartabbar未读红点配置位置 SCSSuni.scss App.vueglobalData 小程序UI库

配置

全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

属性类型默认值描述navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色（同状态栏背景色）navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色，仅支持 black/whitenavigationBarTitleTextString导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / lightenablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面生命周期。onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位只支持px，详见[页面生命周期]

通过pages来配置页面

属性类型默认值描述pathString配置页面路径styleObject配置页面窗口表现，配置项参考 pageStyle

pages数组数组中第一项表示应用启动页

"pages": [ 、 { "path":"pages/message/message" }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ]

通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/message/message", "style": { "navigationBarBackgroundColor": "#007AFF", "navigationBarTextStyle": "white", "enablePullDownRefresh": true, "disableScroll": true, "h5": { "pullToRefresh": { "color": "#007AFF" } } } } ]

配置tabbar

底部红线所示

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

当设置 position 为 top 时，将不会显示 icontabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

注意： 配置index 首页内容

属性说明：

属性类型必填默认值描述平台差异说明colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上边框的颜色，仅支持 black/whiteApp 2.3.4+ 支持其他颜色值listArray是tab 的列表，详见 list 属性说明，最少2个、最多5个 tabpositionString否bottom可选值 bottom、toptop 值仅微信小程序支持

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性类型必填说明pagePathString是页面路径，必须在 pages 中先定义textString是tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标iconPathString否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标selectedIconPathString否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

tabbar未读红点

官方文档参考

配置位置

显示

隐藏

SCSS

官方文档参考

uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

uni-app 官方扩展插件（uni ui）及 插件市场 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。

uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。

如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；

使用时需要在 style 节点上加上 lang="scss"。

<style lang="scss"> </style>

关键词 全局、嵌套

App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

globalData

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

以下是 App.vue 中定义globalData的相关配置：

<script> export default { globalData: { text: 'text' } } </script>

js中操作globalData的方式如下： getApp().globalData.text = 'test'

在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。

如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。

onShow() { uni.hideTabBarRedDot({ index:3, success(e) { console.log() } }) uni.showToast({ title:getApp().globalData.author }) }, methods: { getGlobal() { console.log(getApp().globalData.author) } }

小程序UI库

常见小程序UI库：ColorUI、uView、ThorUI、VantUI、uni-ui，grace-ui

推荐：uViewUI 官方文档