技術標籤：小程式uni-app

生命週期

• uni-app框架的生命週期結合了vue和微信小程式的生命週期
• 全域性app使用onLaunch表示應用啟動時 （第一類：全域性）
• 頁面中使用onLoad或者onShow分別表示頁面載入完畢時和頁面顯示時（第二類：頁面）
• 元件中使用mounted元件掛載完畢時（第三類：元件）

App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch 應用啟動')
		},
		globalData: {
			base: "www.360.com"
		}
	}
</script>
 

index.vue

<template>
    <view class="content">
        <my-form>
            <view>
                <!--第一步：定義標籤-->
                <input type="text">
                <radio/>
                <checkbox />
            </view>
        </my-form>
    </view>
</template>

<script>
import myForm from "@/components/my-form";
export default {
    components: {
        myForm
    },
    onLoad() {
        console.log("onLoad 頁面載入完畢");
    },
    onShow() {
        console.log("onShow 頁面被看到");
    }
}
</script>
 

my-form.vue

<template>
    <view class="form">
        <view class="form_title">title</view>
        <view class="form_content">
            <slot></slot> <!-- 第二步： 定義slot-->
        </view>
    </view>
</template>

<script>
    export default {
        onLoad() { // 實際不生效（my-form是元件，不是頁面）
            console.log("myForm onLoad");
        },
        mounted() {
            console.log("myForm mounted 元件掛載完畢");
        }
    }
</script>
 

my-form.vue中無法使用onLoad之類的生命週期函式，只能使用mounted。

生命週期參考資料

uni-app https://uniapp.dcloud.io/frame?id=生命週期
vue https://cn.vuejs.org/v2/guide/instance.html?生命週期圖示
微信小程式 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html