Skip to content
This repository has been archived by the owner on Jul 26, 2021. It is now read-only.

Kntt/vue-js-bridge

Repository files navigation

vue-webview-js-bridge

GitHub GitHub package.json version

  • WebviewJavascriptBridge plugin for Vue.js
  • 基于WebViewJavascriptBridge(ios), JsBridge(android)开发
  • Promise封装,支持then或者async/await等方式

安装

yarn:

yarn add vue-webview-js-bridge

npm:

npm i vue-webview-js-bridge
// 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 支持

License

MIT