如何将兩個微信小程式合并_微信小程式--如何在兩個頁面之間傳值

先看一下本周的部分的設計圖

在這裡插入圖檔描述

在這裡插入圖檔描述

在這裡插入圖檔描述

頁面設計并不太複雜，主要是産品類型那塊點選的樣式，其餘的都不太複雜，沒啥好說的。

這次主要是想記錄一下不同頁面下的傳值

你看，在這個出發城市和目的地城市這兩個搜尋框點選了之後都跳轉了頁面，這也就意味着我們在這個工程項目裡要建立兩個檔案夾。拿出發城市為例，原頁面名字叫productList.wxml，點選了出發城市的搜尋框之後跳轉到出發城市的頁面，名字叫departureCity.wxml。這是兩個不同的檔案夾的頁面，這也意味着有兩個js檔案，那他們之間怎麼傳資料呢？我們需要把使用者輸入的城市名字傳到前一個頁面呀。

第一種方法：緩存

拿到使用者的輸入值，然後用wx.setStorageSync把值緩存下來

回到上一個頁面，用wx.getStorageSync這個方法來拿到你需要的資料。

緩存真的是萬金油，但是不推薦，顯得笨重。肯定有更好的方法

第二種方法：getCurrentPages ()方法

在這裡插入圖檔描述

我們可以用getCurrentPages ()方法來擷取目前頁面的所有資訊，如data資料

跳轉後使用 let pages = getCurrentPages()擷取目前頁面棧的資訊

得到并儲存使用者的輸入值

let prevPage = pages[pages.length - 2]這是上一個頁面的資訊

prevPage.setData({[上一頁data中的key]:[輸入的值]});

這樣我們就把資料儲存到了上一頁的data中

執行個體操作

departureCity.js中我們這樣寫:

returnAddress這個方法綁定了confirm事件，使用者點選手機鍵盤的确定按鈕就會跳轉回去

returnAddress:function(e){

//本頁即departureCity

let pages = getCurrentPages()

//上一頁即productList

let prevPage = pages[pages.length - 2]

//得到使用者的輸入值

let inputValueA= e.detail.value

prevPage.setData({

//inputValue是productList.js裡面data裡面的定義的，我們把inputValueA的值賦給它

inputValue:inputValueA

})

// 傳回上一級頁面。即跳轉到productList的頁面

wx.navigateBack({

delta: 1

})

},

這樣我們的productList頁面就拿到了使用者的輸入值，這個值就儲存在productList.js的data裡，this.data.inputValue這個就是使用者的輸入值