欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序頁面間傳參的五種方式實(shí)例詳解

 更新時間:2022年08月02日 14:49:46   作者:sKK07  
頁面跳轉(zhuǎn),頁面之間傳遞參數(shù)在開發(fā)APP應(yīng)用的時候會經(jīng)常用到這樣的功能,下面這篇文章主要給大家介紹了關(guān)于小程序頁面間傳參的五種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

由于經(jīng)常需要進(jìn)行頁面間傳參且各種傳參的業(yè)務(wù)場景也不相同,根據(jù)官方文檔和日常工作進(jìn)行了總結(jié)。共有五種傳參方式,各位有什么關(guān)于頁面間傳參的奇思妙想也可在評論區(qū)提出,大家共同探討

概覽

方式優(yōu)點(diǎn)缺點(diǎn)
globalData雙向傳參、全應(yīng)用可用不及時
storage雙向傳參、全應(yīng)用可用不及時
路由簡單方便、及時正向傳參
通信通道雙向傳參、及時wx.navagateTo()接口調(diào)用才可用
頁面棧可操作數(shù)據(jù)和函數(shù)、及時反向傳參、僅wx.navagateTo()<navigator open-type="navigateTo" url="/bbb?id=1"></navigator> 才可用

1、使用globalData

說明:globalData是小程序app.js中固定的一個屬性,存儲的數(shù)據(jù)可在全項(xiàng)目任意處使用

代碼示例:

// app.js
App({
  globalData:{},
})

// aaa.js
const app = getApp();
app.globalData.name='xiaowang';

// bbb.js
const app = getApp();
console.log(app.globalData.name) //xiaowang

2、使用storage

說明:storage是微信分給每個小程序的緩存,單個參數(shù)最大1M,數(shù)據(jù)總和最大10M

代碼示例:

// aaa.js
Page({
    data:{
        name:'xiaowang'    
    },
})
//只支持原生類型、Date、及能夠通過JSON.stringify序列化的對象
wx.setStorageSync('name',this.data.name)

// bbb.js
console.log(wx.getStorageSync(name)) //xiaowang

3、使用url

說明:url上直接攜帶參數(shù)長度是有限的且不支持特殊符號,可用編碼、解碼的方式解決

代碼示例:

3.1 api跳轉(zhuǎn)

// aaa.js
//跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面
wx.switchTab({
    url:'/bbb?id=1',
})
//關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面
wx.reLaunch({
  url: '/bbb?id=1',
})
//關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面
wx.redirectTo({
  url: '/bbb?id=1',
})
//保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面。
wx.navigateTo({
  url: '/bbb?id='+ encodeURIComponent(this.data.id),
})
//以上四種路由方式在傳參和接參上沒有任何區(qū)別

// bbb.js
Page({
  //地址傳參帶過來的參數(shù)只能在該方法的options參數(shù)中獲取
  onLoad:function(options){
    console.log(decodeURIComponent(options.id)) //'1' ,無論傳的變量是數(shù)字、布爾還是對象接收的時候都是字符串
  },
})

3.2 組件跳轉(zhuǎn)

// aaa.wxml
<view>
  <navigator open-type="switchTab" url="/bbb?id=1">跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面</navigator>
  <navigator open-type="reLaunch" url="/bbb?id=1">關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面</navigator>
  <navigator open-type="redirectTo" url="/bbb?id=1">關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面</navigator>
  <navigator open-type="navigateTo" url="/bbb?id=1">保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面</navigator>
</view>
//以上四種路由方式在傳參和接參上沒有任何區(qū)別
// bbb.wxml
Page({
  //地址傳參帶過來的參數(shù)只能在該方法的options參數(shù)中獲取
  onLoad:function(options){
    console.log(options.id) //'1' ,無論傳的變量是數(shù)字、布爾還是對象接收的時候都是字符串
  },
})

4、使用通信通道

說明:通信通道是wx.navitageTo()獨(dú)有的

代碼示例:

// aaa.js
wx.navigateTo({
  url: '/bbb?id=1',
  events: {
    // 為指定事件添加一個監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù)
    acceptDataFromOpenedPage: function(data) {//參數(shù)名字隨便起,前后頁面對應(yīng)上即可
    //對發(fā)送回來的數(shù)據(jù)進(jìn)行處理
      console.log(data)
    },
    someEvent: function(data) {//參數(shù)名字隨便起,前后頁面對應(yīng)上即可
      console.log(data)
    }
  },
  success: function(res) {
    // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })//參數(shù)名字隨便起,前后頁面對應(yīng)上即可
  },
})

//bbb.js
Page({
  onLoad: function(option){
    //獲取通信通道
    const eventChannel = this.getOpenerEventChannel()
    // 監(jiān)聽acceptDataFromOpenerPage事件,獲取上一頁面通過eventChannel傳送到當(dāng)前頁面的數(shù)據(jù)
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
        //對發(fā)送過來的數(shù)據(jù)進(jìn)行處理
      console.log(data)
    })
    //向上一頁面發(fā)送數(shù)據(jù)
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
  },
})

5、使用頁面棧

說明:只對當(dāng)前頁面棧中存在的頁面生效

代碼示例:

