小程式監聽傳回鍵_詳解微信小程式

1，視窗配置

app.json

檔案用來對微信小程式進行全局配置。

一、配置頁面路徑

小程式監聽傳回鍵_詳解微信小程式

二、window 配置全局預設的視窗

小程式監聽傳回鍵_詳解微信小程式

navigationBarTextStyle：導航欄的标題顔色

navigationBarTitleText:導航欄的文字

navigationBarBackgroundColor：導航欄的背景顔色；

backgroundColor:視窗的背景色

三、tabar 導覽列

小程式監聽傳回鍵_詳解微信小程式

color：HexColor 必填導覽列的預設顔色

selectedColor：HexColor 必填文字選中的顔色

backgroundColor：HexColor 必填背景色

borderStyle:邊框顔色

list:tarbar清單最多5個

list 數組中各項介紹

pagePath:頁面路徑，必須在 pages 中先定義

text:文本資訊

iconPath：圖檔路徑

selectedIconPath：選中中時的圖檔路徑

當 position 為 top 時，不顯示 icon。

四、請求時間

12345

networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

12345

networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

12345

networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

12345

networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

table data-draft

-node="block" data-draft-type="table" data-size="normal" data-row-style="normal">

12345networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

12345networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

12345networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

12345networkTimeout：{request：預設6000downloadFile：uploadFileconnectSocket<br> }

　五、permission:小程式接口權限相關設定。

小程式監聽傳回鍵_詳解微信小程式

設定完成的樣式

小程式監聽傳回鍵_詳解微信小程式

頁面設定

小程式監聽傳回鍵_詳解微信小程式

每一個小程式頁面也可以使用

.json

檔案來對本頁面的視窗表現進行配置。頁面中配置項在目前頁面會覆寫

app.json

的

window

中相同的配置。

2 ，微信小程式開發|檔案類型與目錄結構

微信小程式開發從基礎走起，本文介紹小程式開發的檔案類型與目錄結構。

建立你的第一個小程式

建立你的第一個小程式還是比較簡單，在「微信開發工具」建立項目選擇小程式項目，選擇代碼存放的硬碟路徑，填入剛剛申請到的小程式的 AppID，給你的項目起一個好聽的名字，點選 " 建立 "，你就得到了你的第一個小程式了，點選頂部菜單編譯就可以在微信開發者工具中預覽你的第一個小程式。

四種不同類型的檔案

你可以留意到這個項目裡邊生成了不同類型的檔案:

.json 字尾的 JSON 配置檔案，用于頁面或小程式的配置設定

.wxml 字尾的 WXML 模闆檔案，用于布局與内容

.wxss 字尾的 WXSS 樣式檔案，用于具體的樣式

.js 字尾的 JS 腳本邏輯檔案，用于邏輯處理

小程式監聽傳回鍵_詳解微信小程式

具體解釋可以參考：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE

app.* 和 pages/index/index.* 關系

細心的小夥伴可能已經留意到大概檔案目錄有 app.* 和 pages/index/index.*

app.* 是做小程式應用的全局配置、樣式和邏輯

pages/index/index.* 是做小程式頁面的全局配置、樣式和邏輯顯示

pages/xxx/http://xxx.xxx 都會在 app.json 的 pages 字段裡面配置（在「微信開發工具」app.json 的 pages 字段配置一個新的路徑的話，「微信開發工具」自動生成對應的檔案夾和 json、wxml、wxss、js 檔案）

pages/xxx/http://xxx.xxx 配置有的，就會用自己的；沒有的就會找 app.* 的配置。

小程式監聽傳回鍵_詳解微信小程式

目錄結構

小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。

一個小程式主體部分由三個檔案組成，必須放在項目的根目錄，如下：

小程式監聽傳回鍵_詳解微信小程式

一個小程式頁面由四個檔案組成，分别是：

小程式監聽傳回鍵_詳解微信小程式

注意：為了友善開發者減少配置項，描述頁面的四個檔案必須具有相同的路徑與檔案名。

3，小程式生命周期和小程式頁面的生命周期

1.今天我們來複習一下小程式的生命周期，時間長不用了都生疏了，那就來梳理一下吧

2.先系統的給它分為兩大類

小程式生命周期

和

頁面生命周期

App() 必須在 app.js 中注冊，且不能注冊多個。是以App（）方法在一個小程式中僅有一個；

生命周期方法：

