开发 | 如何在微信小程序的页面间传递数据?
我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法。
本期,知晓程序(微信号 zxcx0101)为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有关页面间数据传递的更多方法。
文 | 小日子先生
在微信小程序的开发中,我们会经常遇到页面间数据传递或者相互影响的问题。在实际的开发过程中,可以通过以下几种方法来实现。
使用全局变量
全局变量实际上是定义了一个全局的对象,并在每个页面中引入。
在初始化代码的时候,小程序会读取一个 app.js
的文件,在这里我们可以定义我们所需要的全局变量。
//app.js
...
App({
globalData : {
foo : 'bar'
}
});
然后在页面中,可以通过 getApp()
方法获取到全局应用对象,可以对全局变量进行读取并更改:
//page.js
...
var app = getApp()
var getFoo = app.globalData.foo
app.globalData.foo = 'fun'
由于 app.js
在项目中是用来做基础配置的,因此不建议将很多变量放在这里配置。一般情况下会将一些持久化的常量配置在这里,对于经常需要变动的量不建议用这个方法。
使用本地缓存
本地缓存是微信小程序提供的一个功能,可以将用户产生的数据做本地的持久化,类似于 NoSQL,可以进行读取和修改的操作。
那么在不同的页面之间,如何利用它,进行数据的交互呢?
假设我们在 A 页面保存了用户的信息。
// pageA.js
...
var developer = {
name: 'raymond',
gender: 'male'
}
wx.setStorageSync('developer', developer);
这样做,这个数据就存在了本地。当在 B 页面需要使用的时候,可以直接的获取到数据池中的数据,并进行 CRUD 操作:
//pageB.js
...
// Retrieve
var developer = (wx.getStorageSync('developer') || [])
// Update
developer.name = 'Jiayang'
wx.setStorageSync('developer', developer);
// Delete
wx.removeStorage({
key: 'developer'
})
需要注意的是,在回到 A 页面的时候,小程序需要重新读取数据。这时候,可以选择放在生命周期的 onShow
中对数据重新加载
父级往子级页面(模板)的数据传递
我们通常会在页面之间进行跳转、重定向的操作。这时候,我们可以选择将部分数据放在 url
里面,并在新页面 onLoad
的时候进行初始化。
pageC.js
...
// Navigate
wx.navigateTo({
url: '../pageD/pageD?name=raymond&gender=male',
})
// Redirect
wx.redirectTo({
url: '../pageD/pageD?name=raymond&gender=male',
})
在 D 页面中,我们可以这样接收到到所传进来的参数:
// pageD.js
...
Page({
onLoad: function(option){
console.log(option.name + 'is' + option.gender)
this.setData({
option: option
})
}
})
wx.navigateTo
和 wx.redirectTo
不允许跳转到 tab 所包含的页面,只能用 wx.switchTab
跳转。需要注意的是,wx.switchTab
中的 url
不能传参数。
微信新提供的 wx.reLaunch
接口可以传入参数。
另外,在页面中我们通常会用到一些组件模板,因此在父子之间也会有相应的数据传递。
使用 name
属性,作为模板的名字。然后在这里面使用 is
属性,声明需要的使用的模板。
{{index}}: {{msg}}
Time: {{time}}
然后将模板所需要的 data
传入,如:
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
传入模板的除了变量,还可以是事件方法对象。例如,模板中的点击事件,可以传递到使用模板的元素中。
通过获取到页面对象进行数据操作
这个方法的精髓,是通过获取到其他页面的对象原型,然后通过原型方法 setData
对当前对象管理的 data
进行修改,示例如下:
//pageE.js
...
Page({
data: {
index: 1
}
})
当跳转到下一个页面 F 之后,假定在 F 中有操作需要对 E 中的数据有修改,则可以使用以下方法:
pageF.js
...
Page({
changeIndexInE: function(){
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
index: 0
})
}
})
这个方法可以操作页面堆栈里面的页面的数据,可以做到让后一级页面对上级页面群的数据管理。
小结
在微信小程序中有以上并且不局限于以上几种的方式进行页面间数据传递、交互,在实际应用中可以组合使用。比如说:
- 一些常量,可以交由
app.js
管理;需要持久化的量可以放在本地保存。 - 涉及到下级页面或者模板元素的数据,可以通过传入参数的方式传入。
- 后级页面可以通过获取堆栈里的页面对象快速修改上级的数据。
在实际应用中结合使用,可以更好地管理小程序的数据。
本文如有不周到之处,可以留言进行讨论。
开发 | 如何在微信小程序的页面间传递数据?的更多相关文章
- 微信小程序之页面之间传递值
页面之间传值有三种方式 1.url传值 2.本地存储传值 3.全局变量传值 1.url传值: 通过url传值的需要通过option来获取参数值. 更多详情可以访问小程序-navigateTo章节. A ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程
这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...
- 微信小程序的开发:通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...
- 在微信小程序页面间传递数据总结
在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...
- 零基础开发一款微信小程序商城
零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...
- 微信小程序:页面配置 page.json
微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 图解微信小程序---实现页面的跳转与返回操作
图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...
随机推荐
- Java集合——TreeMap源码详解
)TreeMap 是一个有序的key-value集合,它是通过红黑树实现的.因为红黑树是平衡的二叉搜索树,所以其put(包含update操作).get.remove的时间复杂度都为log(n). (2 ...
- [BZOJ3745][COCI2015]Norma[分治]
题意 题目链接 分析 考虑分治,记当前分治区间为 \(l,r\) . 枚举左端点,然后发现右端点无非三种情况: 极大极小值都在左边; 有一个在左边; 极大极小值都在右边; 考虑递推 \(l\) 的同时 ...
- javaweb学习3——验证码
声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...
- Youtube高清视频下载的3种方法
经常看视频的朋友都听说或使用过youtube, 它是一个综合性的视频网站,包含的内容多种多样,能满足不同的人的需求,最要的是广告少,资源良心,不像有些网站,动不动就是1分种以上的长广告.有些因为工作 ...
- 详细介绍svn在eclipse中的使用(附图解说明)
SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subversion ...
- facebook和twitter的截图分享
记录一下代码,以后自己可以抄..我抄我自己=.= SDK的接入看之前的博客.所以话不多少,直接上代码(记得分享一定要安装原生app(FB和twitter),不然只通过网页分享无法发图片.),初始化都在 ...
- mysql 优化之 doublewrite buffer 机制
是什么? doublewrite buffer是mysql 系统表空间的一块存储区域. 有什么用? 在Innodb将数据页写到数据存储文件之前,存储从Innodb缓存池刷过来的数据页.且只有将数写入d ...
- Oracle数据库之分组查询及排序
分组查询:使用 group by 来设置分组,把该列具有相同值的多条记录当成一组记录来处理,然后只会输出一条记录,得到的结果会默认使用升序的方式进行排列. 规则: (1)如果使用了分组函数,或者是 g ...
- window搭建私有云,只要几分钟
本文介绍如何在window搭建私有云网盘. 工具/原料:一台window系统电脑或者window服务器(vps),Xampp 安装包,可道云kodexplorer安装包 第一步,xampp安装 1.官 ...
- docker 安装vim
执行以下命令 apt-get update apt-get install vim