• 技术文章 >微信小程序 >小程序开发

    小程序页面间传递数据的方式

    hzchzc2020-07-01 09:55:11转载87
    最近在做小程序项目,发现小程序的页面间经常需要传递一些数据。根据自己的了解和熟悉,针对不同的数据要求,总结到有几种不同的传数据方式,下面做一下简单的介绍归纳。

    第一种:页面跳转时通过url传递

    使用wx.navigateTowx.redirectTo 的时候,可以将部分数据放在 url 里面,并在新页面 onLoad 的时候获取且初始化。

    //pageA.js
    
    // Navigate
    wx.navigateTo({
      url: '../pageB/pageB?name=lin&gender=male',
    })
    
    // Redirect
    wx.redirectTo({
      url: '../pageB/pageB?name=lin&gender=male',
    })
    
    // pageB.js
    ...
    Page({
      onLoad: function(option){
        console.log(option.name + 'is' + option.gender);
        this.setData({
          option: option
        });
      }
    })

    需要注意的问题:

    1. 使用wx.navigateTowx.redirectTo时,不允许跳转到 tab 所包含的页面;
    2. onLoad只执行一次;

    适用:
    这种方式一般适用于少数页面之间需要少量数据传递,如B页面需要A页面中的1-2个数据等等。

    第二种:使用全局变量来传递

    在 app.js 文件中定义全局变量 globalData,旧页面将要传递的数据赋值存放在里面,新页面调用全局变量获取传递数据值。

    // app.js
    
    App({
         // 全局变量
      globalData: {
        name: null
      }
    })
    
    //pageA.js
    ···
    getApp().globalData.name = "lin";
    
    
    //pageB.js
    ···
    this.setData({
      userName: getApp().globalData.name
    });

    要注意的问题:

    1. 使用的时候,直接使用 getApp() 拿到存储的信息。

    适用:
    这种方式一般适用于多个页面或者全部页面都需要获取使用同一个数据,比如一开始进入首页就获取到的用户信息等;

    第三种:使用本地缓存

    使用小程序中的本地缓存Storage,旧页面将传递数据存入缓存中,新页面通过调用获取缓存的API得到数据。

    //pageA.js
    ···
    wx.setStorageSync('sessionId', res.sessionId);
    
    
    //pageB.js
    ···
    var sessionId = wx.getStorageSync('sessionId');

    要注意的问题:

    1. Storage每次存入会覆盖掉原来该 key 对应的内容。
    2. 如果用户主动删除小程序或因存储空间原因被系统清理,Storage中数据将被清除。
    3. 单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

    适用:
    这种方式一般适用于即使小程序退出然后再重新进入,也要保留的数据,类似于登录状态的保留等。

    推荐教程:《微信小程序

    以上就是小程序页面间传递数据的方式的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:简书,如有侵犯,请联系a@php.cn删除
    专题推荐:小程序
    上一篇:八分钟带你入门微信小程序开发 下一篇:小程序画布canvas隐藏的问题解决
    第12期线上周末培训班

    相关文章推荐

    • 新手必备的微信小程序开发指南• 微信小程序省市联动功能• 微信小程序中自定义select下拉选项框组件• 微信小程序必知必会面试题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网