onLaunch：生命周期函數–監聽小程式初始化，當小程式初始化完成時，會觸發； onShow：生命周期函數–監聽小程式顯示，當小程式啟動，或從背景進入前台顯示，會觸發； onHide：生命周期函數–監聽小程式隐藏，當小程式從前台進入背景，會觸發；

小程式監聽傳回鍵_詳解微信小程式

注意

：前台、背景定義：當使用者點選左上角關閉，或者按了裝置 Home 鍵離開微信，小程式并沒有直接銷毀，而是進入了背景；當再次進入微信或再次打開小程式，又會從背景進入前台。隻有當小程式進入背景一定時間，或者系統資源占用過高，才會被真正的銷毀。

2、頁面的生命周期

onLoad: 頁面加載

一個頁面隻會調用一次。

接收頁面參數可以擷取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 頁面顯示

每次打開頁面都會調用一次。

onReady: 頁面初次渲染完成

一個頁面隻會調用一次，代表頁面已經準備完成，可以和視圖層進行互動。

onHide: 頁面隐藏

當navigateTo或底部tab切換時調用。

onUnload: 頁面解除安裝

當redirectTo或navigateBack的時候調用。

4，微信小程式資料請求和封裝

目錄結構

在根目錄下建立http目錄及api.js檔案fetch.js以及http.js檔案；

小程式監聽傳回鍵_詳解微信小程式

在根目錄下建立env目錄,建立index.js配置并導出多個開發環境

小程式監聽傳回鍵_詳解微信小程式

在api.js中統一管理，請求的url位址

小程式監聽傳回鍵_詳解微信小程式

在fetch.js中用promise對wx.request()進行封裝

小程式監聽傳回鍵_詳解微信小程式

在http.js，根據目前環境，設定相應的baseUrl, 引入fetch中封裝好的promise請求，封裝基礎的getpostputupload等請求方法，設定請求體，帶上token和異常處理等；

設定對應的方法并導出；

小程式監聽傳回鍵_詳解微信小程式

在全局app.js中導入http,注冊到根元件

小程式監聽傳回鍵_詳解微信小程式

在具體頁面導入,并使用；

小程式監聽傳回鍵_詳解微信小程式

5.路由跳轉分類和路由跳轉傳遞參數

路由跳轉：

微信小程式跳轉提供了6中路由跳轉方式：

wx.switchTab(Object object)：

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面

即隻能跳轉到app.json中定義的tabBar頁面

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "./image/tabBar/tabBar_index.png",
        "selectedIconPath": "./image/tabBar/tabBar_index_hover.png"
      },
      {
        "pagePath": "pages/myMessage/myMessage",
        "text": "我的",
        "iconPath": "./image/tabBar/tabBar_user.png",
        "selectedIconPath": "./image/tabBar/tabBar_user_hover.png"
      }
    ]
  }

wx.redirectTo(Object object)：

關閉目前頁面，跳轉到應用内的某個頁面。但是不允許跳轉到 tabBar 頁面

即隻能跳轉到除了上面注冊tabBar的頁面

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

wx.navigateTo(Object object)：

保留目前頁面，跳轉到應用内的某個頁面。但是不能跳到 tabbar 頁面。

與wx.redirectTo的差別就是是否儲存現在的頁面，比較适用于詳情頁，經常需要跳轉回去

wx.navigateBack(Object object)：

關閉目前頁面，傳回上一頁面或多級頁面，可以傳入一個參數，作為傳回的頁數，

wx.navigateBack(2) 傳回前2頁

wx.reLaunch(Object object)：

關閉所有頁面，打開應用中的某個頁面

<navigate />：

直接在wxml中使用該标簽包裹，使用url屬性指向跳轉的頁面

傳遞參數：

直接使用url傳遞，簡單的資料

如：發送給跳轉頁面

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

跳轉頁面在onLoad()函數會擷取到一個option（自定義名）的參數，該參數就包含了

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

輸出了

小程式監聽傳回鍵_詳解微信小程式

如果是對象這類資料比較多的，也可以用該方法，不過需要将對象先轉化為字元串，這裡使用了JSON.stringify和JSON.parse

wx.navigateTo({
   url: '../detail/detail?form=' + JSON.stringify(_this.data.foodsList)
 })
onLoad: function (options) {
   console.log(form: JSON.parse(options.form))
 }

輸出了

小程式監聽傳回鍵_詳解微信小程式

6，路由配置

微信小程式中頁面跳轉的方法：

（1）wx.navigateTo(OBJECT)

