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

首页 > 网络编程 > JavaScript 更新日期: 2017-09-10
这篇文章主要介绍了微信小程序页面传值实例分析的相关资料,需要的朋友可以参考下

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

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

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

各浏览器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又是什么鬼?为何不能用箭头函数解决作用域问题?回头再试试。

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • C#实现窗体间传值实例分析
    这篇文章主要介绍了C#实现窗体间传值的方法,结合实例形式较为详细的分析了C#针对窗体间传值的处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例分析了C#实现窗体间传值的方法.分享给大家供大家参考,具体如下: 1.VS 2005的Visual C# Windows应用程序和Visual C#智能设备Pocket PC 2003设备应用程序. 假设我们 ...
  • 基于php的微信公众平台开发入门实例
    基于php的微信公众平台开发入门实例
    这篇文章主要介绍了基于php的微信公众平台开发入门,实例分析了微信公众平台从注册.配置方法及接口代码的实现技巧,深入浅出,非常具有实用价值,需要的朋友可以参考下本文实例讲述了基于php的微信公众平台开发方法.分享给大家供大家参考.具体如下: 最近在做微信公众平台开发,一口气写了二十几个功能,挺有意思的- 今天来分享一下开发经验~微信公众平台提供的接口很简单, ...
  • jsp实现checkbox的ajax传值实例
    这篇文章主要介绍了jsp实现checkbox的ajax传值,实例分析了针对checkbox的Ajax使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jsp实现checkbox的ajax传值用法.分享给大家供大家参考.具体分析如下: 今天我想用ajax把选中的所有的chekbox的值全部都传到后台做一个处理,但在后台接收值的时候,我遇到了麻烦 ...
  • 实例分析一个简单的Win32程序
    这篇文章主要介绍了实例分析一个简单的Win32程序,对于Win32应用程序的原理.执行流程.实现方法主要环节都做了较为详细的分析,有助于读者深入理解Windows应用程序设计,需要的朋友可以参考下本文较为详细的分析了一个Win32程序的组成.结构.实现方法及运行原理,对于进行Windows程序设计有很好的借鉴参考价值.分享给大家供大家参考之用.具体分析如下: ...
  • JSP页面文件中base标记用法实例分析
    这篇文章主要介绍了JSP页面文件中base标记用法,以实例形式较为详细的分析了JSP中base标记的功能与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例分析了JSP页面文件中base标记用法.分享给大家供大家参考,具体如下: 我们在用IDE工具生成JSP页面时通常都包含下面的两段代码, <% String path = request ...
  • Asp.Net(C#)自动执行计划任务的程序实例分析分享
    这篇文章主要介绍了Asp.NetC#自动执行计划任务的程序实例分析,有需要的朋友可以参考一下在业务复杂的应用程序中,有时候会要求一个或者多个任务在一定的时间或者一定的时间间隔内计划进行,比如定时备份或同步数据库,定时发送电子邮件等,我们称之为计划任务.实现计划任务的方法也有很多,可以采用SQLAgent执行存储过程来实现,也可以采用Windows任务调度程序 ...
猜你喜欢