支付寶小程序中生命週期的學習

支付寶小程序生命週期官方文檔

https://docs.alipay.com/mini/framework/page

支付寶小程序生命週期方法的說明

• onLoad: 頁面加載。一個頁面只會調用一次，query 參數爲 my.navigateTo 和 my.redirectTo 中傳遞的 query 對象。
• onShow: 頁面顯示。每次頁面顯示都會調用一次。
• onReady: 頁面初次渲染完成。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。對界面的設置，如 my.setNavigationBar 請在 onReady 之後設置。
• onHide: 頁面隱藏。當 my.navigateTo 到其他頁面或底部 tab 切換時調用。
• onUnload: 頁面卸載。當 my.redirectTo 或 my.navigateBack 到其他頁面的時候調用。

 

在項目的 pages/index/index.js  中

代碼： 

Page({
	data: {
		name: '支付寶小程序'
	},
	onLoad(query) {
		// 頁面加載
		// 在這裏請求接口
		console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
	},
	onReady() {
		// 頁面加載完成
	},
	onShow() {
		// 頁面顯示
	},
	onHide() {
		// 頁面隱藏
	},
	onUnload() {
		// 頁面被關閉
	},
	onTitleClick() {
		// 標題被點擊
	},
	onPullDownRefresh() {
		// 頁面被下拉
	},
	onReachBottom() {
		// 頁面被拉到底部
	},
	onShareAppMessage() {
		// 返回自定義分享信息
		return {
			title: 'My App',
			desc: 'My App description',
			path: 'pages/index/index',
		};
	},
	change() {
		// 事件處理
		console.log('我是點擊事件')
		my.navigateTo({ url: '../my/my' })
	},
	changeName() {
		// 事件處理
		this.setData({
			name: '改變了'
		})
	}
});

 在項目的 pages\index\index.axml 中

<!-- 小程序收藏組件，更多高級用法請參考文檔：https://docs.alipay.com/mini/component/component-favorite -->
<favorite>收藏小程序，下次使用更方便
</favorite>
<view class="index">  this is a blank page	
	<view class="btn-area">
		 <button type="primary" onTap="change">跳轉到my</button>
		 <button type="primary" onTap="changeName">改變name</button>
		 <navigator url="../my/my" hover-class="navigator-hover">點擊跳轉到新頁面</navigator>
		 <text>{{name}}</text>
	</view>
</view>