保留目前頁面，跳轉到應用内的某個頁面，使用wx.navigateBack可以傳回到原頁面。

示例代碼：

wx.navigateTo({
    url:'test?id=1'//實際路徑要寫全
})
//test.js
Page({
  onload:function(option){
    console.log(option.query)
  }
})

（2）wx.redirectTo(OBJECT)

關閉目前頁面，跳轉到應用的某個頁面。

示例代碼：

wx.redirectTo({
  url:'test?id=1'
})

（3）wx.switchTab(OBJECT)

跳轉到tabBar頁面，并關閉其他所有非tabBar頁面

示例代碼：

{
  'tabBar': {
      'list': [{
        'pagePath':'index',
        'test':'首頁' 
      },{
        'pagePath':'other',
        'test':'其他'
      }]
  }
}
wx.switchTab({
  url:'/index'
})

（4）wx.navigateBack(OBJECT)

關閉目前頁面，傳回上一頁面或多級頁面。可通過getCurrentPages()擷取目前的頁面棧，決定需要傳回幾層。

示例代碼：

//注意：調用navigateTo跳轉時，調用該方法的頁面會被加入堆棧，而redirectTo方法則不會。
//此處是A頁面
wx.navigateTo({
  url:'B?id=1'
})
//此處是B頁面
wx.navigateTo({
    url:'C?id=1'
})
//在C頁面内navigateBack,将傳回A頁面
wx.navigateBack({
    delta:2
})

（5）使用标簽實作頁面跳轉

參數	類型	必填	說明

示例代碼：

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
<navigator url="navigate?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在目前頁打開</navigator>
<navigator url="index" open-type="switchTab" hover-class="navigator-hover">切換</navigator>

二、如何正确使用頁面跳轉

官方規定小程式最多隻能有

五個頁面

同時存在，意思是在不關閉頁面的情況下，最多新開五個頁面，

頁面深度為5

。

對于可逆操作，使用wx.navigateTo,比如從首頁跳轉到二級頁面，從二級頁面傳回是不需要重新渲染頁面
對于不可逆操作，使用wx.redirectTo,比如使用者登入成功後，關閉登入頁面，不能傳回到登入界面。
對于一些介紹性等不常用頁面，使用wx.redirectTo或wx.navigateBack
對于類似九宮格、清單項，使用 <navigator /> 跳轉
不要在首頁使用wx.redirectTo，這樣會導緻應用無法傳回首頁
簡化需求、簡化流程；核心功能在兩三個頁面完成便是張小龍追求【小而美】的展現

三、頁面棧

頁面棧以棧（先進後出）的形式維護頁面與頁面之間的關系；

小程式提供了getCurrentPages()函數擷取頁面棧，

第一個元素為首頁，最後一個元素為目前頁面。

1、使用wx.navigateTo每新開一個頁面，頁面棧大小加1,直到頁面棧大小為5為止；

小程式監聽傳回鍵_詳解微信小程式

2、使用wx.navigateTo重複打開頁面

小程式監聽傳回鍵_詳解微信小程式

上圖中，假如使用wx.navigateTo從四級頁面跳轉到二級頁面，此時會在頁面棧頂添加一個與二級頁面初始狀态一樣的界面，但兩個頁面狀态是獨立的。頁面棧大小會加1，如果頁面棧大小為5，則wx.navigateTo無效

使用wx.redirectTo重定向

3、使用wx.redirectTo重定向

小程式監聽傳回鍵_詳解微信小程式

上圖中，假如使用wx.redirectTo從四級頁面重定向到二級頁面，此時會将關閉四級頁面，并使用二級頁面替換四級頁面，但兩個頁面狀态是獨立的。此時的頁面棧大小不變，請注意和使用wx.navigateTo的差別。

使用wx.navigateBack傳回

4、使用wx.navigateBack傳回

小程式監聽傳回鍵_詳解微信小程式

上圖中，假如目前頁面為五級頁面，使用wx.navigateBack：

當delta為1，關閉五級頁面，目前頁面為四級頁面，頁面棧大小減1；

當delta為2，關閉依次五級頁面和四級頁面，目前頁面為三級頁面，頁面棧大小減2；

以此類推，直到棧底為止，也就是首頁。

總結

wx.navigateTo會增加頁面棧大小，直到頁面棧大小為5
wx.redirectTo不會增加頁面棧大小
wx.navigateBack會減少頁面棧大小，直到頁面棧大小為1

7，點選擷取參數