// aaa.js
Page({
  data:{
    name:'xiaowang',
    age:22
  },
  eatFood:function(food){
    console.log('eating '+ food)    
  },
})

// bbb.js
Page({
  onLoad: function (options) {
    //獲取當(dāng)前頁面棧
    const pages = getCurrentPages();
    //獲取上一頁面對象
    let prePage = pages[pages.length - 2];
    console.log(prePage.data.name) //'xiaowang'
    prePage.eatFood('apple')//eating apple
  },
})

總結(jié)

  1. globalData與storage原理相同都是將數(shù)據(jù)放在一個公共的地方全應(yīng)用隨意取用,但是他們的數(shù)據(jù)不推送也不關(guān)聯(lián),即globalData和storage中的數(shù)據(jù)更新了,但已經(jīng)獲取過值的頁面其對應(yīng)的值并 不會更新。
    解決辦法:將各頁面獲取值的事件放到onShow()中,每次頁面進(jìn)入前臺的時候都會重新從globalData和storage中取值。
  2. 路由攜帶參數(shù)簡單方便,但是地址長度有限不能攜帶大量參數(shù)和特殊符號。
    解決辦法:在傳參之前進(jìn)行編碼encodeURIComponent(),接收的時候進(jìn)行解碼 decodeURIComponent()。如此大量參數(shù)可以攜帶但是只能單方面?zhèn)鬟f參數(shù),即只能a向b傳,反之則不行。
  3. 通信通道,頁面可以互相傳參,但是該通道僅存在于wx.navagateTo()的接口調(diào)用時才有效。
  4. 頁面棧,這是一個極其強(qiáng)大功能,它本質(zhì)上不是向頁面?zhèn)鲄⒍侵苯有薷捻撁鎱?shù)和方法。通過頁面棧我們可以拿到該頁面的對象,然后就可以對該頁面的各項(xiàng)數(shù)據(jù)和函數(shù)進(jìn)行操作。但是這種方法只能在b頁面去操作a頁面,并不能在a頁面操作b頁面,因?yàn)榇藭r頁面棧中還沒有b。并且該方法也僅限于通過wx.navagateTo()或 <navigator open-type="navigateTo" url="/bbb?id=1">跳轉(zhuǎn)</navigator> 這兩種方式進(jìn)入b頁面才可使用,因?yàn)槠渌绞教D(zhuǎn)到b頁面時已經(jīng)銷毀了其他所有頁面,頁面棧中已經(jīng)沒有上一個頁面了。

到此這篇關(guān)于小程序頁面間傳參的五種方式的文章就介紹到這了,更多相關(guān)小程序頁面間傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 小程序調(diào)用微信支付的方法

    小程序調(diào)用微信支付的方法

    這篇文章主要為大家詳細(xì)介紹了小程序調(diào)用微信支付的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Ajax實(shí)現(xiàn)不刷新取最新商品

    Ajax實(shí)現(xiàn)不刷新取最新商品

    本文主要介紹了Ajax 實(shí)現(xiàn)不刷新取最新商品的方法。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-03-03
  • 使用js畫圖之圓、弧、扇形

    使用js畫圖之圓、弧、扇形

    這篇文章主要介紹了使用js繪制幾何圖形教程,本文主要是教大家繪制圓、弧、扇形,需要的朋友可以參考下
    2015-01-01
  • JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】

    JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】

    Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數(shù)據(jù),支持單選,復(fù)選框,排序,分頁,顯示/隱藏列,固定標(biāo)題滾動表,響應(yīng)式設(shè)計,Ajax加載JSON數(shù)據(jù),點(diǎn)擊排序的列,卡片視圖等。本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】,一起學(xué)習(xí)吧
    2016-05-05
  • 微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解

    微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解

    這篇文章主要介紹了微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,讓大家掌握這部分內(nèi)容,需要的朋友可以參考下
    2017-09-09
  • js獲取今天、昨天、明天的日期函數(shù)代碼

    js獲取今天、昨天、明天的日期函數(shù)代碼

    這篇文章主要介紹了js獲取今天、昨天、明天的日期函數(shù)代碼,需要的朋友可以參考下
    2023-05-05
  • 純js實(shí)現(xiàn)背景圖片切換效果代碼

    純js實(shí)現(xiàn)背景圖片切換效果代碼

    現(xiàn)在純粹用js的人越來越少了,更多的人喜歡jquery,可使我還是喜歡javascript,下面給出一個用javascript寫的背景切換的小例子,各位大蝦不要罵,只是寫給自己看的,也供js事件的產(chǎn)考依據(jù)。
    2010-11-11
  • js實(shí)現(xiàn)文字列表無縫滾動效果

    js實(shí)現(xiàn)文字列表無縫滾動效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)文字列表無縫滾動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • JavaScript中EventBus實(shí)現(xiàn)對象之間通信

    JavaScript中EventBus實(shí)現(xiàn)對象之間通信

    這篇文章主要介紹了JavaScript中EventBus實(shí)現(xiàn)對象之間通信,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • JavaScript仿京東秒殺倒計時

    JavaScript仿京東秒殺倒計時

    這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東秒殺倒計時,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03

最新評論