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


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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
Node.js简单入门前传
Aug 21 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 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
用libtemplate实现静态网页生成
2006/10/09 PHP
php学习之 数组声明
2011/06/09 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
新浪的图片新闻效果
2007/01/13 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
如何使用angularJs
2017/05/08 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
HEMA法国:荷兰原创设计
2019/02/21 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
关于运动会的口号
2014/06/07 职场文书
政府采购方案
2014/06/12 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript