1.0.8 • Published 1 year ago
vue-bridge-gateway v1.0.8
Vue Bridge Gateway
Vue-Bridge-Gateway is a wrapper of WebviewJavascriptBridge ($bridge
) to make building Mini apps simple and easy.
Install
yarn
yarn add vue-bridge-gateway
npm
npm i vue-bridge-gateway
Register Vue 2
// main.js
import Vue from "vue";
import VueBridgeGateway from "vue-bridge-gateway";
Vue.use(VueBridgeGateway, { debug: true, delay: 200 });
Register Vue 3
// main.js
import Vue from "vue";
import VueBridgeGateway from "vue-bridge-gateway";
const app = createApp(AppLayout);
app.use(VueBridgeGateway, { debug: true, delay: 200 });
After registration, you'll have acess to global methods
$bridge
Configurations (Options)
Key | Type | Default | Description |
---|---|---|---|
debug | Boolean | true | console output call information |
delay | Number | 200 | The processing of registerHandler failure caused by bridge initialization takes time, delay call time, value ms |
It is best to delay the method of calling the front-end registration by native to avoid the problems caused by the native call when the front-end has not been registered.
$bridge
- WebviewJavascriptBridge plugin for Vue.js
- Based on WebViewJavascriptBridge (iOS), JsBridge (android) Development
- Promise Encapsulation,support
then
orasync/await
Methods
registerHandler
- description: Register a handler for listening to native app call. The first parameter a name that will be provided by native app, the second parameter is a callback function (optional).
this.$bridge.registerHandler("myListener", (data, callback) => { console.log("data from native:", data); const responseData = { "Javascript Says": "Right back atcha!" }; console.log("JS responding to native with", responseData); callback(responseData); });
callHandler
- description: Communicate between native app and mini app. The first parameter is the name provided by native app, the second parameter (optional) is the request body.
// tell native app to set bar title to "Home Page" this.$bridge .callHandler("setBarTitle", { title: "Home Page" }) .then(() => { // do something }) .catch(() => { // handle error });
Vue 3 Composition API
For composition API you can access bridge instance by using provide/inject
// CompositionAPI.vue
<script>
import { inject, onMounted } from 'vue'
export default {
setup() {
const $bridge = inject('$bridge')
onMounted(() => {
$bridge.callHandler('setBarTitle', { title: 'Home Page' })
.then(() => { /* do something */ })
.catch(() => { /* handle error */ })
})
},
}
</script>
Links
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0-rc.4
2 years ago
1.0.0-rc.3
2 years ago
1.0.0-rc.2
2 years ago
1.0.0-rc.1
2 years ago
1.0.0-rc
2 years ago
1.0.0
2 years ago