小程式在元件上綁定事件後，傳遞參數的方式不同于前端開發其他場景中直接加參數的方式，小程式在參數的傳遞時，采用事件對象的自定義屬性的方式，具體實作如下：

wxml:

<view bindtap="passQuery" data-index="1">點選事件傳參</view>

js中：

passQuery: function(e){
// 傳遞的參數
let query = e.currentTarget.dataset['index'];
}

利用自定義屬性即可完成事件的參數傳遞。

8.本地存儲的幾種方式

微信小程式資料緩存

1、存儲

wx.setStorageSync(‘屬性’，‘值’)

2、擷取

wx.setStorageSync(‘name’)

3、删除

wx.removeStorageSync(‘name’)

4、删除全部

wx.clearStorageSync(‘name’)

token值從哪裡來？

一、何為token？

前端鑒權的一種方式，token由後端生成，token是有時效性

token值:登入令牌,是辨別使用者資訊的唯一辨別符,是一個長字元串,不會有兩個相同的token值,

使用者登入成功之後,在伺服器端就會生成一個token值,然後這個token值就會傳回給用戶端,同時在伺服器也會儲存這個token值

用戶端擷取到伺服器屌token值之後,會儲存在本地

本地資料緩存

本地資料緩存是小程式存儲在目前裝置上硬碟上的資料，本地資料緩存有非常多的用途，我們可以利用本地資料緩存來存儲使用者在小程式上産生的操作，在使用者關閉小程式重新打開時可以恢複之前的狀态。我們還可以利用本地緩存一些服務端非實時的資料提高小程式擷取資料的速度，在特定的場景下可以提高頁面的渲染速度，減少使用者的等待時間。

4.6.1 讀寫本地資料緩存

小程式提供了讀寫本地資料緩存的接口，通過wx.getStorage/wx.getStorageSync讀取本地緩存，通過wx.setStorage/wx.setStorageSync寫資料到緩存，其中Sync字尾的接口表示是同步接口[9]，執行完畢之後會立馬傳回，示例代碼和參數說明如下所示。

代碼清單4-13 wx.getStorage/wx.getStorageSync讀取本地資料緩存

小程式監聽傳回鍵_詳解微信小程式

表4-4 wx.getStorage/wx.getStorageSync詳細參數

小程式監聽傳回鍵_詳解微信小程式

代碼清單4-14 wx.setStorage/wx.setStorageSync寫入本地資料緩存

小程式監聽傳回鍵_詳解微信小程式

表4-5 wx.setStorage/wx.setStorageSync詳細參數

小程式監聽傳回鍵_詳解微信小程式

4.6.2 緩存限制和隔離

小程式宿主環境會管理不同小程式的資料緩存，不同小程式的本地緩存空間是分開的，每個小程式的緩存空間上限為10MB，如果目前緩存已經達到10MB，再通過wx.setStorage寫入緩存會觸發fail回調。

小程式的本地緩存不僅僅通過小程式這個次元來隔離空間，考慮到同一個裝置可以登入不同微信使用者，宿主環境還對不同使用者的緩存進行了隔離，避免使用者間的資料隐私洩露。

由于本地緩存是存放在目前裝置，使用者換裝置之後無法從另一個裝置讀取到目前裝置資料，是以使用者的關鍵資訊不建議隻存在本地緩存，應該把資料放到伺服器端進行持久化存儲。

4.6.3 利用本地緩存提前渲染界面

讨論一個需求：我們要實作了一個購物商城的小程式，首頁是展示一堆商品的清單。一般的實作方法就是在頁面onLoad回調之後通過wx.request向伺服器發起一個請求去拉取首頁的商品清單資料，等待wx.request的success回調之後把資料通過setData渲染到界面上，如下代碼所示。

代碼清單4-15 page.js拉取商品清單資料展示在界面上

小程式監聽傳回鍵_詳解微信小程式

設想一下當使用者退出小程式再進來，界面仍然會有白屏現象，因為我們需要等待拉取商品清單的請求回來才能渲染商品清單。當然我們還可以再做一些體驗上的優化，例如在發請求前，可能我們會在界面上顯示一個Loading提示使用者在加載中，但是并沒有解決這個延遲渲染的現象，這個時候我們可以利用本地緩存來提前渲染界面。

我們在拉取商品清單後把清單存在本地緩存裡，在onLoad發起請求前，先檢查是否有緩存過清單，如果有的話直接渲染界面，然後等到wx.request的success回調之後再覆寫本地緩存重新渲染新的清單，如下代碼所示。

