微信小程式 頁面傳參執行個體詳解，小程式

小程式 頁面傳參執行個體詳解，小程式

小程式 頁面傳參

  小程式的傳參，頁面跳轉,頁面之間傳遞參數在開發APP應用的時候會經常用到這樣的功能，這裡就用小程式來實現，大家可以看下如何?，如有錯誤，請指正。

  先上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> 

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>

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

//navigatort.js

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.js  Page({   onLoad: function(options) {    this.setData({     title: options.title    })   }  })</span> 

最後上兩張跳轉後的圖.

1.跳轉到新頁面

2.在原來的頁面開啟

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

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

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

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

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

開發文檔

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！