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

2024-11-30 14:50:20

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

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

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

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

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

微信小程序中子页面向父页面传值实例详解

微信小程序中子页面向父页面传值实例详解上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属
微信小程序页面传值详解

微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可如果要传数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能
微信小程序页面传值实例分析

微信小程序页面传值实例分析最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值刚开始使用路径传参解决,但是众所周知: 各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0 :url最大长度2083个字符,超过最大长度后无法提交. IE7.0 :url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符. firefox 3.0.3 :url最大长度7764个字符,超过最大长度后无法提交. Oper
微信小程序页面间传值与页面取值操作实例分析

本文实例讲述了微信小程序页面间传值与页面取值操作.分享给大家供大家参考,具体如下: 微信小程序页面间传值 1.js页面间的传值:url: ' 路径 ? 值='+ 获取该页面取值, 实例1: pageSkip :function(){ wx.navigateTo({ url: '/page/login/facte?shopsName='+this.data.shopsName, }) }, 实例2: pageSkip :function(){ wx.navigateTo({ url: '/page
微信小程序页面跳转传值实现代码

微信小程序页面跳转传值实现代码微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全
微信小程序页面返回传值的4种解决方案汇总

目录使用场景解决方案 1.使用globalData实现 2.使用本地缓存Storage实现 3.使用小程序的Page页面栈实现 4.使用wx.navigateTo API的events实现总结使用场景小程序从A页面跳转到B页面,在B页面选择一个值后返回到A页面,在A页面使用在B页面选中的值.例如:在购买订单页面跳转到地址列表,选择完地址以后回退到订单页面,订单页面的配送地址需要同步更新. 解决方案常见的比容要容易解决的方案是使用小程序的全局存储globalData.本地缓存stora
微信小程序页面跳转事件绑定的实例详解

微信小程序页面跳转事件绑定的实例详解什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap
微信小程序页面跳转和数据传递实例详解

微信小程序页面跳转和数据传递 1.先导在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时
微信小程序页面跳转如何实现传值

微信小程序页面跳转如何实现传值 (1)页面跳转如何传值(实现跳转到不同页面) 点击页面 WXML:加入自定义属性(data-category="{{categoryTitle}}") <view class="more" catchtap="onMoreTap" data-category="{{categoryTitle}}"> js:在event中取出category值并加到URL中 onMoreTap:fu
微信小程序页面滚动到指定位置代码实例

这篇文章主要介绍了微信小程序页面滚动到指定位置代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selectViewport().scrollOffset() query.select("#comment").boundingClientRe
微信小程序页面间传值的实现方法示例

小程序页面间传值大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然.那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.navigateTo,那这个event作用嘛就是可以接收,下一页返回回来的参数的.像

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

相关推荐

随机推荐