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();