网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

微信小程序中怎么实现页面跳转及数据传递功能-创新互联

这篇文章主要介绍“微信小程序中怎么实现页面跳转及数据传递功能”,在日常操作中,相信很多人在微信小程序中怎么实现页面跳转及数据传递功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序中怎么实现页面跳转及数据传递功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联从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 前,而自动生成的是,导致编译报错,同样的还有 image 组件等)


 点击跳转到 logs 页面

为组件绑定跳转事件

index.wxml 中为 image 绑定事件

 
 

index.js 文件中添加跳转方法:

tz: function(){
 wx.navigateTo({
  url: '../logs/logs',
  success: function(res){
  // success
  },
  fail: function() {
   // fail
  },
  complete: function() {
  // complete
  }
 })
}

到此,关于“微信小程序中怎么实现页面跳转及数据传递功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


文章名称:微信小程序中怎么实现页面跳转及数据传递功能-创新互联
文章URL:http://bjjierui.cn/article/cddhsp.html

其他资讯