微信小程序:数据存储、传值、取值详解


Posted in Javascript onMay 07, 2019

小程序界面传值

父级界面:A界面
子级界面:B界面

一、url传值

详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释。
1. 正向传值:A界面 ?>B界面

用 navigator标签或 wx.navigator传值,A界面向B界面传id值

A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可

// 方法一:navigator标签传值
  <navigator url="/page/index/index?id=110" >传值</navigator>
  <navigator url="/page/index/index?id=110&username=jane&password=123456" >传值</navigator>

  // 方法二: wx.navigator标签传值单值、多值传递
  wx.navigateTo({
   url: '/page/index/index?id=' + id
  })

  wx.navigateTo({
   url: '/page/index/index?id=' + id +'&username='+ username+'&password='+ password
  })

B界面接受id值

/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
  var id = options.id;
  this.setData({
   id:id,
   username:username,
   password:password,
  })
 },

反向传值:B界面 ?>A界面

在B界面需要传值地方代码如下

var pages = getCurrentPages() // 获取栈中全部界面的, 然后把数据写入相应界面
  var currentPage = pages[pages.length - 1] //当前界面
  var prePage = pages[pages.length - 2] //上一个界面
  var that = this
  prePage.setData({
   id: that.data.id,
  })

在A界面需要接受B界面传过来值码如下:这里要在onShow方法里面重新调用你的数据请求或是,为了验证是否传值成功,你可以打印验证 注:由于你从B界面返回A界面使用了wx.navigateBack,所以当你回到A界面后onLoad、onReady方法不响应,onShow方法响应,所以这里你需要特别注意--生命周期

/**
  * 生命周期函数--监听页面显示
  */
  onShow: function () {
   //获取数据 
   this.gainData() 
   // 打印你的传值
   console.log("res==", this.data.res)
  },

二、本地储存 tips:本地数据存储的大小限制为 10MB

每个微信小程序都可能用到本地缓存数据,这里我们可以通过调用微信提供的方法:wx.setStorage、wx.setStorageSync、wx.getStorage、wx.getStorageSync、wx.clearStorage、wx.clearStorageSync、实现对数据本地缓存、获取、清除。可参考微信小程序【数据缓存】开发文档,查看详情。

在A界面获取数据并缓存到本地

wx.setStorageSync('user_info', dic);

在B界面获取数据并缓存到本地

var user_info = wx.getStorageSync("user_info")
   this.setData({
    username: user_info.username
   });

从本地缓存中同步移除指定 key。这里具体使用同步或是异步需要根据你存储时的方法,或是同步清理本地数据缓存wx.clearStorageSync()

wx.removeStorageSync("user_info")

同理你可以在B界面传值在A界面取值,只不过这里你需要注意存储、获取的顺序,先存后取,否则你是拿不到值的。

三、全局的app对象

这里你需要在app.js文件,写好你要全局使用的数据

//用户数据
    appData: {
      user_info:null,
    }

在你需要赋值的地方引用app,代码如下:

var app = getApp();
    app.appData.user_info = {"username":"jane"};

在你需要取值的地方引用app,代码如下:

var app = getApp();
    var user_info = app.appData.user_info;
    this.setData({
      username: user_info.username
    });

以上所述是小编给大家介绍的微信小程序:数据存储、传值、取值详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
Node 代理访问的实现
Sep 19 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 #Javascript
详解Vue前端生产环境发布配置实战篇
May 07 #Javascript
7个好用的JavaScript技巧分享(译)
May 07 #Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 #Javascript
vue搜索和vue模糊搜索代码实例
May 07 #Javascript
详解Vue demo实现商品列表的展示
May 07 #Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php htmlspecialchars加强版
2010/02/16 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
vue实现购物车加减
2020/05/30 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python 实现链表实例代码
2017/04/07 Python
Python KMeans聚类问题分析
2018/02/23 Python
python线程中同步锁详解
2018/04/27 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
教师学期个人总结
2015/02/11 职场文书
社区低保工作总结2015
2015/07/23 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
Python如何用re模块实现简易tokenizer
2022/05/02 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers