本篇文章為大家介紹一下小程式中的幾種頁面傳參方式,希望對大家有幫助!
#url傳參
##方式和web中的方式一致。
index1 頁面<navigator url="/pages/index2/index2?name=海贼王">页面2</navigator>
或 wx.navigateTo({
url: "/pages/index2/index2?name=海贼王"
})
index2onLoad: function (options) { console.log(options);// { name : 海贼王} },登入後複製要注意的是,如果
是tabbar頁面,那麼就無法在onLoad中取得頁面參數。 【相關學習推薦:小程式開發教學】
如果一個頁面由另一個頁面透過
打開,這兩個頁間將建立一條資料通道:
方法來取得一個
EventChannel 物件;
wx.navigateTo 回呼中也包含一個EventChannel
物件。 這兩個
EventChannel
emit 和 on
方法互相傳送、監聽事件。index1.wxml
<view> 来自于页面2 传递的数据: {{msg}} </view>
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 }) }) } }); }, })
Page({ onLoad: function () { // 被使用 wx.navigatorTo打开的页面获取获取到一个事件通道对象 const EventChannel = this.getOpenerEventChannel(); // 触发事件和传递参数到 页面1中 EventChannel.emit("data", { name: '海贼王' }); } })
小程式中的本機儲存用法類似web中,可以實現在整個應用程式中取得資料和儲存資料
index1.js
wx.setStorageSync('data', {name:'海贼王'});// 可以直接存任意类型的数据
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;
const data = require("../../common"); Page({ onLoad: function () { console.log(data); }, })
以上是帶大家聊聊小程式中的幾種頁面傳參方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!