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


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 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
js实现简单抽奖功能
Nov 24 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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
php判断用户是否关注微信公众号
2016/07/22 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python里 super类的工作原理详解
2019/06/19 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
英语分层教学实施方案
2014/06/15 职场文书
体育专业求职信
2014/07/16 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android