小程式裡面的連結使用navigator元件
在html中使用a標籤, a標籤可以連結到網路中的任何位址
而小程式中navigator只能應用於目前小程式內的連結跳轉
<navigator url="http://www.baidu.com">跳转A</navigator> <navigator url='test/t'>跳转B</navigator>
第一個是無效的
第二個能正確跳轉, 需要注意的是: url中的頁面不能是tabBar(底部選單)中的頁面
#但是可以透過open-type屬性設定
redirect屬性, 開啟新頁面時, 關閉原頁(在新頁, 不能再回到原頁)
<navigator redirect url='test/t'>跳转</navigator>
跳轉時並傳遞參數(不用加上引號 , 自動會加上雙引號, 否則就多餘一個引號, 因此直接寫: id=111&name=張三):
<navigator url='test/t?id=111&name=张三'>跳转</navigator>
透過onLoad事件取得url參數, 在載入這個頁面時自動將參數放入
<navigator url='test/t?id=111&name=张三' hover-class='hoverClass'>跳转</navigator> <!--链接1--> <navigator url='test/t?id=123&name=小明'>跳转</navigator> <!--链接2-->
Page({ data: { }, onLoad : function(datas) { console.log(datas); } })
如果點擊連結1, 則datas的值是{id: "111", name: "張三"}, 點選連結2, 則datas的值是{id: "123", name: "小明"}
hover-class是點上去後的樣式
# wx.navigateTo
此Api也可以完成頁面跳轉, 與navigator(無redirect屬性)相同
<button size='mini' bindtap="navigator">跳转</button>
navigator : function() { wx.navigateTo({ url: 'test/t?id=100&user=xiaoming', success : function(e) { console.log(e.errMsg); } }) }
wx.redirectTo
#此Api也可以完成頁面跳轉, 與navigator(有redirect屬性)相同, 操作與上相同
wx.navigateBack
#此Api用於返回, 從目前頁面返回上級頁(根據如下參數)
Page({ data: { }, back : function() { wx.navigateBack({ delta : 1 // 值为1, 则是返回上一级, 值为2就返回上两级... }) } })
如果dellta的值為1, 則可以不寫dellta屬性: wx.navigateBack({})
如果dellta的值超過了其能傳回的總級數, 則會傳回首頁
#相關文章:
#相關影片:##頁面連結與多媒體-微信小程式項目實戰影片教學以上是如何從小程式外部跳到指定的小程式頁面_小程式頁面取得鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章!