[轉] 微信小程序 頁面跳轉 傳遞參數

本文轉自：http://blog.csdn.net/qq_31383345/article/details/52795212

微信小程序的頁面跳轉,頁面之間傳遞參數筆記.

CSDN微信小程序開發專欄,歡迎關注!

  先上demo圖:

  

 

為了簡化邏輯,所以index.wxml里面只寫了兩個text.既然是跳轉,那就還有其他頁面.

目錄如下:

三個頁面,但是代碼很簡單.直接上代碼.

 

<span style="font-size:24px;"><!--index.wxml-->
<view class="btn-area">
  <navigator url="../navigator/navigator?title=我是navigate" >跳轉到新頁面</navigator>
  <navigator url="../redirect/redirect?title=我是redirect" redirect>在當前頁打開</navigator>
</view></span>

<span style="font-size:24px;"><!--index.wxml-->  
<view class="btn-area">  
  <navigator url="../navigator/navigator?title=我是navigate" >跳轉到新頁面</navigator>  
  <navigator url="../redirect/redirect?title=我是redirect" redirect>在當前頁打開</navigator>  
</view></span>

index.wxml中的URL就是跳轉的頁面路徑.上面代碼中就是navigator目錄下的navigator頁面,title是參數. navigator下redirect屬性是值在當前頁打開.如果不加redirect就是跳轉到新頁面.都可以攜帶參數. navigator下redirect屬性是值在當前頁打開.如果不加redirect就是跳轉到新頁面.都可以攜帶參數.

 

<span style="font-size:24px;"><!--navigatort.wxml-->
<view style="text-align:center"> {{title}} </view></span>

<span style="font-size:24px;"><!--navigatort.wxml-->  
<view style="text-align:center"> {{title}} </view></span>

在navigatort.wxml中通過js代碼可以獲取到title,代碼如下

//navigatort.js

 

Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})

Page({  
  onLoad: function(options) {  
    this.setData({  
      title: options.title  
    })  
  }  
})

 

 

<span style="font-size:24px;"><!--redirect.wxml-->
<view style="text-align:center"> {{title}} </view></span>

<span style="font-size:24px;"><!--redirect.wxml-->  
<view style="text-align:center"> {{title}} </view></span>

 

<span style="font-size:24px;">//redirect.js
Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})</span>

<span style="font-size:24px;">//redirect.js  
Page({  
  onLoad: function(options) {  
    this.setData({  
      title: options.title  
    })  
  }  
})</span>

最后上兩張跳轉后的圖.

1.跳轉到新頁面

2.在原來的頁面打開

有沒有發現一個細節,在原來的頁面打開是不會出現返回按鈕的,而跳轉到新頁面后會出返回按鈕.

這是因為我寫了兩個頁面.如果indexwxml不是一級頁面,這里都會出現返回按鈕.

當然返回的結果是不一樣的:

1.跳轉到新頁面,返回是回到之前的頁面;

2.在原來頁面打開,返回是回到上一級頁面.

微信開發文檔

http://blog.csdn.net/qq_31383345