从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍“微信小程序中怎么实现页面跳转及数据传递功能”,在日常操作中,相信很多人在微信小程序中怎么实现页面跳转及数据传递功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序中怎么实现页面跳转及数据传递功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联从2013年创立,是专业互联网技术服务公司,拥有项目网站制作、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元徽县做网站,已为上家服务,为徽县各地企业和个人服务,联系电话:18980820575微信小程序 页面跳转及数据传递详解
类似 Android 的 Intent 传值,微信小程序也一样可以传值:
例如:wxml 中写了一个函数跳转:
已完成任务 {{finishedMissionCount}}
在 js 代码中写:其中,url 是跳转的相对路径,?问号后面加的是参数,以 key-value 的方式,
这里传了个 value 为 2 的参数过去
//跳转到已结束任务列表页 jumpToOverMissionList:function(){ wx.navigateTo({ url:"mission/missionList/missionList?type=2" }); },
然后在 missionList.js 中的 OnLoad()方法得到值:option.type 就可以得到了
onLoad: function(option) { this.setData({ type:option.type, }); console.log(option.type); }
页面跳转
今天尝试了下小程序点击页面跳转,有两种方式:navigator 组件跳转和添加点击事件跳转。
navigator 组件跳转
和 a 标签跳转差不多,给 navigator 添加要跳转到的 url 地址即可(这里需要注意下,我们在使用微信 web 开发者工具按 enter 自动补全时生成的组件有错,navigator 闭合标签的“/” 位置应该是在 navigator 前,而自动生成的是
点击跳转到 logs 页面
为组件绑定跳转事件
index.wxml 中为 image 绑定事件
index.js 文件中添加跳转方法:
tz: function(){
wx.navigateTo({
url: '../logs/logs',
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
到此,关于“微信小程序中怎么实现页面跳转及数据传递功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图