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


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 相关文章推荐
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
vue中轮训器的使用
Jan 27 Javascript
JS实现小星星特效
Dec 24 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
详细解读Python中的__init__()方法
2015/05/02 Python
Python的re模块正则表达式操作
2016/05/25 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python绘制直线的方法
2018/06/30 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python 接收处理外带的参数方法
2018/12/03 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
html5时钟实现代码
2010/10/22 HTML / CSS
广州迈达威.net面试题目
2012/03/10 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
Python编写冷笑话生成器
2022/04/20 Python