帶大家聊聊小程式中的幾種頁面傳參方式

本篇文章為大家介紹一下小程式中的幾種頁面傳參方式，希望對大家有幫助！

小程式中頁面傳參的方式

#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);
  },
})

###更多程式相關知識，請造訪：###程式設計視頻###！ ！ ###

以上是帶大家聊聊小程式中的幾種頁面傳參方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！