• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 微信小程序页面传值实例分析

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

作者:Angeladaddy 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Angeladaddy通过本文主要向大家介绍了微信小程序页面传值,小程序页面传值,微信小程序页面间传值,微信小程序跨页面传值,jsp页面传值等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

各浏览器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个字符,超过最大长度后无法提交。
</div>

所以觉得不靠谱。

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

1.使用全局变量

在项目app.js中定义globalData

App({
 globalData:{
 userInfo:'angeladaddy'
}
});
</div>

在需要的地方使用:

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

当然也可以随时赋值:

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

效果:


2.使用模板

根据官方介绍如下:

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

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

接着,使用模板

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

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

给item赋值以显示模板数据

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

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

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序页面传值实例分析
  • 微信小程序 页面跳转如何实现传值
  • 微信小程序 传值取值的几种方法总结
  • 微信小程序 页面跳转传递值几种方法详解
  • 微信小程序 数据封装,参数传值等经验分享

相关文章

  • 2017-05-11微信小程序通过api接口将json数据展现到小程序示例
  • 2017-05-11js实现五星评价功能
  • 2017-05-11jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
  • 2017-05-11浅谈JavaScript中promise的使用
  • 2017-05-11AngularJS实现使用路由切换视图的方法
  • 2017-05-11Vue生命周期示例详解
  • 2017-05-11搭建简单的nodejs http服务器详解
  • 2017-05-11微信小程序 五星评价功能的实现
  • 2017-05-11JavaScript实现定时页面跳转功能示例
  • 2017-05-11JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js模拟支付宝密码输入框
    • 多个上传文件用js验证文件的格式和大小的方法(推荐)
    • angular-cli修改端口号【angular2】
    • js实现消息滚动效果
    • 微信小程序 支付简单实例及注意事项
    • 基于javascript实现数字英文验证码
    • AngularJS学习第一篇 AngularJS基础知识
    • javascript实现页面滚屏效果
    • 详解打造 Vue.js 可复用组件
    • Vue 进阶教程之v-model详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有