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

青灯夜游
發布: 2021-10-27 09:41:49
轉載
3046 人瀏覽過

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

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

小程式中頁面傳參的方式

#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

物件間可以使用

emiton

方法互相傳送、監聽事件。

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: &#39;海贼王&#39; });
  }
})
登入後複製

本地儲存

小程式中的本機儲存用法類似web中,可以實現在整個應用程式中取得資料和儲存資料

index1.js

wx.setStorageSync(&#39;data&#39;, {name:&#39;海贼王&#39;});// 可以直接存任意类型的数据
登入後複製
#index2.js#
wx.getStorageSync(&#39;data&#39;);// 获取
登入後複製

##應用全域變數

不同的頁面都是處於一個共同的應用當中的,這個應用可以理解為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中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板