小程序中的頁面?zhèn)鲄⒎绞绞鞘裁?/h1>

這篇文章主要講解了“小程序中的頁面?zhèn)鲄⒎绞绞鞘裁础保闹械闹v解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“小程序中的頁面?zhèn)鲄⒎绞绞鞘裁础卑桑?/p>

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供濟(jì)源網(wǎng)站建設(shè)、濟(jì)源做網(wǎng)站、濟(jì)源網(wǎng)站設(shè)計、濟(jì)源網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、濟(jì)源企業(yè)網(wǎng)站模板建站服務(wù)，十載濟(jì)源做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

小程序中頁面?zhèn)鲄⒌姆绞?/strong>

url傳參

方式和web中的方式一致。

index1 頁面

頁面2

或者

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

index2 頁面

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

需要注意的是，如果 index2 是tabbar頁面，那么無法在onLoad中獲取頁面參數(shù)。【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

事件通道 EventChannel

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

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

• wx.navigateTo 的 success 回調(diào)中也包含一個 EventChannel 對象。

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

index1.wxml

  來自于頁面2 傳遞的數(shù)據(jù): {{msg}}

index1.js

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

index2.js

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

本地存儲

小程序中的本地存儲用法類似web中，可以實現(xiàn)在整個應(yīng)用中獲取數(shù)據(jù)和存儲數(shù)據(jù)

index1.js

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

index2.js

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

應(yīng)用全局變量

不同的頁面都是處于一個共同的應(yīng)用當(dāng)中的，這個應(yīng)用可以理解為 app.js

app.js

在這里可以定義公共數(shù)據(jù)

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

index1.js

頁面中可以通過 getApp 來獲取

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

當(dāng)然也可以直接修改

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

公共變量

單獨定義一個獨立的js文件，把數(shù)據(jù)存儲進(jìn)去，即可

common.js

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

module.exports = data;

index1.js

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

感謝各位的閱讀，以上就是“小程序中的頁面?zhèn)鲄⒎绞绞鞘裁础钡膬?nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對小程序中的頁面?zhèn)鲄⒎绞绞鞘裁催@一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

標(biāo)題名稱：小程序中的頁面?zhèn)鲄⒎绞绞鞘裁?
分享地址：http://weahome.cn/article/pejsdj.html