1. 目录结构

一个uni-app工程,以模板Hello uni-app为例,包含如下目录和文件:

Hello uni-app.png目录结构.png

2. 生命周期

2.1 应用生命周期

uni-app支持如下应用生命周期函数

应用生命周期函数.png

App.vue文件(应用生命周期仅可在App.vue中监听,在其他页面监听无效)

<script>
    export default {
        onLaunch: function () {
            console.log('App Launch')
        },
        onShow: function () {
            console.log('App Show')
        },
        onHide: function () {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
</style>

2.1 页面生命周期

uni-app支持如下页面生命周期函数

页面生命周期函数.png

如:index.vue文件

<template>
    <view class="content">
        <image class="logo" src="../../static/logo.png"></image>
        <view>
            <text class="title">{{title}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }
    .logo{
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }
    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>