代碼清單4-16 page.js利用本地緩存提前渲染界面

小程式監聽傳回鍵_詳解微信小程式

這種做法可以讓使用者體驗你的小程式時感覺加載非常快，但是你還要留意這個做法的缺點，如果小程式對渲染的資料實時性要求非常高的話，使用者看到一個舊資料的界面會非常困惑。是以一般在對資料實時性/一緻性要求不高的頁面采用這個方法來做提前渲染，用以優化小程式體驗。

4.6.4 緩存使用者登入态SessionId

在4.4節我們說到處理使用者登入态的一般方法，通常使用者在沒有主動登出前，使用者的登入态會一直保持一段時間[10]，就無需使用者頻繁地輸入賬号密碼。如果我們把SessionId記錄在Javascript中某個記憶體變量，當使用者關閉小程式再進來小程式時，之前記憶體的SessionId已經丢失，此時我們就需要利用本地緩存的能力來持久化存儲SessionId。

代碼清單4-17 利用本地緩存持久存儲使用者登入态SessionId

小程式監聽傳回鍵_詳解微信小程式

在重新打開小程式的時候，我們把上一次存儲的SessionId内容取出來，恢複到記憶體。

代碼清單4-18 利用本地緩存恢複使用者登入态SessionId

小程式監聽傳回鍵_詳解微信小程式

小程式監聽傳回鍵_詳解微信小程式

1，視窗配置

2 ，微信小程式開發|檔案類型與目錄結構

建立你的第一個小程式

四種不同類型的檔案

app.* 和 pages/index/index.* 關系

目錄結構

3，小程式生命周期和小程式頁面的生命周期

生命周期方法：

2、頁面的生命周期

4，微信小程式資料請求和封裝

5.路由跳轉分類和路由跳轉傳遞參數

路由跳轉：

傳遞參數：

6，路由配置

微信小程式中頁面跳轉的方法：

二、如何正确使用頁面跳轉

三、頁面棧

7，點選擷取參數

8.本地存儲的幾種方式

微信小程式資料緩存

token值從哪裡來？

本地資料緩存

4.6.1 讀寫本地資料緩存

4.6.2 緩存限制和隔離

4.6.3 利用本地緩存提前渲染界面

4.6.4 緩存使用者登入态SessionId

今天你學費拉嗎？

繼續閱讀

小程式onload_小程式生命周期-基礎篇

華為小程式怎麼弄出來_小程式開發有哪些坑？這份筆記都整理出來了

c++ main函數調用類中的枚舉_利用Doxygen給C程式生成注釋文檔

小程式如何用data的資料控制頁面展示_小程式界面與邏輯

在小程式中用.生成帶class 的view_極簡微信小程式入門示例

微信小程式全局變量異步函數_微信小程式目錄結構介紹

微信小程式怎麼在wxml中插入多個圖檔_白雲工商帶你10分鐘入門微信小程式開發...

小程式業務域名不是自己的頁面咋辦_微信小程式入門

js模拟鍵盤某個鍵按下_C語言非阻塞式鍵盤監聽，使用者不輸入資料程式也能繼續執行...

微信小程式怎麼在wxml中插入多個圖檔_小程式，掌握這篇文章内容，自己開發小程式不是夢，So easy...

微信小程式怎麼在wxml中插入多個圖檔_微信官方小程式同構新方案Kbone全解析

小程式監聽傳回鍵_詳解微信小程式

1，視窗配置

2 ，微信小程式開發|檔案類型與目錄結構

建立你的第一個小程式

四種不同類型的檔案

app.* 和 pages/index/index.* 關系

目錄結構

3，小程式生命周期 和 小程式頁面的生命周期

生命周期方法：

2、頁面的生命周期

4，微信小程式資料請求和封裝

5.路由跳轉分類 和 路由跳轉傳遞參數

路由跳轉：

傳遞參數：

6，路由配置

微信小程式中頁面跳轉的方法：

二、如何正确使用頁面跳轉

三、頁面棧

7，點選擷取參數

8.本地存儲的幾種方式

微信小程式資料緩存

token值從哪裡來？

本地資料緩存

4.6.1 讀寫本地資料緩存

4.6.2 緩存限制和隔離

4.6.3 利用本地緩存提前渲染界面

4.6.4 緩存使用者登入态SessionId

今天你學費拉嗎？

繼續閱讀

3，小程式生命周期和小程式頁面的生命周期

5.路由跳轉分類和路由跳轉傳遞參數