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


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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
JavaScript设计模式之原型模式详情
Jun 21 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和ACCESS写聊天室(六)
2006/10/09 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python虚拟环境迁移方法
2019/01/03 Python
python中栈的原理及实现方法示例
2019/11/27 Python
python与mysql数据库交互的实现
2020/01/06 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
公司应聘自荐书
2014/06/14 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
教师节老师寄语
2015/05/28 职场文书
中小学生安全教育观后感
2015/06/17 职场文书