finchat-jsbridge-sdk v1.0.1
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();