持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

本文主要介绍uniapp中的全局文件的设置。包括了package.json，vue.config.js, uni.scss,App.vue等，下一篇将介绍小程序如何向uniapp转换

package.json

通过uni-app扩展节点，可以实现自定义条件编译平台，只能扩展web和小程序平台，不能扩展app打包

基本用法

UNI_PLATFORM仅支持填写uni-app默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
browser 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值：chrome、firefox、ie、edge、safari、hbuilderx
package.json文件中不允许出现注释，否则扩展配置无效

{
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "browser":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }
}

h5的基本配置

"uni-app": {
    "scripts": {
        "h5-weixin": { 
            "title":"H5",
            "browser":"chrome",  
            "env": {
                "UNI_PLATFORM": "h5"  
             },
            "define": { 
                "H5-WEIXIN": true 
            }
        }
    }    
}

vue.config.js

自动加载，用于配置webpack属性，对vue生效。

uni.scss

uni.scss文件全局样式文件，可以设置公共的样式，全局有效，可以整体控制应用的风格。设置主题，比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

/* 颜色变量 */

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

/* 文字基本颜色 */
$uni-text-color:#333;

/* 背景颜色 */
$uni-bg-color:#ffffff;

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

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

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

App.vue

App.vue是页面入口文件，所有页面都是在App.vue下进行切换的，是uni-app的主组件。其中包括应用生命周期函数、配置全局样式、配置全局的存储globalData等。

应用生命周期

uni-app 的生命周期函数

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次，同小程序的onLoad）
onShow	当 `uni-app` 启动，或从后台进入前台显示（同小程序的onShow）
onHide	当 `uni-app` 从前台进入后台（同小程序的onHide）
onError	当 `uni-app` 报错时触发

uni-app学习day03-全局文件的使用