欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

我們寫(xiě)小程序時(shí)都要跳轉(zhuǎn)頁(yè)面的，也會(huì)有底部導(dǎo)航來(lái)進(jìn)行切換 

這個(gè)時(shí)候就要介紹下窗口是怎樣配置的

要在app.json文件里寫(xiě)一個(gè)tabBer對(duì)象 里面在定義一個(gè)list數(shù)組里面放我們定義的幾個(gè)需要切換的頁(yè)面 如下 最多l(xiāng)ist里面可以定義5個(gè)對(duì)象

 在微信小程序里我們創(chuàng)建文件挺簡(jiǎn)單的 如下圖

 比如說(shuō)就在上面圖片的最下面直接寫(xiě)pages/文件名/文件名 然后保存就行了  這樣文件夾就創(chuàng)建成功了

 然后我再說(shuō)下小程序的文件類型  小程序的文件類型分別有四種

第一種 ：js文件

 這個(gè)home.js里面寫(xiě)的是我們從html標(biāo)簽里面?zhèn)鬟^(guò)來(lái)的點(diǎn)擊事件或者是傳遞參數(shù)時(shí) 要把方法定義在onLoad函數(shù)里 onload是監(jiān)聽(tīng)頁(yè)面加載的

 

如上圖的pages它就是一個(gè)大的對(duì)象

它里面包含著data和我們微信小程序眾多的聲明周期核函數(shù)

它里面的data和我們vue里面的data語(yǔ)義差不多都是一樣的 都是存放變量的

第二種:json文件

 

第三種:wxml文件

 

第四種wxss文件

 

 

 里面寫(xiě)在wxml文件里面起的class類名 在wxss文件里寫(xiě)css樣式

下面我介紹下小程序的生命周期和頁(yè)面的生命周期

• 應(yīng)用生命周期

• 頁(yè)面生命周期

• 應(yīng)用生命周期影響頁(yè)面生命周期

》》》應(yīng)用生命周期

1. 用戶首次打開(kāi)小程序，觸發(fā) onLaunch（全局只觸發(fā)一次）。

2. 小程序初始化完成后，觸發(fā)onShow方法，監(jiān)聽(tīng)小程序顯示。

3. 小程序從前臺(tái)進(jìn)入后臺(tái)，觸發(fā) onHide方法。

4. 小程序從后臺(tái)進(jìn)入前臺(tái)顯示，觸發(fā) onShow方法。

5. 小程序后臺(tái)運(yùn)行一定時(shí)間，或系統(tǒng)資源占用過(guò)高，會(huì)被銷毀。

前臺(tái)、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開(kāi)微信，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開(kāi)小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

在整理本文資料的時(shí)候，有點(diǎn)不解，為什么不把小程序監(jiān)聽(tīng)『銷毀』方法開(kāi)放給開(kāi)發(fā)者，我猜測(cè)是因?yàn)镮OS系統(tǒng)限制『按下Home鍵時(shí)，app從活動(dòng)狀態(tài)轉(zhuǎn)入后臺(tái)，會(huì)被掛起』；微信也不例外，只要運(yùn)行一段時(shí)間或把微信客戶端進(jìn)程殺掉，就無(wú)法通知小程序應(yīng)用被銷毀。

》》》頁(yè)面生命周期

1. 小程序注冊(cè)完成后，加載頁(yè)面，觸發(fā)onLoad方法。

2. 頁(yè)面載入后觸發(fā)onShow方法，顯示頁(yè)面。

3. 首次顯示頁(yè)面，會(huì)觸發(fā)onReady方法，渲染頁(yè)面元素和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次。

4. 當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)，觸發(fā)onHide方法。

5. 當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)，觸發(fā)onShow方法。

6. 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack()，觸發(fā)onUnload

》》》應(yīng)用生命周期影響頁(yè)面生命周期

1. 小程序初始化完成后，頁(yè)面首次加載觸發(fā)onLoad，只會(huì)觸發(fā)一次。

2. 當(dāng)小程序進(jìn)入到后臺(tái)，先執(zhí)行頁(yè)面onHide方法再執(zhí)行應(yīng)用onHide方法。

3. 當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái)，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁(yè)面onShow方法。

 微信小程序跳轉(zhuǎn)頁(yè)面并傳遞參數(shù)的說(shuō)明

微信小程序跳轉(zhuǎn)提供了6中路由跳轉(zhuǎn)方式：

wx.switchTab(Object object)：跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面

即只能跳轉(zhuǎn)到app.json中定義的tabBar頁(yè)面

 

 

wx.redirectTo(Object object)：關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabBar 頁(yè)面

