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


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 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 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生成图片验证码、点击切换实例
2014/06/25 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
学习ExtJS Window常用方法
2009/10/07 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Python urllib3软件包的使用说明
2020/11/18 Python
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
C++面试题目
2013/06/25 面试题
广告学毕业生求职信
2014/01/30 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
关于环保的演讲稿
2014/05/10 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
周一问候语大全
2015/11/10 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server