小程序如何寫跳轉網頁

① taro 微信小程序：五種跳轉方式

微信小程序用wx. xxx trao用taro.xxx

1.switchTab：只能跳轉到tabBar配置頁面（寫在app.json里tabbar的路徑url)

2.重定向：關閉當前頁面，跳轉到應用內的某個頁面（不能是app.json里tabbar的路徑）

3.保留當前頁面，跳轉到應用內的某個頁面（不能是app.json里tabbar的路徑），一般用於頁面之間的跳轉

4.關閉所有頁面，打開到應用內的某個頁面，一般用於注冊頁面，切換賬號

5.返回上一級頁面（delta：返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁，默認值為1）

② 微信小程序頁面常用的5種跳轉方法

為了不讓用戶在使用小程序時造成困擾，微信小程序規定頁面路徑只能是 五層 ，所以需盡量避免多層級的交互方式。 而頁面跳轉則涉及到多個頁面層級。

保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。

需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；

如 'path?key=value&key2=value2'

eg:

wx.navigateTo({

    url:'test?id=1'

})

這種跳轉方式默認有返回按鈕，返回到上一個頁面

關閉當前頁面，跳轉到應用內的某個頁面。

需要跳轉的應用內非 tabBar 的頁面的路徑，路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；

如 'path?key=value&key2=value2'

eg:

wx.redirectTo({

    url:'test?id=1'

})

這種跳轉方式默認有返回按鈕，返回到上一個頁面的再上一層

需要跳轉的應用內頁面路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；

如 'path?key=value&key2=value2'，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數

eg:

wx.reLaunch({

    url:'test?id=1'

})

這種跳轉方式默認沒有返回按鈕，不需要默認返回按鈕的頁面就可以使用這個api了

需要跳轉的 tabBar 頁面的路徑（需在 app.json 的  tabBar  欄位定義的頁面），路徑後不能帶參數

{

    "tabBar": {

        "list": [{

            "pagePath":"index",

            "text":"首頁"

        },{

            "pagePath":"other",

            "text":"其他"

        }]

    }

}

wx.switchTab({

url:'/index'

})

我們需要調轉到tabbar定義的頁面的時候，就需要這個api了。踩過這個坑的人就知道，除了這個api，其他的都不能跳轉到tabar定義過的頁面

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。

③ 小程序與H5如何互相跳轉

需要用到小程序的web-view， 官方文檔鏈接

web-view是承載網頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。寫法如下：

註：當在微信開發中瞎褲工具里返回「{"base_resp":{"ret":-1}}」時，需要點左上角「設置」--「項目設置」--勾選「不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書」

因為外部h5無法跳轉到小程序，因此需要把h5內嵌到小程序的web-view中。
一：首頁小程序內嵌h5網頁,內嵌這一步就相當於上面的小程序跳轉h5：

二：然後在內嵌的網頁里引入js，調用wx.miniProgram.navigateTo跳轉小程序方法，可在url後拼接要傳的參數：

三：小程序接受參數的頁面：
index.wxml:

index.js

這樣就從h5跳到小程序指定的頁面並且可以拿到我們想要傳的參數

原文作者技術博客： https://www.jianshu.com/u/ac4daaeecdfe
95後前端妹子一枚，愛閱讀，愛交友，將工作中遇到磨盯簡的問題記錄在這里，希望給每一個看到的你能帶來一則旅點幫助。
歡迎留言交流

④ 如何使用微信小程序中的按鈕事件實現界面跳轉

創建一個你想要跳握畝並轉的頁面文件index.wxml

在跳轉前的頁面中加入按鈕組件並綁定跳轉事件

在跳轉前頁面對應的js文件中添加綁定事件

這個時候點擊按鈕控制台會報錯路徑找不到

在微信小段跡程序配置文件中配置新加的頁面

這個時候就自動生成了耐搜新增頁面的各種文件

頁面也可以跳轉了

第一次研究小程序，也第一次寫博客，有錯誤歡迎大家指正！

⑤ 微信小程序開發系列 (四) ：微信小程序的頁面跳轉路由設計

筆者由於工作需要，曾經參加過一個微信小程序同 SAP 系統集成的項目，因此從零開始學習了微信小程序的開發知識。這里通過系列文章把自己所學分享出來，希望對相關學習者有所幫助。

本教程前面三篇文章：

