微信小程序從零開始開發步驟（六）4種頁面跳轉的方法

用法：用於頁面跳轉，至關於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：切換到ta頁：

代碼
<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 文件

 

閱讀連接：
微信小程序從零開始開發步驟（一）搭建開發環境https://www.jianshu.com/p/0ff8c3b2f59f
微信小程序從零開始開發步驟（二）建立小程序頁面https://www.jianshu.com/p/fe0db14e2869
微信小程序從零開始開發步驟（三）底部導航欄https://www.jianshu.com/p/89a63dc99839
微信小程序從零開始開發步驟（四）自定義分享的功能https://www.jianshu.com/p/65d9bdb8051d
微信小程序從零開始開發步驟（五）輪播圖https://www.jianshu.com/p/bc3261557031
微信小程序從零開始開發步驟（六）4種頁面跳轉的方法https://www.jianshu.com/p/01a5a6a0fdb9
微信小程序從零開始開發步驟（七）引入外部js 文件https://www.jianshu.com/p/5f2cde64d7f2
微信小程序從零開始開發步驟（八）引入框架WeUI：https://www.jianshu.com/p/fd423b6e17be