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 or async/await

Methods

1. 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);
   });

2. 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

Mini app boilerplate

Release Notes