微信小程序之頁面傳值(路由、頁面棧、globalData、緩存)

1. 通過url帶參數傳遞

1.1 固定參數傳遞

例如，從 list 頁面到 detail 頁面, 傳遞一個或多個固定值

list頁面傳值：

<!--pages/list/list.js-->
<navigator url="../detail/detail?id=1&name=名稱">點此進入 detail</navigator>

detail頁面取值：

<!--pages/detail/detail.js-->
onLoad: function (options) { 
    this.setData({
        detail_id: options.id,
        detail_name: options.name
    }) 
}

1.2 從列表取值

從列表頁進入詳情頁時，需要傳遞列表被點擊項目的 id 至詳情頁，方法：

在列表頁通過data-id='{{item.id}}'給各個項目綁定一個 id ；
在詳情頁通過 onload 拿到 id;

列表頁：

<!--pages/list/list.js-->
<view class="list" >
    <view class='box'  wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
        <image src='{{item.img}}'></image>
        <view class='tip'>
            <text>{{item.title}}</text>
            <text class='price'>￥{{item.price}}</text>
        </view> 
    </view> 
</view>
// 進入詳情頁時 傳遞 id
goDetail (e) {
    console.log(e.currentTarget.dataset.id),
    wx.navigateTo({
        url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
    })
}

詳情頁:

// pages/detail/detail.js
Page({
 
    data: {
        detail: {},
        loading: true
    }, 
    
    onLoad: function (options) {
        this.loadDetail(options.id); // 拿到列表頁傳過來的 id
        console.log(options.id)
    },

    loadDetail (id) {
        wx.showLoading({
            title: '詳情加載中...',
        })

        wx.request({
            url: 'http://10.0.1.109:3000/list',
            success: (res) => {
                console.log(res.data.cityList);
                let thisPlace = res.data.cityList.filter((val) => val.id == id)
                console.log(thisPlace)
                this.setData({ 
                    detail: thisPlace[0],
                    loading: false
                });
                console.log(this.data.detail)
                wx.hideLoading();
            }
        })
    },
})

2. 通過頁面棧傳值

getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。

注意：

• 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
• 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。

頁面棧應用

例如，在首頁 index 進入列表頁 list，再進入詳情頁 detail 后，如果需要能從detail頁一鍵返回到index頁，並且傳值給index頁，這里就可以用頁面棧來實現。

首頁：

<!--index.wxml-->
<view>{{tag}}</view>

//index.js 
Page({
  data: {
    tag: ''
  }
})

詳情頁：

返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

<!-- pages/detail/detail.wxml-->
<view bindtap='backToIndex'> 點此返回首頁 </view>

// pages/detail/detail.js
Page({
  data: {
    tag: '土豆'
  },
  
  backToIndex () {
    let pages = getCurrentPages() // 獲取頁面棧，pages為一個數組，里面存儲了從首頁到當前頁的所有頁面，如下圖所示
    console.log(pages)
    let tag = this.data.tag // 拿到當前頁的tag
    wx.navigateBack({
      delta: 2,
      success () {
        pages[0].setData({
          tag: tag    // 將當前detail頁的tag賦值給首頁index中的tag
        })
      }
    })
  },
})

console.log(pages) 打印值：

3. 通過globalData

在 app.js 中定義全局變量

 globalData：{
     name: '姓名'
 }

在其他頁面可以取到全局變量

let app = getApp();    

console.log(app.globalData.userInfo) // 姓名

4. 通過 緩存 setStorage

參考：微信小程序之緩存——不同頁面傳遞數據

5. input 搜索傳值

• bindinput: 鍵盤輸入時觸發，event.detail = {value, cursor, keyCode}，keyCode 為鍵值
• bindconfirm: 點擊完成按鈕時觸發，event.detail = {value: value}

<!--/pages/search/search.wxml-->
<view class='search'>
    <image src='/images/search.png'></image>
    <input placeholder='Find your favourite food' auto-focus bindinput="bindKeyInput" bindconfirm='goSearch' ></input>
    <text bindtap='goSearch'>搜索</text>
</view>

// pages/search/search.js 
Page({ 
  data: {
    inputValue: ''
  }, 

  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
    console.log(this.data.inputValue)
  },

  // 進入搜索結果頁 -> list
  goSearch() {
    let content = this.data.inputValue
    if (!content) {
      console.log('內容為空')
      return
    } 

    wx.navigateTo({
      url: `/pages/list/list?content=${content}`,
    })
  }
})