vue-webview-js-bridge
- WebviewJavascriptBridge plugin for Vue.js
- 基于WebViewJavascriptBridge(ios), JsBridge(android)开发
- Promise封装，支持
then或者async/await等方式
安装
yarn:
yarn add vue-webview-js-bridgenpm:
npm i vue-webview-js-bridgeExample
// main.js
import Vue from 'vue'
import VueJsBridge from 'vue-webview-js-bridge'
Vue.use(VueJsBridge, {
debug: true,
nativeHandlerName: 'testObjcCallback',
mock: true,
mockHandler (payload, next) {
// mock by payload
// call next(data) to mock data
}
// ...
})
// component.vue
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
code: ''
}
},
mounted () {
this.$bridge.registerHandler('testJavascriptHandler', (data, callback) => {
this.code = data
console.log('data from native:', data)
const responseData = { 'Javascript Says':'Right back atcha!' }
console.log('JS responding with', responseData)
callback(responseData)
})
},
methods: {
async callNative () {
try {
let res = await this.$bridge.callHandler({
type: 'optionType',
data: {
name: 'optionData'
}
})
this.code = res
} catch (error) {
console.log('error', error)
}
}
}
}TypeScript 支持
main.ts
// ...
import VueJsBridge, { pluginOption } from 'vue-webview-js-bridge'
interface Payload<T = any> {
type: string
data?: T
}
interface Response<T = any> {
code: number
data?: T
}
const option:pluginOption<Payload, Response> = {
debug: true,
nativeHandlerName: 'testObjcCallback',
mock: false,
mockHandler (payload, next) {
next(Object.assign({ code: 200 }, {
data: 'code from native'
}))
}
}
Vue.use(VueJsBridge, option)
// ...component.vue
import { Vue, Component, Prop } from 'vue-property-decorator'
interface Payload<T = any> {
type: string
data?: T
}
interface Response<T = any> {
code: number
data?: T
}
@Component
export default class HelloWorld extends Vue {
@Prop({ default: '' }) private msg!: string
code: string = ''
mounted () {
this.$bridge.registerHandler<string, object>('testJavascriptHandler', (data, callback) => {
this.code = data
console.log('data from native:', data)
const responseData:object = { 'Javascript Says': 'Right back atcha!' }
console.log('JS responding with', responseData)
callback(responseData)
})
}
private async callNative () {
try {
let res = await this.$bridge.callHandler<Payload<object>, Response<string>>({
type: 'optionType',
data: {
name: 'optionData'
}
})
this.code = res.data
} catch (error) {
console.log('error', error)
}
}
}配置参数(Options)
debug
- type: boolean
- default:
true - description: 输出调用信息
delay
- type: number
- default:
200 - description: 由于birdge初始化需要时间导致的registerHandler失败的处理，延时调用时间，单位
ms
native调用前端注册的方法最好也要延时处理，避免前端还未注册时候native调用导致的问题
nativeHandlerName
- type: string, 必填项
- default:
'nativeHandler' - description: 和原生开发人员协商的nativeHandlerName
mock
- type: boolean
- default:
true - description: 开发阶段是否开启mock服务，需要配合mockHandler使用，两者都设置的情况下mock生效
mockHandler
- type: Function
- default:
null - description: 开发阶段mockHandler服务，需要配合mock使用，两者都设置的情况下mock生效. 是一个函数，第一个参数接收payload, 第二个参数接受bridge回调函数
mockHandler (payload, next) {
// mock by payload
// switch(payload) {
// case 1:
// next(mockData)
// break
// ...
// }
// call next(data) to mock data
}提供的方法(Methods)
registerHandler
- description：注册一个bridge提供给原生开发者调用，第一个参数name(和原生开发者协商好的bridgeName)，第二个参数callback函数，
- callback: callback函数接收两个参数，第一个参数是native传来的数据data，第二个参数是原生传来的responseCallback，当需要时通知native我们的状态
this.$bridge.registerHandler('testJavascriptHandler', (data, callback) => {
this.code = data
console.log('data from native:', data)
const responseData = { 'Javascript Says':'Right back atcha!' }
console.log('JS responding with', responseData)
callback(responseData)
})callHandler
- description: 接受一个参数payload（和原生开发人员协商格式）例如：
this.$bridge.callHandler({
type: 'optionType', // 标识调用native的功能
data: { // 传到native的数据
name: 'optionData'
}
})Todo
- 增加单元测试
- 增加 TypeScript types 支持