ハイブリッド開発:ブラウザの代わりにオリジナルナビゲーションWebページjs-native-navigation

3785 ワード

WebViewJsBridge-iOSとWebViewJsBridge-Androidは私が新しく書いたJs-Bridgeブリッジライブラリで、簡単で使いやすく、機能がもっと完全で、皆さんの参考に供します.
Githubプロジェクトアドレス
現在のところ、H 5ベースのクライアントの混合開発は主流の方案であり、H 5ページ間のジャンプが原生ページ間のジャンプのようになれば、体験は多くなり、招商銀行の携帯電話銀行と携帯生活クライアント、大部分のページはH 5であり、彼らはこのような原生ナビゲーションを組み合わせた方法でジャンプしている.体験は他の携帯電話銀行のクライアントよりずっとよく、H 5を処理してページをリフレッシュする問題を省くことができます.
js-native-navigationの実装はjsとnative間のインタラクションに基づいており、ツールライブラリがjs-native-bridgeであることを使用している.
実行demo:端末cdをvue demoルートディレクトリに使用し、コマンドnpm run serveを実行します.実行に成功すると、アクセスアドレスが表示されます.たとえば、http:192.168.1.122:8080、iOS、Android demoのWebViewがロードされると、demo効果が表示されます.
demo.gif、Android demo効果が近い
以下では、jsでオリジナルナビゲーション、iOSおよびAndroidオリジナルクライアントの実装リファレンスクライアントdemoコードの使用方法について説明します.
ツールバーの
基本ナビゲーション方法
次のページに移動

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

1番目のパラメータはジャンプのパスで、2番目のパラメータはパスのタイプで、3番目のパラメータは次のページに渡される値です.
前のページから送信された値を受信

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

前のページから渡された値は、オリジナルのページオブジェクトに保存され、必要に応じて直接取得されます.
前のページに戻る

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

リターン・ページの再送を受信する値

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

ルートページに戻る

this.$nativeNavigator.goBackRoot()

ジャンプタイプthis.$nativeNavigatorのジャンプ方法は3種類をサポートし、1つ目はH 5ページ間のジャンプであり、2つ目は外部リンクを開き、3つ目は原生ページを開く.
外部リンクを開く:

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

オリジナルページを開きます.

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

最初のパラメータdetailは、オリジナルページのルーティング名であり、ナビゲーションするオリジナルページは、オリジナルコードにルーティングを登録する必要がある.
ナビゲーションバーの設定
オリジナルのナビゲーションバーを使用すると、H 5よりも体験がよくなりますが、タイトルや左右のボタンを設定するなど、H 5にナビゲーションバーを設定する方法を提供する必要があります.以下は一部の参考例を提供するだけで、プロジェクトでは実際の状況に応じてカスタマイズします.
タイトルの設定

this.$nativeNavigator.setBarTitle('  ')

ナビゲーションバーの右にあるボタンの設定

var itemInfo = {
    'image': 'https://static.pptstore.net/icons/00/17/c2c0ea0e090a7d715514_s.png',
    'title': '  '
}
this.$nativeNavigator.setBarRightButton(itemInfo, function () {
    console.log('     ')
})

ナビゲーションバーの右にある2つのボタンを設定します

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('    ')
}, itemInfo2, function () {
    console.log('    ')
})

ナビゲーションバーの左にあるボタンを設定します

  var itemInfo = {
    'image': '',
    'title': '  '
  }
  this.$nativeNavigator.setBarLeftButton(itemInfo, function () {
    console.log('     ')
  })

ナビゲーションバーの左にある2つのボタンを設定します

  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': '  '
  }
  this.$nativeNavigator.setBarDoubleLeftButton(itemInfo1, function () {
    console.log('    ')
  }, itemInfo2, function () {
    console.log('    ')
  })

最後に
みんながもっと意見を出して、プロジェクトの改善を助けてほしい.

Apacheパラメータおよび最適化

docker環境インストールベース