16 项目结构

App.vue

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效
• 应用启动参数，可以在API uni.getLaunchOptionsSync获取
• App.vue 不能写模
• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

    <!-- https://uniapp.dcloud.net.cn/collocation/App.html -->
    <script>
    	// 只能在App.vue里监听应用的生命周期
    	export default {
    		onLaunch: function() {
    			console.log('App Launch')
    		},
    		onShow: function() {
    			console.log('App Show')
    		},
    		onHide: function() {
    			console.log('App Hide')
    		}
    	}
    </script>

Main.js

main.js是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。

首先引入了Vue库和App.vue，创建了一个vue实例，并且挂载vue实例

    import Vue from 'vue'
    import App from './App'
    import pageHead from './components/page-head.vue' //全局引用 page-head 组件
    
    Vue.config.productionTip = false
    Vue.component('page-head', pageHead) //全局注册 page-head 组件，每个页面将可以直接使用该组件
    App.mpType = 'app'
    
    const app = new Vue({
    ...App
    })
    app.$mount() //挂载 Vue 实例

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项

uni.scss

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

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

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

以下是 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;

uni_modules

？？