npm package: @node-transfer/jsbridge
Author: iriszhr
Latest version: 1.0.7

# @node-transfer/jsbridge


H5和客户端之间使用到的桥接封装

- 该项目为nt项目的jsbridge方案中的js sdk部分
- 通过该项目，统一了H5与Native客户端间的交互，抹平了两端的差异；

## 使用

##### npm包引用
```bash
# 通过 npm 安装
npm i @node-transfer/jsbridge -S

# 通过 yarn 安装
yarn add @node-transfer/jsbridge -S
```

```js
import { bridgeName } from "@node-transfer/jsbridge";
```

##### script标签引入
```javascript
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@node-transfer/jsbridge/dist/ntbridge.js"></script>

const ntBridge = window.ntChainBridge;
ntBridge.openWebview("https://www.baidu.com")
```

## 详细文档
h5 调用 native 已经注册的方法：

#### isNTApp、isIOSNTApp、isAndroidNTApp
- 判断H5是否在app中运行，值为true或false

```javascript
import {
  isNTApp,
  isIOSNTApp,
  isAndroidNTApp
} from "@node-transfer/jsbridge";

isNTApp // 是否在app中运行
isIOSNTApp // 是否在app ios版中运行
isAndroidNTApp // 是否在app Android版中运行
```

#### getAppData
- 获取APP及设备信息 

##### 返回值：
key | 类型 |说明 |
:-|:-|:-
appVersion | String | APP版本 |
brand | String | 品牌 |
sysVersion | String | 系统版本 |
deviceId | String | 设备id |

##### 使用方式：
```javascript
import { getAppData } from "@node-transfer/jsbridge";

// 方式一：
getAppData(({ success, data, error, callbackKey }) => {
	console.log("getAppData-callback:", { success, data, error, callbackKey });
});
// 方式二：
getAppData().then(({ success, data, error, callbackKey }) => {
	console.log("getAppData-then:", { success, data, error, callbackKey });
});
// 方式三：
const { success, error, data, callbackKey } = await getAppData();
```

#### getBaseUsetData
- 获取基础用户信息

##### 返回值：
key | 类型 |说明 |
:-|:-|:-
mobile | String | 手机号码 |
nodeType | String | 节点类型：0 临时节点，2标准节点，3主节点 |
thirdToken | String | 用户token |

##### 使用方式：
```javascript
import { getBaseUsetData } from "@node-transfer/jsbridge";

getBaseUsetData(({ success, data, error, callbackKey }) => {
    console.log("getBaseUsetData-callback:", { success, data, error, callbackKey });
});
```

#### gotoNative
- 打开Native原生页面

##### 参数
key | 类型 |说明 | 
:-|:-|:-
path | String | 原生path |

##### 原生Path
path | 参数 |说明 | 
:-|:-|:-
home_personal | N/A | 个人主页 |

##### 使用方式：
```javascript
import { gotoNative } from "@node-transfer/jsbridge";

// 方式一：
gotoNative({
	path: "/path",
	callback: ({ success, data, error, callbackKey }) => {
		console.log("gotoNative-callback1:", { success, data, error, callbackKey });
	}
});
// 方式二：
gotoNative("/path", ({ success, data, error, callbackKey }) => {
	console.log("gotoNative-callback2:", { success, data, error, callbackKey });
});
// 方式三：
gotoNative("/path").then(({ success, data, error, callbackKey }) => {
	console.log("gotoNative-then:", { success, data, error, callbackKey });
});
// 方式四：
const { success, error, data, callbackKey } = await gotoNative("/path");
console.log("gotoNative-async/await:", { success, data, error, callbackKey });
```

#### openWebview
- 打开一个新的Webview

##### 参数
key | 类型 |说明 | 
:-|:-|:-
url | String | 打开webview的url地址 |

##### 使用方式：
```javascript
import { openWebview } from "@node-transfer/jsbridge";

// 方式一：
openWebview({
	url: "https://www.baidu.com",
	callback: ({ success, data, error, callbackKey }) => {
		console.log("openWebview-callback1:", { success, data, error, callbackKey });
	}
});
// 方式二：
openWebview(
	"https://www.baidu.com",
    ({ success, data, error, callbackKey }) => {
		console.log("openWebview-callback2:", { success, data, error, callbackKey });
    }
);
// 方式三：
openWebview("https://www.baidu.com").then(
	({ success, data, error, callbackKey }) => {
		console.log("openWebview-then:", { success, data, error, callbackKey });
    }
);
// 方式四：
const { success, error, data, callbackKey } = await openWebview("https://www.baidu.com");
console.log("openWebview-async/await:", { success, data, error, callbackKey });
```

#### setPage
- 设置页面属性

##### 参数
key | 类型 | 说明 |
:-|:-|:-
title | String | 标题 |
isPullRefresh | Boolean | 是否下拉刷新
bgColor | String | header背景颜色：#999999
color | String | header文字颜色：#333333
hasHead | Boolean | 是否显示header
menus | Array | 自定义右上角相关图标
menus[text] | String | 右上角图标文字
menus[color] | String | 右上角图标文字颜色：#999999
menus[icon] | String  | 右上角图sha标图片地址
menus[key] | String | 右上角图标图片索引

> 自定义右上角图标【menus】
1. PS：只支持以纯文字或纯图片的方式自定义右上角图标；权重 text > icon
2. icon传递图片参数时，图片文件名建议以name@2x形式命名（带上@2x）
3. menus暂时只支持单个图标

##### 使用方式：
```javascript
// 设置标题、背景颜色等属性
setPage({
    color: "#62abba",
    bgColor: "#f28d61"，
    isPullRefresh: true
});
// 触发setPage，不显示header
setPage({
    hasHead: false
});
// 设置右上角图标-纯文字
setPage(
    {
        title: "Bridge setPage",
        menus: {
            key: "deleteAddress",
            text: "删除地址",
            color: "#666666"
        }
    },
    function(e) {
        console.log("setPage callback e:", e);
    }
);
// 设置右上角图标-图片
setPage(
    {
        bgColor: "#f28d61",
        menus: [{
            key: "wechatShare",
            icon: "https://gos-prod.oss-cn-hangzhou.aliyuncs.com/nt_mall_h5/icons/share1@2x.png"
        }]
    },
    function(e) {
        console.log("setPage6 callback e:", e);
    }
});
```

#### appLogin
- 登录

##### 参数
key | 类型 | 说明 |
:-|:-|:-
callbackUrl | String | 登录成功后跳转地址 |

##### 使用方式：
```javascript
import { appLogin } from "@node-transfer/jsbridge";

appLogin(window.location.href);
appLogin();
```

#### activeWebview
- 从后台切回app触发。无其他参数，在事件触发时，会执行回调函数

##### 使用方式：
```javascript
import { activeWebview } from "@node-transfer/jsbridge";

activeWebview(() => {
	console.log("激活");
});
```

#### closeWebview
- 关闭自身webview

```javascript
import { closeWebview } from "@node-transfer/jsbridge";

closeWebview();
```
#### fullScreen
- 界面全屏

```javascript
import { fullScreen } from "@node-transfer/jsbridge";

fullScreen();
```


## 开源协议

本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议。