小程序中的頁面傳參方式是什么

這篇文章主要講解了“小程序中的頁面傳參方式是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“小程序中的頁面傳參方式是什么”吧！

小程序中頁面傳參的方式

url傳參

方式和web中的方式一致。

index1 頁面

<navigator url="/pages/index2/index2?name=海賊王">頁面2</navigator>

或者

    wx.navigateTo({
      url: "/pages/index2/index2?name=海賊王"
    })

index2 頁面

  onLoad: function (options) {
    console.log(options);// { name : 海賊王}
  },

需要注意的是，如果 index2 是tabbar頁面，那么無法在onLoad中獲取頁面參數。【相關學習推薦：小程序開發教程】

事件通道 EventChannel

如果一個頁面由另一個頁面通過 wx.navigateTo 打開，這兩個頁面間將建立一條數據通道：

• 被打開的頁面可以通過 this.getOpenerEventChannel() 方法來獲得一個 EventChannel 對象；

• wx.navigateTo 的 success 回調中也包含一個 EventChannel 對象。

這兩個 EventChannel 對象間可以使用 emit 和 on 方法相互發送、監聽事件。

index1.wxml

<view>
  來自于頁面2 傳遞的數據: {{msg}}
</view>

index1.js

Page({
  data: {
    msg: ""
  },
  onLoad: function () {
    // 1 跳轉到頁面2
    wx.navigateTo({
      url: "/pages/index2/index2",
      // 2 在成功的回調函數中獲取事件通道對象
      success: ({ eventChannel }) => {
        // 3 監聽自定義事件
        eventChannel.on("data", (e) => {
          // 4 獲取頁面2傳遞過來的數據 設置到 data中
          this.setData({
            msg: e.name
          })
        })
      }
    });
  },
})

index2.js

Page({
  onLoad: function () {
    // 被使用 wx.navigatorTo打開的頁面獲取獲取到一個事件通道對象
    const EventChannel = this.getOpenerEventChannel();
    // 觸發事件和傳遞參數到 頁面1中
    EventChannel.emit("data", { name: '海賊王' });
  }
})

本地存儲

小程序中的本地存儲用法類似web中，可以實現在整個應用中獲取數據和存儲數據

index1.js

wx.setStorageSync('data', {name:'海賊王'});// 可以直接存任意類型的數據

index2.js

wx.getStorageSync('data');// 獲取

應用全局變量

不同的頁面都是處于一個共同的應用當中的，這個應用可以理解為 app.js

app.js

在這里可以定義公共數據

App({
  myData: {
    name: "悟空"
  }
})

index1.js

頁面中可以通過 getApp 來獲取

    let app = getApp();
    console.log(app.myData);

當然也可以直接修改

    let app = getApp();
    app.myData.name="八戒";

公共變量

單獨定義一個獨立的js文件，把數據存儲進去，即可

common.js

const data = {
  name: "海賊王"
};

module.exports = data;

index1.js

const data = require("../../common");
Page({
  onLoad: function () {
    console.log(data);
  },
})

感謝各位的閱讀，以上就是“小程序中的頁面傳參方式是什么”的內容了，經過本文的學習后，相信大家對小程序中的頁面傳參方式是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！