在小程序開發的領域中，掌握視圖與邏輯相關的技能是打造功能完備、用戶體驗良好應用的關鍵。今天，咱們就來深入梳理一下小程序視圖與邏輯的學習要點，并結合代碼示例，讓大家有更直觀的理解。

一、頁面之間的導航跳轉

在小程序里實現頁面跳轉主要有聲明式導航和編程式導航這兩種方式。

1. 聲明式導航：借助?navigator?組件就能輕松實現。假設現在有兩個頁面，分別是?index?頁面和?detail?頁面，想要從?index?頁面跳轉到?detail?頁面，代碼可以這樣寫：

<navigator url="/pages/detail/detail" open-type="navigate">跳轉到詳情頁</navigator>

在這段代碼里，url 屬性指定了要跳轉的目標頁面路徑，open-type 屬性設置為 navigate 表示以普通跳轉的方式打開新頁面。
2. 編程式導航：需要用到微信提供的 API，比如 wx.navigateTo。還是以上面的兩個頁面為例，在 index 頁面的 js 文件里，可以這樣編寫代碼實現跳轉：

Page({goToDetail: function() {wx.navigateTo({url: '/pages/detail/detail'});}
});

然后在?index?頁面的?wxml?文件里添加一個按鈕來觸發這個跳轉函數：

<button bindtap="goToDetail">編程式跳轉到詳情頁</button>

二、實現下拉刷新效果

實現下拉刷新分兩步走，先開啟下拉刷新功能，再監聽下拉刷新事件。

1. 開啟下拉刷新：在頁面的?json?配置文件里，添加?enablePullDownRefresh?屬性并將其值設為?true?即可。例如：

{"enablePullDownRefresh": true
}

1. 監聽下拉刷新事件：在頁面的?js?文件里，通過?onPullDownRefresh?函數來監聽并處理下拉刷新事件。比如，當用戶下拉刷新時，我們從服務器獲取最新數據并更新頁面：

Page({data: {list: []},onPullDownRefresh: function() {wx.showLoading({title: '加載中...'});// 模擬從服務器獲取數據setTimeout(() => {const newData = [1, 2, 3];this.setData({list: newData});wx.hideLoading();wx.stopPullDownRefresh();}, 2000);}
});

在這段代碼里，wx.showLoading 用于顯示加載提示，setTimeout 模擬了從服務器獲取數據的過程，獲取到數據后通過 setData 更新頁面數據，最后用 wx.hideLoading 隱藏加載提示，wx.stopPullDownRefresh 停止下拉刷新的動畫效果。

三、實現上拉加載更多效果

實現上拉加載更多需要設置一個屬性和監聽一個事件。

設置上拉處理距離：在頁面的?json?配置文件里，添加?onReachBottomDistance?屬性來設置上拉觸底的距離，單位是?px。例如

{"onReachBottomDistance": 50
}

1. 監聽上拉觸底事件：在頁面的?js?文件里，通過?onReachBottom?函數來監聽上拉觸底事件。當用戶上拉頁面到底部時，加載更多數據并追加到頁面現有數據中：

Page({data: {list: [1, 2, 3],page: 1},onReachBottom: function() {const page = this.data.page + 1;wx.showLoading({title: '加載中...'});// 模擬從服務器獲取更多數據setTimeout(() => {const newData = [4, 5, 6];const newList = this.data.list.concat(newData);this.setData({list: newList,page: page});wx.hideLoading();}, 2000);}
});

在這段代碼里，每次上拉觸底時，page?變量加 1，然后模擬從服務器獲取新數據，通過?concat?方法將新數據追加到現有數據列表中，最后更新頁面數據并隱藏加載提示。

四、小程序中常用的生命周期函數

小程序的生命周期函數分為應用的生命周期函數和頁面的生命周期函數。

1. 應用的生命周期函數：總共只有三個，分別是?onLaunch、onShow?和?onHide。在?app.js?文件里可以定義這些函數。
   • onLaunch：小程序初始化完成時觸發，在這里可以做一些全局的初始化操作，比如獲取用戶登錄態、初始化全局數據等。

App({onLaunch: function() {wx.getStorage({key: 'userInfo',success(res) {this.globalData.userInfo = res.data;}});},globalData: {userInfo: null}
});

• onShow：小程序啟動，或從后臺進入前臺顯示時觸發，可以用來更新頁面顯示狀態。
• onHide：小程序從前臺進入后臺時觸發，比如可以在這里暫停一些正在進行的任務。

1. 頁面的生命周期函數：一個頁面有五個生命周期函數，分別是?onLoad、onShow、onReady、onHide?和?onUnload。
   • onLoad：頁面加載時觸發，常用來獲取頁面的初始數據、接收頁面傳遞的參數等。

Page({data: {id: ''},onLoad: function(options) {this.setData({id: options.id});}
});

• onShow：頁面顯示 / 切入前臺時觸發，用于更新頁面顯示內容。
• onReady：頁面初次渲染完成時觸發，此時可以操作頁面節點，比如設置導航條標題。

Page({onReady: function() {wx.setNavigationBarTitle({title: '當前頁面'});}
});

• onHide：頁面隱藏 / 切入后臺時觸發，可用于暫停頁面相關任務。
• onUnload：頁面卸載時觸發，比如在頁面關閉時清理一些定時器、解綁事件等。

通過對上述小程序視圖與邏輯學習目標的詳細講解和代碼示例，希望大家能對這部分知識有更深入的理解和掌握，在小程序開發的道路上邁出更堅實的步伐