# jsbridge-demo

**Repository Path**: ghostgithub/jsbridge-demo

## Basic Information

- **Project Name**: jsbridge-demo
- **Description**: 采用jsbridge做js与客户端的交互
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-01-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 

#  jsbridge-demo

> 结合jsbridge使用，来实现js和移动端之间的数据通讯
>
> jssdk代码位置：`src/main/assets/www/libs/jsbridge-sdk.js`

### JSSDK

```javascript
import React, { Component } from 'react';
import ReactDom from 'react-dom';

import jssdk from './utils/jsbridge-sdk';


// 添加jssdk的方法
jssdk.addClientMethod(["jsMethod"]);
jssdk.addMethod(["btnClick"])

// 当jssdk准备完毕时再去调用sdk中的方法，只需要初始化一次即可，最放放在最外层完成初始化
// 子组件想使用某个方法时，可以直接使用而不需要在次掉用ready
jssdk.ready(function (sdk) {

    class App extends Component {
        constructor(props) {
            super(props);

            this.handleBtnClick = this.handleBtnClick.bind(this);
			...
        }

        componentDidMount() {
            // 获取Android端响应的数据信息
            if (sdk.jsMethod){
                sdk.jsMethod(function (data, responseCallback){
                   // data为Android传来的数据
                    console.log(data);
                   if (responseCallback){
                       // 给Android端回传数据信息
                       responseCallback("js得到了" + data +",请Android知晓");
                   }
               });
           }
        }

        handleBtnClick(){
            if (sdk.btnClick){
                // 向Android端发送一个数据请求
                sdk.btnClick({'Ok':'成功!!!'}, function (res){
                    // Android端响应回来的数据信息
                    console.log('Android端响应------->' + res);
                });
            }
        }

        render() {
            let { books } = this.state;
            return (
                <div>
                    ...      
                    <button className="btn" onClick={this.handleBtnClick}>点击</button>
                    ...
                </div>
            )
        }
    }

    ReactDom.render(<App />, document.getElementById('app'));
});
```





### Android

```java
 // 设置文件地址
 url = "file:///android_asset/www/index.html";

 // 加载页面
 mWebView.loadUrl(url);

 /**
  * 监听JS发过来的请求
  */
 mWebView.registerHandler("btnClick", new BridgeHandler() {
     @Override
     public void handler(String data, CallBackFunction function) {
         // 获取手机型号
         Toast.makeText(mContext, data + " | 手机型号：" + android.os.Build.BRAND, Toast.LENGTH_LONG).show();
         Log.e("webviewPlugin", data);
         // 响应给JS的数据信息
         function.onCallBack("webviewPlugin");
     }
 });

 /**
  * 向JS发送请求
  */
 mWebView.callHandler("jsMethod", "info from Android", new CallBackFunction() {
     @Override
     public void onCallBack(String data) { // data是 JS端回传回来的数据信息
         Toast.makeText(mContext, data, Toast.LENGTH_LONG).show();
     }
 });
```