# finchat-jsbridge-sdk

> FinChat JSBridge SDK for embedded H5

Latest version **1.0.1** (published 2018-11-06) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install finchat-jsbridge-sdk
pnpm add finchat-jsbridge-sdk
yarn add finchat-jsbridge-sdk
bun add finchat-jsbridge-sdk
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-11-06 |
| First published | 2018-10-09 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | finochat.org |
| Maintainers | panjunlin |
| Keywords | finochat-org |

## Links

- npm: https://www.npmjs.com/package/finchat-jsbridge-sdk
- Repository: https://git.finogeeks.club/front-end/finchat-jsbridge-sdk
- npm.io page: https://npm.io/package/finchat-jsbridge-sdk

## Recent versions

- 1.0.1 (latest) — 2018-11-06
- 1.0.0 — 2018-11-06
- 0.1.5 — 2018-10-09
- 0.1.2 — 2018-10-09
- 0.1.1 — 2018-10-09

## README

# FinChat JSBridge SDK for embedded H5

## 概述
FinChat JSBridge SDK是FinChatSDK平台面向网页开发者提供的基于FinChat内的网页开发工具包。

通过使用FinChat JSBridge SDK，网页开发者可调用获取用户session、打开聊天房间、打开会话列表和转发消息到房间等FinChat特有能力，还提供了预览图片和打开WebView等原生能力，另外还支持自定义接口，为FinChatSDK用户提供更优质的网页开发体验。

此文档面向网页开发者介绍FinChat JSBridge SDK如何使用及相关注意事项

## SDK使用步骤

### 步骤一：安装FinChat JSBridge SDK
推荐：
```
## npm
npm install finchat-jsbridge-sdk --save

## yarn
yarn add finchat-jsbridge-sdk
```

Legacy(只提供0.7.0版本):
```
// 在需要调用JS接口的页面引入如下JS文件，支持使用 AMD/CMD 标准模块加载方法加载
<script src="https://app.finogeeks.com/open/js/finochat-jssdk-0.7.0.js"></script>
```

### 步骤二：引入SDK并创建实例对象
ES6模块化引入，通过sdk.createClient接口创建一个实例对象，所有接口均在实例上调用
```
import sdk from 'finchat-jsbridge-sdk'

const fc = sdk.createClient('appkey') // appkey：暂未校验，任何非空字符串即可
```

Legacy标签引入，引入后会注入全局finochat对象，通过finochat.createClient接口创建一个实例对象，所有接口均在实例上调用
```
var fc = finochat.createClient('appkey');
```

## 生命周期钩子
### 初始化ready钩子
finochat实例初始化结束后会执行ready方法，所有接口调用都必须在实例初始化之后，实例初始化是异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中

```
fc.ready(function(){

});
```

## 自定义接口
### 调用客户端接口
为了提高sdk的扩展性，允许调用自定义接口，需要客户端在SDK的WebView组件中注入自定义方法，H5端可以通过fc.callHandler接口直接调用对应的方法

```
fc.callHandler(
	'fin_sendPortfolio', // 必填，自定义方法名字，根据客户端注入的方法名称填写
	{ name: '投资组合' }, // 必填，传递给客户端的参数，如不需要传参则固定传入空对象
	function(response){ // 可选，调用客户端方法后成功的回调，response为客户端回传的数据
		console.log(response);
	}
);
```
### 注册前端接口
为了提高sdk的扩展性，允许注册自定义接口，前端需要在ready生命周期钩子中进行注册，客户端可以在SDK的WebView组件中调用该方法

```
fc.registerHandler(
	'reloadPage', // 必填，注册前端方法名字，客户端根据该方法名字进行调用
	'reloadPageCallback', // 可选，前端回调方法名字，通过挂载在window对象进行回调，如果不填，默认回调方法名为：注册方法名+'Callback'的规则拼接
	{ data: 'hello from js!' } // 可选，客户端调用成功后，回传给客户端的数据
);
```
前端注册好自定义方法后，客户端成功调用该方法后会自动调用window上的回调函数，并在回调函数里注入从客户端传过来的参数，因此该回调函数需要在客户端调用前进行注册

```
// 注册回调函数的名字由上面注册前端方法决定
window.reloadPageCallback = function(data) { // data为客户端传递过来的参数
	// 这里可以根据客户端传过来的数据做任何事情
	console.log(data);
}
```
## 基础接口
注意：基础接口均接受最后一个参数为成功回调函数，部分例子省略了回调函数，只展示固定参数。
### 获取用户登录Session
```
// 如果页面加载时就需要调用，需要放在ready钩子中调用，才能保证方法正确执行。
fc.getSession(function (res) { // 从FinoChat客户端获取用户登录的session信息
    // res 返回数据结构如下
    {
        code: 0, // 回调结果码，0代表获取成功
        data: {
            accessToken: "", // homesever登录的access token
            fcid: "", // 用户的FinoChat ID
            jwt: "" // Kong网关验证jwt token
        }
    }

});
```
### 打开聊天房间
```
fc.openRoomWithRoomId('${roomId}', '${displayName}');
// roomId：需要打开的房间Id
// displayName：需要打开的房间名称
```

### 打开会话列表
```
fc.openConversation();
```

### 转发消息到房间
前端可以拼接消息体发送到聊天房间，并支持多种消息体类型

```
fc.forwardToRoom({
 "type": "m.url" // 客户端判断消息体类型
 "content": {  // 消息体content
    "body": "www.baidu.com",
    "info": {
      "domain": "www.baidu.com",
      "description": "",
      "title": "百度一下，你就知道",
      "url": "https://www.baidu.com",
      "image": "https://www.baidu.com/favicon.ico",
      "source": ""
    },
    "msgtype": "m.url" // 扩展类型
  }
});
```
### 打开弹窗提示
```
// 打开原生弹窗提示
fc.showModal({
	content: 'Hello World!', // 弹窗提示文本
	action: 'close' // 可选，点击确定后回调动作，close为弹窗消失并关闭当前WebView
});
```
### 预览图片接口
```
// 调用原生图片预览能力
fc.previewImage({
index: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
});
```

### 新打开webView
```
// 新打开webView的url地址，并覆盖在原来的webView视图
fc.openWebView('https://www.finogeeks.com/');
```
### 关闭当前webView
```
// 关闭当前webView视图，并返回上一视图
fc.closeWebView();
```

---
_Source: https://npm.io/package/finchat-jsbridge-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._