WebViewJsBridge-iOS 和 WebViewJsBridge-Android 是我新寫的 Js-Bridge 橋接庫，簡(jiǎn)單易用，功能更完整，供大家參考。

Github 項(xiàng)目地址

就目前來看，基于 H5 的客戶端混合開發(fā)還是主流方案，如果 H5 頁面間的跳轉(zhuǎn)可以像原生頁面間的跳轉(zhuǎn)一樣，那么體驗(yàn)會(huì)好很多，招商銀行的手機(jī)銀行和掌上生活客戶端，大部分頁面都是 H5，而他們就采用這種結(jié)合原生導(dǎo)航的方式做的跳轉(zhuǎn)，體驗(yàn)相比其他手機(jī)銀行客戶端要好很多，省去了處理 H5 返回刷新頁面的問題。

js-native-navigation 的實(shí)現(xiàn)是基于 js 和 native 之間的交互，使用的是工具庫是 js-native-bridge。

運(yùn)行 demo：
使用終端 cd 到 vue demo 根目錄，運(yùn)行命令 npm run serve，運(yùn)行成功后可看到訪問地址，如：http:192.168.1.122:8080，iOS 和 Android demo 中的 WebView 加載該地址，便可看到 demo 效果。

demo.gif, Android demo 效果相近

以下介紹 js 中如何使用原生導(dǎo)航，iOS 和 Android 原生客戶端的實(shí)現(xiàn)參考客戶端 demo 代碼。

導(dǎo)航

基本導(dǎo)航方法

跳轉(zhuǎn)到下一頁

// Home.vue 
this.$nativeNavigator.push('/about', 'path',{'foo': 'bar'})

第一個(gè)參數(shù)是跳轉(zhuǎn)的路徑，第二個(gè)參數(shù)是路徑的類型，第三個(gè)參數(shù)就是傳遞到下一頁的值。

接收前一頁傳來的值

// About.vue
this.$nativeNavigator.getRouteContext(param => {
  this.content = JSON.stringify(param)
})

上一頁傳遞過來的值，會(huì)被保存在原生頁面對(duì)象中，需要時(shí)直接獲取。

返回上一頁

// About.vue
this.$nativeNavigator.goBack({'baz': '哈'})

接收返回頁回傳的值

this.$nativeNavigator.receiveGoBack(param => {
  this.backInfo = JSON.stringify(param)
})

返回根頁面

this.$nativeNavigator.goBackRoot()

跳轉(zhuǎn)類型

this.$nativeNavigator 的跳轉(zhuǎn)方法支持三種，第一種是 H5 頁間的跳轉(zhuǎn)，第二種是打開外部鏈接，第三種是打開原生頁。

打開外部鏈接：

this.$nativeNavigator.push('https://cn.bing.com', 'url')

打開原生頁面：

this.$nativeNavigator.push('detail', 'native')

第一個(gè)參數(shù) detail 是原生頁的路由名，要導(dǎo)航的原生頁面需要在原生代碼中注冊(cè)路由。

設(shè)置導(dǎo)航條

使用原生的導(dǎo)航條，體驗(yàn)要比 H5 的更好，但是需要提供給 H5 一些設(shè)置導(dǎo)航條的方法，如設(shè)置標(biāo)題和左右兩邊的按鈕。
以下只是提供部分參考案例，項(xiàng)目中要根據(jù)實(shí)際情況做定制。

設(shè)置標(biāo)題

this.$nativeNavigator.setBarTitle('首頁')

設(shè)置導(dǎo)航條右邊一個(gè)按鈕

var itemInfo = {
    'image': 'https://static.pptstore.net/icons/00/17/c2c0ea0e090a7d715514_s.png',
    'title': '簽到'
}
this.$nativeNavigator.setBarRightButton(itemInfo, function () {
    console.log('點(diǎn)擊了簽到')
})

設(shè)置導(dǎo)航條右邊兩個(gè)按鈕

var itemInfo1 = {
    'image': '',
    'title': '簽到'
}
var itemInfo2 = {
    'image': 'https://static.pptstore.net/icons/00/38/d12e521f14ac86e8bee9_s.png',
    'title': '問題'
}
this.$nativeNavigator.setBarDoubleRightButton(itemInfo1, function () {
    console.log('點(diǎn)了簽到')
}, itemInfo2, function () {
    console.log('點(diǎn)了問題')
})

設(shè)置導(dǎo)航條左邊一個(gè)按鈕

  var itemInfo = {
    'image': '',
    'title': '返回'
  }
  this.$nativeNavigator.setBarLeftButton(itemInfo, function () {
    console.log('點(diǎn)擊了返回')
  })

設(shè)置導(dǎo)航條左邊兩個(gè)按鈕

  var itemInfo1 = {
    'image': 'https://static.pptstore.net/icons/00/17/c2c0ea0e090a7d715514_s.png',
    'title': '返回'
  }
  var itemInfo2 = {
    'image': 'https://static.pptstore.net/icons/00/38/d12e521f14ac86e8bee9_s.png',
    'title': '進(jìn)度'
  }
  this.$nativeNavigator.setBarDoubleLeftButton(itemInfo1, function () {
    console.log('點(diǎn)了返回')
  }, itemInfo2, function () {
    console.log('點(diǎn)了進(jìn)度')
  })

最后

希望大家多提意見，幫助完善項(xiàng)目。