前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >开发 | 如何在小程序页面之间,传递数据和变量?

开发 | 如何在小程序页面之间,传递数据和变量?

作者头像
知晓君
发布于 2018-08-01 07:17:11
发布于 2018-08-01 07:17:11
1.2K0
举报
文章被收录于专栏:知晓程序知晓程序

文 | Angeladaddy

最近组里开发小程序,遇到了一个困扰前端很长时间的话题:页面之间,如何传递数据和变量?

刚开始,我们选择使用路径传参解决。但是众所周知,各浏览器 HTTP Get 请求 URL 最大长度并不相同,大部分浏览器只能接受 7000 个字符的数据。

所以,我们觉得这个方式并不靠谱。

研究了一下官网,发现有两种方式可以「比较优雅」地完成这个任务。

使用全局变量

在项目 app.js 中定义 globalData(全局变量)。

在需要的地方,我们可以随意调用这个全局变量。

当然,赋值也是没问题的。

来试试效果:

使用模板

在官方文档中,模板的使用需要先定义一个模板,要用到 name 属性。

接着,使用模板和 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入。比如这样:

item 赋值,以显示模板数据。

这样就「duang」地一下,解决了页面传值问题。

另外,既然小程序可以使用 ES6 的所有特性,那么那个 var that=this 又是什么鬼?为何不能用箭头函数解决作用域问题?大家可以自行尝试一下。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-04-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
开发 | 如何在微信小程序的页面间传递数据?
我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法。
知晓君
2018/08/01
1.3K0
开发 | 如何在微信小程序的页面间传递数据?
详解 | 小程序页面间如何进行传递数据
工作中我们经常会遇到B页面需要A页面内的部分或全部数据;C页面内的一个函数执行完之后需要改变B页面内的显示样式;也或者是A和B两个页面用到了同样的网络数据,在其中一个页面做出修改后另一个页面也要随之改变以保证回传服务器时数据的准确性,等等诸如此类的页面间数据传递的问题。
极乐君
2020/11/30
11.9K0
uni-app小程序开发-页面跳转及传值
示例:uni.redirectTo({ url: '/pages/login/login' })
码客说
2024/07/04
6640
「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)
小程序如何加载的呢?生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.3 加载页面 小程序默认加载的pages中的第一个目录 不管你的名称
IT架构圈
2018/12/18
4900
小程序开发总结03 - 数据传递与缓存
和H5不同,元素上绑定事件只能传入事件名,不能直接传参,需用通过dataset传参
CS逍遥剑仙
2018/06/23
1.3K0
小程序开发总结03 - 数据传递与缓存
微信小程序初体验
用户1141560
2017/12/26
2.9K0
微信小程序初体验
微信小程序面试题总结
大体相同,但小程序直接this.data的属性是不可以同步到视图的,必须调用this.setData()方法!
changxin7
2020/02/25
8.2K0
微信小程序开发技巧总结 (一)
结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。
Kindear
2019/05/25
1K0
从零新建小程序
一:项目生成 自行下载微信开发者工具-打开微信开发者工具 如下图: 项目:就是项目要存的位置。 AppID:企业级需(小程序申请成功的时候会有这个,个人的不用填写,只是最后不能发布到线上)。 项目名称:demo1(可以根据自己需要起名字) 建立普通快速启动模板(就是快速生成一个小项目) ------点击确定 二:项目预览 确定之后显示的界面如下图 2-1 界面分析 2-2 项目目录 2-21 那么简单的界面,相信你用html分分钟就写好了吧,而且保证目录结构清晰。 2-22 两个文件夹 page
企鹅号小编
2018/01/17
1.1K0
从零新建小程序
微信小程序----全局变量
实例:我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件:base64.js、config.js、data.js
Rattenking
2021/02/01
5.4K0
微信小程序----全局变量
小程序不同页面之间的传值方式
今天来说一下小程序不同页面之间传值的几种方式: 1、URL传值 这种方式最常用,比如: wx.navigateTo({ url: '../detail/detail?cid='+cid+'&ac
连胜
2018/03/07
4.6K0
微信开发--微信小程序(三)
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。
生南星
2019/07/22
21.1K0
15个高频微信小程序面试题
kRjT-hhuhism9497041.jpg 微信小程序面试题 1. 小程序有几个文件? WXML: 微信自己定义的一套组件 WXSS : 用于描述 WXML 的组件样式 js : 逻辑处理 json : 小程序页面配置 2.小程序怎么跟随事件传值 在 页面标签上通过 绑定 dataset-key = value , 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值。 <button bindtap="get" data-name=
程序员海军
2021/01/17
7.1K0
15个高频微信小程序面试题
微信小程序入门教程之三:脚本编程
今天,接着往下讲,教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动。学会了脚本,就能做出复杂的页面了。
ruanyf
2020/11/03
1.9K0
微信小程序入门教程之三:脚本编程
简单到没朋友,微信小程序开发实录【面试+工作】
微信小程序开发(一)新建小程序项目 ---- 前提 在准备微信小程序开发之前,希望你已经在微信·公众平台 https://mp.weixin.qq.com/注册了小程序。微信小程序账号注册入口 ht
Java帮帮
2018/10/24
4K0
简单到没朋友,微信小程序开发实录【面试+工作】
【查缺补漏】 15个高频微信小程序面试题
微信小程序面试题 1. 小程序有几个文件? WXML: 微信自己定义的一套组件 WXSS : 用于描述 WXML 的组件样式 js : 逻辑处理 json : 小程序页面配置 2.小程序怎么跟随事件传值 在 页面标签上通过 绑定 data-key = value , 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值。 <button bindtap="get" data-name="测试"> 拿到传值</button> get(e){
程序员海军
2022/02/15
1.9K0
【小程序探索】:深入理解小程序中的数据
刚开始撸小程序的时候,觉得看看文档就可以了,导致写了很多垃圾代码坑人坑己,相信大部分初学者也不会去仔细研究文档,更别说啰里啰嗦的指南了,在通读小程序官方指南后,很有必要总结一番。清楚了生命周期和数据通信,就能对整个程序有一定的把控能力,定位问题和解决问题的能力将大幅提高。
极乐君
2019/12/16
1.3K0
【小程序探索】:深入理解小程序中的数据
微信小程序入门文档下载_小程序开发教程全集免费
最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式。
全栈程序员站长
2022/09/20
11.2K0
微信小程序入门文档下载_小程序开发教程全集免费
全栈开发工程师微信小程序-下
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
达达前端
2019/07/03
7780
全栈开发工程师微信小程序-下
微信小程序,开发大起底
作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀编辑。微信小程序爱好者。 感谢@翟东平 @qq_31383345 @nigelyq 等热情参与和共建 责编:CSDN知识图谱小助手 「小程序」是什么 张小龙在朋友圈里这样解释道:小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 微信小程序是一种全新的连接用户与服务的方式,它可以
智能算法
2018/04/03
1.6K0
微信小程序,开发大起底
相关推荐
开发 | 如何在微信小程序的页面间传递数据?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档