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


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 相关文章推荐
Node.js 制作实时多人游戏框架
Jan 08 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
layui按条件隐藏表格列的实例
Sep 19 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
php变量范围介绍
2012/10/15 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python虚拟环境项目实例
2017/11/20 Python
python中列表和元组的区别
2017/12/18 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
浅谈Django的缓存机制
2018/08/23 Python
详解python:time模块用法
2019/03/25 Python
用python做游戏的细节详解
2019/06/25 Python
python实现五子棋程序
2020/04/24 Python
python同时遍历两个list用法说明
2020/05/02 Python
python如何调用java类
2020/07/05 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
电气自动化自荐信
2013/10/10 职场文书
管理站站长岗位职责
2013/11/27 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
2016中秋节问候语
2015/11/11 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python