學習地址：https://www.bilibili.com/video/BV1sx411z77P

筆記01：https://blog.csdn.net/weixin_44949135/article/details/107181721【目錄結構詳解、事件、input、scroll-view】

筆記02：https://blog.csdn.net/weixin_44949135/article/details/107191256【配置詳解（頁面、窗口、tabBar、debug）】

【p01-p12工程文件】【鏈接：https://pan.baidu.com/s/1TONiLPIOX59nh1EqwfjQLA? ?提取碼：zjxs】

目? ?錄

P9 3.1微信小程序的配置詳解

1、app的頁面配置

2、app的窗口配置

3、app的tabBar配置

4、網絡超時配置

5、debug開啟配置

6、頁面配置

P10?微信小程序的生命周期與app對象的使用

1、APP的生命周期

2、APP對象的使用

P11 3.2.2微信小程序頁面的生命周期和參數傳遞

1、頁面的生命周期

2、頁面跳轉的數據傳遞

2.1、頁面跳轉---wx.navigateTo({})

2.2、頁面跳轉---wx.redirectTo({})?

2.3、頁面跳轉---tabBar

2.4、頁面跳轉---switchTab

2.5、頁面跳轉---傳遞數據

2.6、頁面跳轉---navigator

P12 3.3綜合案例 - 用戶登錄

---

P9 3.1微信小程序的配置詳解

• app的頁面配置
• app的窗口配置
• app的tabBar配置
• 網絡超時配置及debug開啟配置
• 頁面配置

小程序根目錄下的?app.json?文件用來對微信小程序進行全局配置。

1、app的頁面配置

pages

用于指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑（含文件名） 信息。

文件名不需要寫文件后綴，框架會自動去尋找對應位置的?.json,?.js,?.wxml,?.wxss?四個文件進行處理。

數組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對 pages 數組進行修改。

2、app的窗口配置

3、app的tabBar配置

4、網絡超時配置

?

只影響http請求，只影響發起請求的API。

5、debug開啟配置

6、頁面配置

.json：主要是為了覆蓋app.json。

.wxss：主要是為了覆蓋app.wxss。

P10?微信小程序的生命周期與app對象的使用

1、APP的生命周期

手機來電，切換到 后臺。

前后臺切換 --> onShow()、onHide()方法

onShow()、onLaunch()作用：游戲場景切換，暫停xxx行為。

【onHide()：暫停游戲行為、釋放資源；onShow()：開啟游戲行為、讀取資源】

2、APP對象的使用

全局方法、全局變量：每個頁面都可以使用。

P11 3.2.2微信小程序頁面的生命周期和參數傳遞

小程序頁面與APP對象詳解

1、頁面的生命周期

2、頁面跳轉的數據傳遞

2.1、頁面跳轉---wx.navigateTo({})

返回的時候，調用onShow()方法。

?

?

2.2、頁面跳轉---wx.redirectTo({})?

使用 wx.redirectTo?，上一個頁面直接被卸載（onUnload），無返回鍵。

?

2.3、頁面跳轉---tabBar

?

2.4、頁面跳轉---switchTab

switchTab?后面，不能加參數，不能傳遞數據。

2.5、頁面跳轉---傳遞數據

去掉tabBar，點擊“文章1”可以進行跳轉。

"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首頁"},{"pagePath": "pages/logs/logs","text": "詳情"}]},

2.6、頁面跳轉---navigator

<navigator?url="../logs/logs?id=100"?redirect></navigator>

頁面傳值：多個參數 &?

<navigator?url="../logs/logs?id=100&title=標題"?redirect></navigator>

?接收參數：

onLoad:?function?(options)?{

??console.log("---logs?page?onLoad---");

??console.log(options);

??console.log("options?:?"?+?options);

??this.setData({

????articleId:?options.id

??})

},

P12 3.3綜合案例 - 用戶登錄

index.js 頁面初始化代碼

Page({//頁面的初始數據data: {},//生命周期函數--監聽頁面加載onLoad: function (options) {},//生命周期函數--監聽頁面初次渲染完成onReady: function () {},//生命周期函數--監聽頁面顯示onShow: function () {},//生命周期函數--監聽頁面隱藏onHide: function () {},//生命周期函數--監聽頁面卸載onUnload: function () {},//頁面相關事件處理函數--監聽用戶下拉動作onPullDownRefresh: function () {},//頁面上拉觸底事件的處理函數onReachBottom: function () {},//用戶點擊右上角分享onShareAppMessage: function () {} })

app.js?頁面初始化代碼

App({//當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）onLaunch: function () {},//當小程序啟動，或從后臺進入前臺顯示，會觸發 onShowonShow: function (options) {},//當小程序從前臺進入后臺，會觸發 onHideonHide: function () {},//當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息onError: function (msg) {} })

總結

以上是生活随笔為你收集整理的微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。