本文介紹微信小程序頁面跳轉的兩種方式及頁面跳轉時的數據傳遞。

跳轉的數據傳遞

類似 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. }