生活随笔
收集整理的這篇文章主要介紹了
[转] 微信小程序 页面跳转 传递参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文轉自：http://blog.csdn.net/qq_31383345/article/details/52795212
微信小程序的頁面跳轉,頁面之間傳遞參數筆記.
CSDN微信小程序開發專欄,歡迎關注!
? 先上demo圖:
??
?
為了簡化邏輯,所以index.wxml里面只寫了兩個text.既然是跳轉,那就還有其他頁面.
目錄如下:
三個頁面,但是代碼很簡單.直接上代碼.
?
[html] view plaincopy print?
<span?style="font-size:24px;"><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就是跳轉到新頁面.都可以攜帶參數.
?
[html] view plaincopy print?
<span?style="font-size:24px;"><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
?
[javascript] view plaincopy print?
Page({??????onLoad:?function(options)?{????????this.setData({??????????title:?options.title????????})??????}????})?? Page({ onLoad: function(options) { this.setData({ title: options.title }) }
})
?
?
[html] view plaincopy print?
<span?style="font-size:24px;"><view?style="text-align:center">?{{title}}?</view></span>?? <span style="font-size:24px;"><!--redirect.wxml-->
<view style="text-align:center"> {{title}} </view></span>
?
[javascript] view plaincopy print?
<span?style="font-size:24px;">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
?
轉載于:https://www.cnblogs.com/freeliver54/p/6473690.html
總結
以上是生活随笔為你收集整理的[转] 微信小程序 页面跳转 传递参数的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
