uni-app配置

最新推荐文章于 2023-11-18 11:23:42 发布

Swag。

最新推荐文章于 2023-11-18 11:23:42 发布

阅读量538

点赞数

分类专栏： uni-app 文章标签：小程序

原文链接：https://uniapp.dcloud.io

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

题外话：
2020的开年貌似就很不顺,大家应该都在远程办公吧,敲代码的时候也别忘了要放松放松锻炼一下奥
逆战不停，奋斗不止！！！

pages.json-------------uni-app 全局配置文件
manifest.json----------应用的配置文件
package.json----------扩展配置文件
vue.config.js-----------可选配置文件
uni.scss-----------------全局样式文件
App.vue-----------------页面入口文件
main.js-------------------uni-app入口文件

pages.json

属性	类型	必填	描述	平台兼容
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则	2.5.0+
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
subPackages	Object Array	否	分包加载配置
preloadRule	Object	否	分包预下载规则	微信小程序
workers	String	否	`Worker` 代码放置的目录	微信小程序

globalStyle :

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

"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents":{
            "collapse-tree-item":"/components/collapse-tree-item"
        },

pages

第一个path即为首页

    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件"
        }
    }, {
        "path": "pages/API/index",
        "style": {
            "navigationBarTitleText": "接口"
        }
        ...
    }],

style

用于设置每个页面的状态栏、导航条、标题、窗口背景色等,会覆盖globalStyle的样式

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色（同状态栏背景色），如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationBarShadow	Object		导航栏阴影，配置参考下方导航栏阴影
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效	微信小程序（iOS）、百度小程序（iOS）
backgroundColor	HexColor	#ffffff	窗口的背景色	微信小程序、百度小程序、头条小程序
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTop	HexColor	#ffffff	顶部窗口的背景色（bounce回弹区域）	仅 iOS 平台
backgroundColorBottom	HexColor	#ffffff	底部窗口的背景色（bounce回弹区域）	仅 iOS 平台
titleImage	String		导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址	支付宝小程序、H5
transparentTitle	String	none	导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明	支付宝小程序、H5、APP
titlePenetrate	String	NO	导航栏点击穿透	支付宝小程序、H5
app-plus	Object		设置编译到 App 平台的特定样式，配置项参考下方 app-plus	App
h5	Object		设置编译到 H5 平台的特定样式，配置项参考下方 H5	H5
mp-alipay	Object		设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY	支付宝小程序
mp-weixin	Object		设置编译到 mp-weixin 平台的特定样式	微信小程序
mp-baidu	Object		设置编译到 mp-baidu 平台的特定样式	百度小程序
mp-toutiao	Object		设置编译到 mp-toutiao 平台的特定样式	字节跳动小程序
mp-qq	Object		设置编译到 mp-qq 平台的特定样式	QQ小程序
usingComponents	Object		引用小程序组件，参考小程序组件	App、微信小程序、支付宝小程序、百度小程序
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色（同状态栏背景色），如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationBarShadow	Object		导航栏阴影，配置参考下方导航栏阴影
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效	微信小程序（iOS）、百度小程序（iOS）
backgroundColor	HexColor	#ffffff	窗口的背景色	微信小程序、百度小程序、头条小程序
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTop	HexColor	#ffffff	顶部窗口的背景色（bounce回弹区域）	仅 iOS 平台
backgroundColorBottom	HexColor	#ffffff	底部窗口的背景色（bounce回弹区域）	仅 iOS 平台
titleImage	String		导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址	支付宝小程序、H5
transparentTitle	String	none	导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明	支付宝小程序、H5、APP
titlePenetrate	String	NO	导航栏点击穿透	支付宝小程序、H5
app-plus	Object		设置编译到 App 平台的特定样式，配置项参考下方 app-plus	App
h5	Object		设置编译到 H5 平台的特定样式，配置项参考下方 H5	H5
mp-alipay	Object		设置编译到 mp-alipay 平台的特定样式，配置项参考下方MP-ALIPAY	支付宝小程序
mp-weixin	Object		设置编译到 mp-weixin 平台的特定样式	微信小程序
mp-baidu	Object		设置编译到 mp-baidu 平台的特定样式	百度小程序
mp-toutiao	Object		设置编译到 mp-toutiao 平台的特定样式	字节跳动小程序
mp-qq	Object		设置编译到 mp-qq 平台的特定样式	QQ小程序
usingComponents	Object		引用小程序组件，参考小程序组件	App、微信小程序、支付宝小程序、百度小程序

easycom

只需符合components/组件名称/组件名称.vue目录结构,即可使用

  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
        "uni-(.*)": "@/components/uni-$1.vue"
    }
  }

tabbar

至少2个至多5个,第一次切换时onLoad加载页面；之后缓存只触发onShow事件,顶部tabBar仅微信小程序支持，position:top，不显示icon（此项建议用插件）

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white	App 2.3.4+ 支持其他颜色值
blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持
fontSize	String	否	10px	文字默认大小	App 2.3.4+
iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）	App 2.3.4+
spacing	String	否	3px	图标和文字的间距	App 2.3.4+
height	String	否	50px	tabBar 默认高度	App 2.3.4+
midButton	Object	否		中间按钮仅在 list 项为偶数时有效	App 2.3.4+

condition

配置小程序直达页面(可非首页)

"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"
        }
    ]
}

subPackages

小程序分包加载机制，在5+app始终为整包，wx/baidu每个分包2M，总不超出8M

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

preloadRule

分包预加载配置 ,见上图

manifest.json：应用配置

用于指定应用的名称、图标、权限等

属性	类型	默认值	描述	最低版本
name	String		应用名称
appid	String	新建 uni-app 项目时，DCloud 云端分配。用途详见	应用标识
description	String		应用描述
versionName	String		版本名称，例如：1.0.0。详见下方Tips说明
versionCode	String		版本号，例如：36
transformPx	Boolean	true	是否转换项目的px，为true时将px转换为rpx，为false时，px为传统的实际像素
networkTimeout	Object		网络超时时间，详见
debug	Boolean	false	是否开启 debug 模式，开启后调试信息以 `info` 的形式给出，其信息有页面的注册，页面路由，数据更新，事件触发等
uniStatistics	Object		是否开启 uni 统计，全局配置	2.2.3+
app-plus	Object		App 特有配置
h5	Object		H5 特有配置
quickapp	Object		快应用特有配置，即将支持
mp-weixin	Object		微信小程序特有配置
mp-alipay	Object		支付宝小程序未提供可配置项
mp-baidu	Object		百度小程序特有配置
mp-toutiao	Object		头条小程序特有配置	1.6.0
mp-qq	Object		qq 小程序特有配置	2.1.0

uni.scss:全局样式配置文件

整体控制应用的风格。比如按钮颜色、边框风格等

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;

注：

使用前需在HBuilderX安装scss插件
使用时需要在 style 节点上加上 lang=“scss”
编译时若node-sass安装不上,请先卸载，然后通过淘宝镜像安装
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

Swag。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
uni-app配置

题外话：2020的开年貌似就很不顺,大家应该都在远程办公吧,敲代码的时候也别忘了要放松放松锻炼一下奥逆战不停，奋斗不止！！！pages.json配置项列表globalStylepagesstyle自定义导航栏使用注意app-plush5mp-alipayFAQeasycomtabBarconditionsubPackagespreloadRuleFAQmanifest.jsonpac...
复制链接

扫一扫