微信小程序页面跳转的两种方式及页面跳转时的数据传递

本文介绍微信小程序页面跳转的两种方式及页面跳转时的数据传递。

跳转的数据传递

类似 Android 的 Intent 传值，微信小程序也一样可以传值： 

例如：wxml 中写了一个函数跳转：

1. <view class="itemWeight" catchtap="jumpToOverMissionList"> 
2.  
3.   <view class="textStatus">已完成任务</view> 
4.  
5.   <view class="containVertical textNum">{{finishedMissionCount}}</view> 
6.  
7. </view> 

在 js 代码中写：其中，url 是跳转的相对路径，？问号后面加的是参数，以 key－value 的方式， 

这里传了个 value 为 2 的参数过去

1. //跳转到已结束任务列表页 
2.  
3. jumpToOverMissionList:function(){ 
4.  
5.   wx.navigateTo({ 
6.  
7.     url:"mission/missionList/missionList?type=2" 
8.  
9.   }); 
10.  
11. }, 

然后在 missionList.js 中的 OnLoad()方法得到值：option.type 就可以得到了

1. onLoad: function(option) { 
2.  
3.    this.setData({ 
4.  
5.      type:option.type, 
6.  
7.    }); 
8.  
9.    console.log(option.type); 
10.  
11. } 

页面跳转

今天尝试了下小程序点击页面跳转，有两种方式：navigator 组件跳转和添加点击事件跳转。

navigator 组件跳转

和 a 标签跳转差不多，给 navigator 添加要跳转到的 url 地址即可（这里需要注意下，我们在使用微信 web 开发者工 

具按 enter 自动补全时生成的组件有错，navigator 闭合标签的“/” 位置应该是在 navigator 前，而自动生成的是 

<navigator/>,导致编译报错，同样的还有 image 组件等）

  <navigator url="../logs/logs">点击跳转到 logs 页面</navigator>

为组件绑定跳转事件

index.wxml 中为 image 绑定事件

  <image src="{{item.imgsrc}}" bindtap="tz"></image>

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

1. tz: function(){ 
2.  
3.   wx.navigateTo({ 
4.  
5.     url: '../logs/logs', 
6.  
7.     success: function(res){ 
8.  
9.     // success 
10.  
11.     }, 
12.  
13.     fail: function() { 
14.  
15.      // fail 
16.  
17.     }, 
18.  
19.     complete: function() { 
20.  
21.     // complete 
22.  
23.     } 
24.  
25.   }) 
26.  
27. }