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

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

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

文 | 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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序不同页面之间的传值方式
今天来说一下小程序不同页面之间传值的几种方式: 1、URL传值 这种方式最常用,比如: wx.navigateTo({ url: '../detail/detail?cid='+cid+'&ac
连胜
2018/03/07
4.4K0
开发 | 如何在微信小程序的页面间传递数据?
我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法。
知晓君
2018/08/01
1.2K0
开发 | 如何在微信小程序的页面间传递数据?
小程序开发总结03 - 数据传递与缓存
和H5不同,元素上绑定事件只能传入事件名,不能直接传参,需用通过dataset传参
CS逍遥剑仙
2018/06/23
1.3K0
小程序开发总结03 - 数据传递与缓存
微信小程序初体验
用户1141560
2017/12/26
2.8K0
微信小程序初体验
uni-app小程序开发-页面跳转及传值
示例:uni.redirectTo({ url: '/pages/login/login' })
码客说
2024/07/04
4040
微信小程序开发技巧总结 (一)
结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。
Kindear
2019/05/25
9930
「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)
小程序如何加载的呢?生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.3 加载页面 小程序默认加载的pages中的第一个目录 不管你的名称
IT架构圈
2018/12/18
4610
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
6.8K0
15个高频微信小程序面试题
web前端常见面试题总结
javascript知识点:一篇文章带你进入JavaScript–JavaScript总结
全栈程序员站长
2022/09/29
1.5K0
web前端常见面试题总结
【查缺补漏】 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.8K0
微信小程序入门教程之三:脚本编程
今天,接着往下讲,教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动。学会了脚本,就能做出复杂的页面了。
ruanyf
2020/11/03
1.8K0
微信小程序入门教程之三:脚本编程
详解 | 小程序页面间如何进行传递数据
工作中我们经常会遇到B页面需要A页面内的部分或全部数据;C页面内的一个函数执行完之后需要改变B页面内的显示样式;也或者是A和B两个页面用到了同样的网络数据,在其中一个页面做出修改后另一个页面也要随之改变以保证回传服务器时数据的准确性,等等诸如此类的页面间数据传递的问题。
极乐君
2020/11/30
11.7K0
原生小程序开发注意事项总结
这里很多开发者喜欢使用RGB或者十六进制的值进行表示颜色,别的属性可以,上面两个不行
何处锦绣不灰堆
2022/06/01
5750
开发 | 小程序开发有哪些坑?这份笔记都整理出来了
知晓程序注: 即使你认为小程序开发很简单,也无法否认小程序开发中,仍然有许多需要注意的地方。稍不注意,就会产生意料之外的问题。 知晓程序(微信号 zxcx0101)今天推荐的这篇文章,是作者通过亲身开发,找到了微信小程序开发中的坑,并在文章给出了解决方案。希望能够帮助开发小程序的你,避开这些坑。 文 | 泡芙小姐 110 1. JSON 配置文件 小程序中,包含唯一的全局配置文件 app.json,以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json 相同
知晓君
2018/06/28
1.4K0
带你玩转小程序开发实践|含直播回顾视频
作者:张利涛 本文原创,转载请注明作者及出处 小程序和 H5 区别 小程序的运行过程 解决小程序接口不支持 Promise 的问题 小程序组件化开发及通信 小程序和 H5 区别 我们不一样,不一
iKcamp
2018/01/04
1.4K0
带你玩转小程序开发实践|含直播回顾视频
「大众点评点餐」小程序开发经验 04:逻辑层
继上次谈到了视图层开发经验,本期,知晓程序(微信号 zxcx0101)想要和大家分享大众点评点餐小程序开发中,逻辑层开发的经验。
知晓君
2018/08/01
7880
「大众点评点餐」小程序开发经验 04:逻辑层
微信小程序----全局变量
实例:我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件:base64.js、config.js、data.js
Rattenking
2021/02/01
5.3K0
微信小程序----全局变量
微信小程序-开发入门(一)
微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应用场景(用完即走和二维码分发等)还是很值得我们学习的,技术上面如果了解React的话,会发现他们在组件化上面有很多雷同之处。说白了,小程序就是基于微信平台的H5轻应用,微信将系统底层功能(设备、位置、媒体、文件等)和微信自身功能(登录、支付、分享等)封装成相应API供小程序调用。 自己根据官方文档写过一个DOME,借助和风天气开放API接口,实现天气
小古哥
2018/03/08
2.6K2
微信小程序-开发入门(一)
微信小程序初步入坑指南
https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html
mySoul
2018/08/27
1.2K0
从零新建小程序
一:项目生成 自行下载微信开发者工具-打开微信开发者工具 如下图: 项目:就是项目要存的位置。 AppID:企业级需(小程序申请成功的时候会有这个,个人的不用填写,只是最后不能发布到线上)。 项目名称:demo1(可以根据自己需要起名字) 建立普通快速启动模板(就是快速生成一个小项目) ------点击确定 二:项目预览 确定之后显示的界面如下图 2-1 界面分析 2-2 项目目录 2-21 那么简单的界面,相信你用html分分钟就写好了吧,而且保证目录结构清晰。 2-22 两个文件夹 page
企鹅号小编
2018/01/17
1.1K0
从零新建小程序
相关推荐
小程序不同页面之间的传值方式
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文