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


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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
解决vue 退出动画无效的问题
Aug 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
Python基础之函数用法实例详解
2014/09/10 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
地质灾害防治方案
2014/05/14 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
八一建军节演讲稿
2014/09/10 职场文书
企业党员个人自我评价
2014/09/20 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python