技術標籤：小程式javascript

我開發過程中有小程式跳轉到網頁的需求，下面分享一下我的實現過程：

使用官方文件web-view元件：web-view
1、首先得通過微信公眾平臺配置業務域名，配置業務域名需要將校驗檔案上傳到網站伺服器根目錄下。
步驟一：登入公眾平臺找到開發管理

步驟二：找到業務域名新增，下載校驗檔案，將校驗檔案放到網站伺服器根目錄下。

步驟三：瀏覽器可訪問到網站伺服器根目錄下的校驗檔案，即可儲存業務域名成功。

備註：微信小程式跳轉到第三方網頁需要獲取第三方網站的同意，想要跳轉到別人的網站，得獲取別人的同意，吧把校驗檔案讓別人放到網站伺服器根目錄下，想想別人怎麼可能隨便同意，搞笑。。。

2、在小程式程式碼中加入新頁面並配置路由，新頁面使用web-view承載網頁的容器。會自動鋪滿整個小程式頁面
在app.json配置路由檔案

"pages": [
        ......
        "pages/out/out"  //新增頁面

    ],

out/out下的index.wxml

<web-view src="https://www.baidu.com/"></web-view>
//你沒有看錯,就是這麼一行，把你要跳轉的介面用src就可以了，以後要跳轉到哪，src裡面地址就寫哪！
 

3、在想要跳轉的時候使用路由跳轉方法去跳轉就行。

wx.navigateTo({
  url:'/pages/out/out', //
  success:function() {
  
  },  //成功後的回撥；
  fail:function() { },   //失敗後的回撥；
  complete:function() { }  //結束後的回撥(成功，失敗都會執行)
 })

總結：我遇到的需求是在微信小程式跳轉進入第三方H5支付頁面進行農行支付，直接跳到農行的支付頁面是不可能的，人家怎麼可能同意放校驗檔案在他們伺服器上，所以正在嘗試跳到自己的h5頁面，再在h5頁面使用iframe去內嵌第三方支付頁面，之後再同大家分享。