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


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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
微信小程序实现拍照和相册选取图片
May 09 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生成唯一订单号的方法汇总
2015/04/16 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
php支付宝APP支付功能
2020/07/29 PHP
Laravel 队列使用的实现
2019/01/08 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
初步解析Python下的多进程编程
2015/04/28 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
python连接数据库的方法
2017/10/19 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
小学毕业感言300字
2014/02/19 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
一文简单了解MySQL前缀索引
2022/04/03 MySQL
排查MySQL生产环境索引没有效果
2022/04/11 MySQL