即只能跳轉(zhuǎn)到除了上面注冊(cè)tabBar的頁(yè)面

所以wx.switchTab(Object object)和wx.redirectTo(Object object)是相對(duì)的

wx.navigateTo(Object object)：保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。

與wx.redirectTo的區(qū)別就是是否保存現(xiàn)在的頁(yè)面，比較適用于詳情頁(yè)，經(jīng)常需要跳轉(zhuǎn)回去

wx.navigateBack(Object object)：關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面，可以傳入一個(gè)參數(shù)，作為返回的頁(yè)數(shù)，

wx.navigateBack(2) 返回前2頁(yè)

wx.reLaunch(Object object)：關(guān)閉所有頁(yè)面，打開(kāi)應(yīng)用中的某個(gè)頁(yè)面

<navigate />：直接在wxml中使用該標(biāo)簽包裹，使用url屬性指向跳轉(zhuǎn)的頁(yè)面

傳遞參數(shù)：

直接使用url傳遞，簡(jiǎn)單的數(shù)據(jù)

如：發(fā)送給跳轉(zhuǎn)頁(yè)面

wx.navigateTo({
 
url: '../detail/detail?id=1'
 
})

 

跳轉(zhuǎn)頁(yè)面在onLoad()函數(shù)會(huì)獲取到一個(gè)option（自定義名）的參數(shù)，該參數(shù)就包含了

 
Page({
 
onLoad(options) {
 
console.log(options)
 
}
 
})

 

輸出了

如果是對(duì)象這類數(shù)據(jù)比較多的，也可以用該方法，不過(guò)需要將對(duì)象先轉(zhuǎn)化為字符串，這里使用了JSON.stringify和JSON.parse

 

 

還有就是我們?cè)谛〕绦蛑幸鎯?chǔ)數(shù)據(jù)

我們?cè)陂_(kāi)發(fā)的過(guò)程中，常常會(huì)用到本地存儲(chǔ)，下面我給大家分享一下微信本地存儲(chǔ)的使用。

一、數(shù)據(jù)支持

需要存儲(chǔ)的內(nèi)容。只支持原生類型、Date、及能夠通過(guò)JSON.stringify序列化的對(duì)象。

二、方法

1、同步

（1）wx.setStorageSync();  //存儲(chǔ)值

 

1 try {
2   wx.setStorageSync('key', 'value')
3 } catch (e) {
4 
5  }

 

（2）wx.removeStorageSync();   // 移除指定的值

 

1 try {
2   wx.removeStorageSync('key')
3 } catch (e) {
4   // Do something when catch error
5 }

 

（3）wx.getStorageSync();  // 獲取值

 

1 try {
2   var value = http://www.wxapp-union.com/wx.getStorageSync('key')
3   if (value) {
4     // Do something with return value
5   }
6 } catch (e) {
7   // Do something when catch error
8 }

 

（4）wx.getStorageInfoSync();  // 獲取當(dāng)前 storage 中所有的 key

 

1 try {
2   const res = wx.getStorageInfoSync()
3   console.log(res.keys)
4   console.log(res.currentSize)
5   console.log(res.limitSize)
6 } catch (e) {
7   // Do something when catch error
8 }

 

（5）wx.clearStorageSync();  // 清除所有的key

 

1 try {
2   wx.clearStorageSync()
3 } catch(e) {
4   // Do something when catch error
5 }

 

2、異步

（1）wx.setStorage();  //存儲(chǔ)值

將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中。會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容。數(shù)據(jù)存儲(chǔ)生命周期跟小程序本身一致，即除用戶主動(dòng)刪除或超過(guò)一定時(shí)間被自動(dòng)清理，否則數(shù)據(jù)都一直可用。單個(gè) key 允許存儲(chǔ)的最大數(shù)據(jù)長(zhǎng)度為 1MB，所有數(shù)據(jù)存儲(chǔ)上限為 10MB。

 

1 wx.setStorage({
2   key:"key",
3   data:"value"})

 

（2）wx.removeStorage();   // 移除指定的值

 

1 wx.removeStorage({
2   key: 'key',
3   success (res) {
4     console.log(res)
5   }})

 

（3）wx.getStorage();  // 獲取值

 

1 wx.getStorage({
2   key: 'key',
3   success (res) {
4     console.log(res.data)
5   }})

 

（4）wx.getStorageInfo();  // 獲取當(dāng)前 storage 中所有的 key

 

1 wx.getStorageInfo({
2   success (res) {
3     console.log(res.keys)
4     console.log(res.currentSize)
5     console.log(res.limitSize)
6   }})

 

（5）wx.clearStorage();  // 清除所有的key

 

1 wx.clearStorage()