微信小程序开发之数据存储 参数传递 数据缓存


Posted in Javascript onApril 13, 2017

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用.

现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子.

先上GIF:

微信小程序开发之数据存储 参数传递 数据缓存

1.APP.js

我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp();

app上就可以拿到存在data中的参数.

2. wx.navigateTo({})中URL携带参数

demo中已经写出:

wx.navigateTo({
 url: "../newpage/newpage?infofromindex=" + this.data.infofromindex,
 });

3.wx.setStorage(OBJECT) 数据缓存

微信开发文档中的数据缓存方法:

①存储数据

try {
 wx.setStorageSync('infofrominput', this.data.infofrominput)
 } catch (e) {
 }

②获取数据

//获取
 wx.getStorage({
  key: 'infofrominput',
  success: function (res) {
  _this.setData({
   infofromstorage: res.data,
  })
  }
 })

key是本地缓存中的指定的 key,data是需要存储的内容.

详情见微信小程序开发文档:文档

贴上代码:

1.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 info: app.data.info, 
 infofromindex: '来自index.js的信息', 
 infofrominput: '' 
 }, 
 onLoad: function () { 
 }, 
 //跳转到新页面 
 gotonewpage: function () { 
 wx.navigateTo({ 
 url: "../newpage/newpage?infofromindex=" + this.data.infofromindex, 
 }); 
 }, 
 //获取输入值 
 searchInputEvent: function (e) { 
 console.log(e.detail.value) 
 this.setData({ infofrominput: e.detail.value }) 
 }, 
 //保存参数 
 saveinput: function () { 
 try { 
 wx.setStorageSync('infofrominput', this.data.infofrominput) 
 } catch (e) { 
 } 
 } 
})

2.index.wxml

<!--index.wxml--> 
<view> 
<button style="background-color:#00ff00;margin:20rpx" bindtap="gotonewpage">跳转</button> 
<input style="background-color:#eee;margin:20rpx;height:80rpx" placeholder="请输入需要保存的参数" bindinput="searchInputEvent" /> 
<button style="background-color:#ff0000;margin:20rpx" bindtap="saveinput">存入Storage</button> 
</view>

3.newpage.js

//newpage.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 infofromapp: app.data.infofromapp, 
 infofromindex: '', 
 infofromstorage: '', 
 }, 
 onLoad: function (options) { 
 var _this = this; 
 var infofromindex = options.infofromindex; 
 this.setData({ 
  infofromindex: infofromindex 
 }) 
 //获取 
 wx.getStorage({ 
  key: 'infofrominput', 
  success: function (res) { 
  _this.setData({ 
   infofromstorage: res.data, 
  }) 
  } 
 }) 
 } 
})

4.newpage.wxml

<!--newpage.wxml--> 
<view style="width:100%;margin:30rpx">infofromapp:{{infofromapp}}</view> 
<view style="width:100%;margin:30rpx">infofromindex:{{infofromindex}}</view> 
<view style="width:100%;margin:30rpx">infofromstorage:{{infofromstorage}}</view>

5.app.js

//app.js 
App({ 
 data: { 
 infofromapp: '来自APP.js的信息' 
 }, 
 onLaunch: function () { 
 
 } 
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 #Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 #Javascript
详解vue的数据binding绑定原理
Apr 12 #Javascript
angular学习之ngRoute路由机制
Apr 12 #Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 #Javascript
微信小程序登录态控制深入分析
Apr 12 #Javascript
You might like
php导出excel格式数据问题
2014/03/11 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
python中常见错误及解决方法
2020/06/21 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
先进事迹报告会感言
2014/01/24 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
2015年党员自评材料
2014/12/17 职场文书