通過本系列前面三篇文章的介紹，大家對微信小程序的視圖和控制器，微信調試器的用法，以及如何消費微信平台提供的 Public API，已經有了一個最基本的認識了。在這個基礎上，本文讓我們進一步學習微信小程序的頁面跳轉路由設計。

這個系列教程的前六篇文章我們都在單個的視圖上操作。現在讓我們創建第二個視圖，然後實現從第一個視圖到第二個視圖的跳轉。
首先開發第二個視圖：

做過 Angular 開發的朋友們對上面的視圖設計一定不會陌生。這個視圖的數據源由模型 logs 提供，是一個列表結果，列表每個元素的數據源是模型 logs 里的一條記錄，用 log 代表。

為了讓 log 看起來顯示更整齊，在 log 內容之前，顯示每條 log 的索引。因為 log 的索引從 0 開始，所以用 {{index + 1}} 在索引前加一，這樣顯示的索引更符合普通人的閱讀習慣。

這個視圖的控制器：

控制器 logs.js 的實現：

在控制器里調用 Page 構造函數，給當前控制器指定名為 logs 的數據模型。
這個數據模型的值填充，通過微信框架提供的 API wx.getStorageSync 來獲取。

wx.getStorageSync 的含義在微信小程序 官網 上有定義：從本地緩存中同步獲取指定 key 對應的內容。

第二個視圖的 UI 和控制器都開發完畢，剩下的事情就是在第一個視圖里定義一個觸發點，讓它能觸發到第二個視圖的跳轉。
我在第一個視圖上通過屬性 bindtap 綁定了一個點擊函數 bindViewTap :

bindViewTap 在第一個控制器 index.js 里的實現：

跳轉還是通過微信小程序提供的 API wx.navigateTo :

保留當前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack 可以返回到原頁面。

學習了微信小程序頁面路由跳轉之後，我們來進行一個實際的需求開發。

效果：我在手機上打開微信小程序，自動顯示出我當前所在的地理位置：

具體步驟：

ReservationService.getGeocode 的實現：

看下面一個使用高德地圖 API 將經緯度轉換成文字描述的地址的例子，使用 postman 發送請求：

API 響應：

假設我用 vue 開發了一個 web 應用,需要在手機微信里訪問並調試, 可以按照本文介紹的步驟,使用微信開發者工具來調試。

假設我的 web 應用的訪問入口是如下公眾號菜單的"預約"按鈕:

那麼為了能夠在微信開發者工具里調試,需要首先進入該公眾號的後台,在 web 開發者工具里,將開發者本人的微信號添加進去:

點擊"綁定開發者賬號":

輸入待綁定的微信賬號:

點擊綁定,該微信號會收到一條消息,詢問是否綁定:

點擊同意操作完成綁定。

接下來, 把要調試的 web 應用的 url 放到微信開發者工具地址欄里，回車之後，微信開發者工具就會彈出一個詢問窗口，點擊 Allow 之後，就可以在微信開發者工具提供的類似 Chrome 開發者工具調試器一樣的界面里進行單步調試了。

這個粘貼到地址欄的 url 很有講究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

其中 appid= 後面的值，是從微信公眾號控制台里拷貝出來的 appid ：

redirect_uri, 即為我們開發的 web 應用，部署到伺服器之後生成的 url，需要經過 url encode 處理：

https://www.xxx.com/smart
這個 url 准備好之後，將其粘貼到微信開發者工具地址欄里，回車，即可看到一個對話窗口，要求獲得我們公開信息的許可：

點擊 Allow 之後，就可以像使用 Chrome 開發者工具的調試器一樣，在微信開發者工具里進行單步調試了：

本文首先介紹了微信小程序多頁面內的路由跳轉設計，接著通過獲得手機當前經緯度並轉換成地址的需求實現，進一步深入了解了微信小程序如何消費微信平台提供 Public API 的方法。

本教程前面三篇文章：

⑥ 微信小程序頁面跳轉的方法有哪些

微信小程序路由跳轉，共有三種形式，頁面中使用navigator組件做頁面鏈接形式路由跳轉，js中可以使用wx.navigateTo--保留當前頁面，跳轉到應用內的某個頁面，wx.redirectTo--關閉當前頁面，跳轉到應用內的某個頁面wx.navigateBack()--關閉當前頁面，回退前一頁面。