1. 程式人生 > >微信小程跳轉頁面方法總結

微信小程跳轉頁面方法總結

最近正在做微信小程專案,我會把我遇到問題都進行總結。
微信小程式跳轉頁面方法總結(有什麼錯誤的地方希望大家進行指正)

微信小程提供的api方法

// 保留當前頁面,跳轉到應用的某個頁面,點選返回按鈕時還可以返回原來頁面
wx.navigateTo({
    url: '檔案地址',    地址後面也可以追加引數  'page/index/index?id=123&page=2'
})
// 關閉當前頁面,跳轉到應用內的某個頁面。  點選返回按鈕時不會返回原來頁面
wx.redirectTo({
    url: 'page/index/index?id=123&page=2'
})
// 關閉所有頁面,開啟到應用內的某個頁面。
wx.reLanch({ url: 'page/index/index?id=123&page=2' })
// 跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面
// 注意:必須是在app.json中註冊過的tabBar 頁面
wx.switchTab({
    url: 'page/index/index'
})

元件中navigator

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover"
>跳轉到新頁面</navigator> <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁開啟</navigator> <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator> <navigator target="miniProgram"
open-type="navigate" app-id="" path="" extra-data="" version="release">開啟繫結的小程式</navigator> </view> url: 當前小程式內跳轉連結 open-type: 跳轉方式(上面api提供的四中方法) delta: 當 open-type 為 'navigateBack' 時有效,表示回退的層數 hover-class: 指定點選時的樣式類,當hover-class="none"時,沒有點選態效果

跳轉外部連結

跳轉外部連結的時候需要注意 登入微信小程式
配置request合法域名 才能跳轉過去

合法域名

<web-view src="https://baidu.com/"></web-view>