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


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 相关文章推荐
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
在VUE style中使用data中的变量的方法
Jun 19 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python模块之re正则表达式详解
2017/02/03 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python 字符串格式化的示例
2020/09/21 Python
python 线程的五个状态
2020/09/22 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
党的群众路线调研报告
2014/11/03 职场文书
怎样写离婚协议书
2015/01/26 职场文书
防震减灾主题班会
2015/08/14 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android