微信小程序页面传值实例分析


Posted in Javascript onApril 19, 2017

微信小程序页面传值实例分析

最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值

刚开始使用路径传参解决,但是众所周知:

各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下:
IE6.0 :url最大长度2083个字符,超过最大长度后无法提交。
IE7.0 :url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符。
firefox 3.0.3 :url最大长度7764个字符,超过最大长度后无法提交。
Opera 9.52 :url最大长度7648个字符,超过最大长度后无法提交。
Google Chrome 2.0.168 :url最大长度7713个字符,超过最大长度后无法提交。

所以觉得不靠谱。

研究了一下官网,发现有两种方式可以“比较优雅”地干这件事,当然不能和vuex/flux比。

1.使用全局变量

在项目app.js中定义globalData

App({
 globalData:{
 userInfo:'angeladaddy'
}
});

在需要的地方使用:

getGlobalVar:function(){
 var that=this;
that.setData({
 globalvar_str:JSON.stringify(getApp().globalData)
}) 
}

当然也可以随时赋值:

onLoad:function(options){
 getApp().globalData.userInfo+=' is an awesome man';
},

效果:

微信小程序页面传值实例分析

2.使用模板

根据官方介绍如下:

首先定义模板,使用name属性

<template name="msgItem">
 <view>
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>

接着,使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

<template is="msgItem" data="{{...item}}"/>

给item赋值以显示模板数据

Page({
data: {
 item: {
  index: 0,
  msg: 'this is a template',
  time: '2016-09-15'
 }
}
})

这样就一下解决了页面传值问题

后记:既然小程序可以使用ES6的所有特性,那么那个var that=this又是什么鬼?为何不能用箭头函数解决作用域问题?回头再试试。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 #Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 #Javascript
angular-cli修改端口号【angular2】
Apr 19 #Javascript
Angular2自定义分页组件
Apr 19 #Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 #Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 #Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP创建XML接口示例
2019/07/04 PHP
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
JS实现留言板功能
2017/06/17 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python实现ATM系统
2020/02/17 Python
python脚本定时发送邮件
2020/12/22 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
出纳员岗位责任制
2014/02/11 职场文书
珠宝店促销方案
2014/03/21 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
工厂搬迁方案
2014/05/11 职场文书
庆元旦活动总结
2014/07/09 职场文书
校本课程教学计划
2015/01/19 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python