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


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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
Vue性能优化的方法
Jul 30 Javascript
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
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
PyQt5实现简易计算器
2020/05/30 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python3多线程知识点总结
2019/09/26 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
交通事故和解协议书
2014/09/25 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python