jjzjj

小程序页面之间数据传递的五种方法

hao_developer 2023-03-28 原文

1.使用 时,在 url 中拼接,这种方法适用于数据量少的情况

跳转前A页面在 url 中拼接参数,参数与路径之间使用分隔,参数键与参数值用相连,不同参数用分隔;

wx.navigateTo({
    url: '/somePathXXX/somePathXXX?keyA=valueA&keyB=valueB'
})

跳转到B页面在生命周期函数 onLoad 中接收

onLoad: function (options) {
    let keyA = options.keyA
    let keyB = options.keyB
},

如果需要传递对象或数组,需先将对象或数据转为JSON字符串

let data = {
    name: 'sun',
    sex: '女',
    age: 20
}
let dataStr = JSON.stringify(data)
wx.navigateTo({
  url: '/somePathXXX/somePathXXX?dataStr=' + dataStr,
})

接收时再转换回对象或数组

onLoad: function (options) {
    let data = JSON.parse(options.dataStr)
    console.log(data); // {name: "sun", sex: "女", age: 20}
},

2.使用 时,通过 eventChannel 向被打开页面传送数据, 或被打开页面向原页面传递数据,适合数据量大或者相对复杂的数据传递

① A页面跳转至B页面,同时A页面向B页面传递数据

跳转前A页面:

let data = {
    name: 'sun',
    sex: '女',
    pats: [ 'cat', 'dog', 'fish' ],
    address: {
        province: '山东省',
        city: '青岛市'
    } 
}
wx.navigateTo({
    url: '/pages/eventChannel-demoB/eventChannel-demoB',
    success: function (res) {
        res.eventChannel.emit('pageBEvent', data) 
    }
})

跳转后B页面在生命周期函数 onLoad 中接收(也可以在其他生命周期函数中,或其他任意阶段接收,测试结果是B页面不能重复接收,只能接受一次,哪怕在不同方法中)

onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel();
    // 监听 pageBEvent 事件,获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('pageBEvent', (params) => {
        console.log(params);
    });
},

② A页面跳转至B页面,B页面向A页面传递数据

跳转前A页面

wx.navigateTo({
    url: '/pages/eventChannel-demoB/eventChannel-demoB',
    events: {
        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
            console.log(data)
        },
        someEvent: function(data) {
            console.log(data)
        }
    }
})

B页面(也可以在其他生命周期函数中,或其他任意阶段触发A页面的方法,传递数据,并且与接收参数不同,触发A页面的 events 中的事件可以任意多次,每次传递的数据可以不同):

onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel();
    // 触发A页面的事件并传递数据
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test111'});
    eventChannel.emit('someEvent', {data: 'test222'});
},

③ EventChannel还可以在A-B-C多个页面直接建立数据通道。

//可以保存在getApp()全局实例中以备其他页面使用
// 保留AB通道事件,已备C页面给A页面发送数据
// B页面
    const eventChannel = this.getOpenerEventChannel()
    getApp().pageBEventChannel = eventChannel
//C页面 触发A页面的事件并传递数据
 getApp().pageBEventChannel.emit('acceptDataFromOpenedPage', { data: 'Page C->A' });

3.返回上一个页面同时传递数据

假如从B页面返回A页面时需向A页面传递数据,可使用这种方法

在B页面

goBack: function () {
    let backData = {
        name: 'Lily',
        age: 18,
        address: {
            province: '山东省',
            city: '青岛市',
        },
        pets: ['dog','cat']
    }
    var pages = getCurrentPages();//获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。
    var prevPage = pages[pages.length - 2]; //获取上一个页面
    //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
    prevPage.setData({
        backData: backData
    })
    console.log(prevPage.__data__.backData);//数据已存在prevPage.__data__.backData中
    wx.navigateBack()
},

在A页面获取传回的值(也可以在onShow之后的任意阶段重复获取)

onShow: function () {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    let backData = currPage.__data__.backData; // 此处既是上一页面传递过来的值
    console.log(backData);
},

注:不要在 App.onLaunch 的时候调用 getCurrentPages() ,此时page还没有生成

4.使用 wx.setStorageSync()

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
以这种方式储存的数据是公用数据,可以在任意地方储存、修改,修改后会在全局生效,可以在任意地方获取。

//储存
wx.setStorageSync('someKey', { name: 'lily' }),
//需要时获取指定key
console.log(wx.getStorageSync('someKey')); // {name: 'lily'}
//修改指定key
wx.setStorageSync('someKey', { name: 'nana' }),
//移除指定key
wx.removeStorageSync('someKey')
//移除全部key
wx.clearStorageSync()

注:setStoragesetStorageSync的区别:setStorage 是异步的,而setStorageSync是同步的。

当后面的操作必须依赖于修改storage后的数据,那就需要使用同步,也就是setStorageSync,不然后面操作执行时,使用的还是没有更新的数据。

当后面的操作并不需要用到修改的storage数据,那就不需要立即同步,这时就可以选择使用异步,也就是setStorage ,因为操作内存是需要时间的,往往没有代码走的快。

5.在 app.js 中添加公用数据

每个小程序都需要在 中调用 方法注册小程序实例,在方法的 参数中,开发者可以添加任意函数或数据变量,在其它页面可以通过 方法获取到全局唯一的 App 实例,获取 App 上的数据或调用开发者注册在 上的函数。

以这种方式储存的数据是公用数据,可以在任意地方储存、修改,修改后会在全局生效,可以在任意地方获取。

在 app.js 中:

App({
  globalData: {
      name: 'globalName'
  },
  globalString: 'globalStringXXX',
  },
  // 其他……
})

在页面中获取(生命周期函数onLoad中也可以获取):

let app = getApp()
console.log(app.globalData); // {name: 'globalName'}
console.log(app.globalString); // globalStringXXX

修改:

let app = getApp()
app.globalString = '修改后的stringXXX'
console.log(app.globalString); // 修改后的stringXXX

有关小程序页面之间数据传递的五种方法的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点,但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  6. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索,但这不是我需要的。我也看过ruby​​-doc.org,但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗?更新我用methods()方法做了实验,得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  7. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  8. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  9. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  10. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

随机推荐