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


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 相关文章推荐
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 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实现今天是星期几的几种写法
2013/09/26 PHP
php对称加密算法示例
2014/05/07 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
JS实现简易计算器
2020/02/14 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Python易忽视知识点小结
2015/05/25 Python
Python创建模块及模块导入的方法
2015/05/27 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python绘制组合图的示例
2020/09/18 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
建筑专业自荐信
2013/10/18 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
《穷人》教学反思
2016/02/19 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
基于angular实现树形二级表格
2021/10/16 Javascript