【小程序】頁面跳轉

時間 2019-11-10

標籤小程序頁面简体版

原文原文鏈接

頁面跳轉

小程序頁面間跳轉

`wx.navigateTo(Object object)`

保留當前頁面，跳轉到應用內的某個頁面。可是不能跳到 tabbar 頁面。使用 wx.navigateBack 能夠返回到原頁面。javascript

屬性	類型	必填	說明
url	string	是	須要跳轉的應用內非 tabBar 的頁面的路徑, 路徑後能夠帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不一樣參數用 & 分隔；如 'path?key=value&key2=value2'
success	function	否	接口調用成功的回調函數
fail	function	否	接口調用失敗的回調函數
complete	function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

wx.navigateTo({
  url: 'test?id=1' })

// test/test.js Page({ onLoad(option) { console.log(option.query) } })

`wx.switchTab(Object object)`

跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面html

屬性	類型	必填	說明
url	string	是	須要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑後不能帶參數。
success	function	否	接口調用成功的回調函數
fail	function	否	接口調用失敗的回調函數
complete	function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

{
  "tabBar": { "list": [ { "pagePath": "index", "text": "首頁" }, { "pagePath": "other", "text": "其餘" } ] } }

wx.switchTab({
  url: '/index' })

小程序跳轉H5

小程序有一個web-view的組件，是一個能夠用來承載網頁的容器，會自動鋪滿整個小程序頁面。前端

home.wxml:
<view class="container"> <navigator url="/pages/wxpage/wxpage">點擊跳轉到H5頁面</navigator> </view> wxpage.wxml： <web-view src="https://www.tairanmall.com"></web-view>

在小程序home.wxml頁面中，咱們要跳到H5的https://www.tairanmall.com頁面，在home.wxml，咱們跳到一個專門用來跳轉網頁的容器頁面wxpage.wxml。在這個頁面中，有一個web-view組件，會自動鋪滿整個小程序頁面。須要注意的是，src指向的連接，須要登陸小程序管理後臺配置業務域名。java

H5跳轉小程序

H5跳轉到小程序的方法，有兩種：web

點擊手機的返回鍵，讓它自動根據層級返回
使用JSSDK 1.3.2提供的接口返回小程序接口，須要在H5頁面引入相應的js文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>H5跳轉小程序</title> </head> <body> <h1 id="el">H5跳轉小程序，請在小程序中打開</h1> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> document.getElementById('el').addEventListener('click', function() { // 若是在微信小程序內,跳轉到小程序的頁面 if (window.__wxjs_environment === 'miniprogram') { // 跳轉到小程序的頁面，並傳遞了一個type=test的參數 wx.miniProgram.navigateTo({url: '/pages/home/home?type=test' }) } else { alert('不在小程序頁面中') } }) </script> </body> </html>