詳解微信小程式 頁面跳轉 傳遞參數_javascript技巧

來源:互聯網
上載者:User

微信小程式的頁面跳轉,頁面之間傳遞參數筆記,具體如下:
先上demo圖:

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

目錄如下:

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

<!--index.wxml--> <view class="btn-area">  <navigator url="../navigator/navigator?title=我是navigate" >跳轉到新頁面</navigator>  <navigator url="../redirect/redirect?title=我是redirect" redirect>在當前頁開啟</navigator> </view>

index.wxml中的URL就是跳轉的頁面路徑.上面代碼中就是navigator目錄下的navigator頁面,title是參數.

navigator下redirect屬性是值在當前頁開啟.如果不加redirect就是跳轉到新頁面.都可以攜帶參數.

navigator下redirect屬性是值在當前頁開啟.如果不加redirect就是跳轉到新頁面.都可以攜帶參數.

<!--navigatort.wxml--> <view style="text-align:center"> {{title}} </view>

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

//navigatort.jsPage({  onLoad: function(options) {  this.setData({  title: options.title  })  } }) 
<!--redirect.wxml--> <view style="text-align:center"> {{title}} </view>
//redirect.js Page({  onLoad: function(options) {  this.setData({  title: options.title  })  } })

最後上兩張跳轉後的圖.

1.跳轉到新頁面

2.在原來的頁面開啟

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

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

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

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

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

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援雲棲社區。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.