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


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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
js 表格隔行颜色
Dec 02 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript中的闭包
Feb 24 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
为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
PHP4在Windows2000下的安装
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
python实现实时监控文件的方法
2016/08/26 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python中的随机函数random的用法示例
2018/01/27 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
python几种常用功能实现代码实例
2019/12/25 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
Python常用数据分析模块原理解析
2020/07/20 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
应届生学校辅导员求职信
2013/11/07 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
如何拟写通知正文?
2019/04/02 职场文书