ebrige

<!-- * @Description: In User Settings Edit * @Author: your name * @Date: 2019-08-16 17:53:05 * @LastEditTime: 2019-08-16 17:53:50 * @LastEditors: Please set LastEditors --> <h1 align="center">Welcome to ebrige 👋</h1> <p> <img src="https://img.shi

Usage no npm install needed!

<script type="module">
  import ebrige from 'https://cdn.skypack.dev/ebrige';
</script>

README

Welcome to ebrige 👋

Documentation

这是一个用于javascript与原生交互的库

🏠 Homepage

Prerequisites

  • IOS >=8.0.0
  • android >=4.4

Install

npm install ebrige --save

Usage

import Ebrige from 'ebrige'

// Promise调用
// 调用原生方法(传递参数)
Ebrige.dispath('getUser',{token:'token'}).then(res=>{
    // res is native return data
})

// 不传递参数
Ebrige.dispath('getUser').then(res=>{
    // res is native return data
})

// 普通回调调用
//  调用原生方法(传递参数)
Ebrige.dispath('getUser',{token:'token'},res=>{
    // res is native return data
})

// 不传递参数
Ebrige.dispath('getUser',res=>{
    // res is native return data
})

// 在vue中使用
Vue.prototype.$ebrige = Ebrige
this.$ebrige.dispatch('getUser',{token:'token'}).then(res=>{
  // res is native return data
})

如何与原生客户端进行沟通?

在使用过程中,原生(ios和android统称为原生)需要监听浏览器的跳转事件,并截取。

url样例(跳转的url)

brige://getUserInfo?callId=getUserInfo1562665696408

  • brige:协议名
  • getUserInfo:方法名
  • callId=getUserInfo1562665696408:原生向H5沟通的凭证
callId

在原生处理完操作后,需要将结果返回给web,这时候想要向web中注入代码来通知web,代码实例为

// 这是在原生进行某些操作(比如获取地理位置)后,操作成功并向前端返回数据,responseData数据格式为JSON
window.$ebrige.callSuccess(callId,responseData)
// 这是在原生进行某些操作(比如获取地理位置)后,操作失败并向前端返回数据,responseData数据格式为JSON
window.$ebrige.callFail(callId,responseData)

未来计划

  • 自定义配置

  • 长连接

  • 单元测试

疑问?

1. 原生不需要向web传递参数,data字段可以不传吗?

可以不传,但凭证是必传的(除味直接将webview关闭)

Run tests

npm run test

Run Demo

npm run demo

Author

👤 惜纸

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!


This README was generated with ❤️ by readme-md-generator