本文介紹微信小程序頁面跳轉(zhuǎn)的兩種方式及頁面跳轉(zhuǎn)時(shí)的數(shù)據(jù)傳遞。

跳轉(zhuǎn)的數(shù)據(jù)傳遞

類似 Android 的 Intent 傳值，微信小程序也一樣可以傳值： 

例如：wxml 中寫了一個(gè)函數(shù)跳轉(zhuǎn)：

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

在 js 代碼中寫：其中，url 是跳轉(zhuǎn)的相對(duì)路徑，？問號(hào)后面加的是參數(shù)，以 key－value 的方式， 

這里傳了個(gè) value 為 2 的參數(shù)過去

1. //跳轉(zhuǎn)到已結(jié)束任務(wù)列表頁 
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. } 

頁面跳轉(zhuǎn)

今天嘗試了下小程序點(diǎn)擊頁面跳轉(zhuǎn)，有兩種方式：navigator 組件跳轉(zhuǎn)和添加點(diǎn)擊事件跳轉(zhuǎn)。

navigator 組件跳轉(zhuǎn)

和 a 標(biāo)簽跳轉(zhuǎn)差不多，給 navigator 添加要跳轉(zhuǎn)到的 url 地址即可（這里需要注意下，我們?cè)谑褂梦⑿?web 開發(fā)者工 

具按 enter 自動(dòng)補(bǔ)全時(shí)生成的組件有錯(cuò)，navigator 閉合標(biāo)簽的“/” 位置應(yīng)該是在 navigator 前，而自動(dòng)生成的是 

<navigator/>,導(dǎo)致編譯報(bào)錯(cuò)，同樣的還有 image 組件等）

  <navigator url="../logs/logs">點(diǎn)擊跳轉(zhuǎn)到 logs 頁面</navigator>

為組件綁定跳轉(zhuǎn)事件

index.wxml 中為 image 綁定事件

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

index.js 文件中添加跳轉(zhuǎn)方法：

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