用法:用于頁面跳轉,相當于html里面的<a></a>標簽。
API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html
四種跳轉的方法,在index里面寫下一段代碼進行測試
1:從首頁跳轉到日志頁面(可以返回)
(注意,在沒有設置底部導航的情況下,沒有tab也可使用這個屬性,有tab頁則需更換switchTab屬性)
<view>
<navigator url="/pages/logs/logs" hover-class="changestyle">頁面跳轉,可以返回</navigator>
</view>
2:從首頁跳轉到日志頁面(不可以返回)
(注意,在沒有設置底部導航的情況下,沒有tab也可使用這個屬性,有tab頁則需更換switchTab屬性)
<view>
<navigator url="/pages/logs/logs" hover-class="changestyle" redirect>頁面跳轉,無法返回</navigator>
</view>
3:在當前頁面打開
新建一個文件夾,命名為no,完善里面的wxml測試信息,為了方便測試隨意填充內容
<view class="btn-area">
<navigator url="/pages/test/test" hover-class="navigator-hover">我是一個自由分散的頁面哦</navigator>
</view>
打開全局app.json文件,將剛剛新建文件夾no的路徑寫入
我們現在要測試從首頁的鏈接上打開,點擊鏈接,即可在當前的首頁頁面打開no頁面
4:切換到tab頁:
代碼
<view>
<navigator url="/pages/logs/logs" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
</view>
注意:我這里用的跳轉是switchTab跳轉,而不是navigator
原因:所有的頁面路徑都需配置在pages下面tabBar里一般就是四個主頁面,這些主頁面之間的跳轉就像tab切換,這幾個頁面需要在tabBar里另外配置,普通頁面向這四個主頁面跳轉的時候,不能使用navigator,需用switchTab。
經驗總結:TabBar中的list項的配置pagePath,盡量不要作為其他頁面的跳轉鏈接。
下一章:微信小程序從零開始開發步驟(七)引入外部js 文件
文末福利:
福利一:前端,Java,產品經理,微信小程序,Python等資源合集大放送:http://www.lxweimin.com/p/e8197d4d9880
福利二:微信小程序入門與實戰全套詳細視頻教程
原文作者:祈澈姑娘;原文鏈接:http://www.lxweimin.com/u/05f416aefbe1
創作不易,轉載請告知;90后前端妹子,愛編程,愛運營,愛折騰。
閱讀鏈接:
微信小程序從零開始開發步驟(一)搭建開發環境http://www.lxweimin.com/p/0ff8c3b2f59f
微信小程序從零開始開發步驟(二)創建小程序頁面http://www.lxweimin.com/p/fe0db14e2869
微信小程序從零開始開發步驟(三)底部導航欄http://www.lxweimin.com/p/89a63dc99839
微信小程序從零開始開發步驟(四)自定義分享的功能http://www.lxweimin.com/p/65d9bdb8051d
微信小程序從零開始開發步驟(五)輪播圖http://www.lxweimin.com/p/bc3261557031
微信小程序從零開始開發步驟(六)4種頁面跳轉的方法http://www.lxweimin.com/p/01a5a6a0fdb9
微信小程序從零開始開發步驟(七)引入外部js 文件http://www.lxweimin.com/p/5f2cde64d7f2
微信小程序從零開始開發步驟(八)引入框架WeUI:http://www.lxweimin.com/p/fd423b6e17be