应用简述
- 什么是JSAPI
JSAPI是比特兔论坛客户端通过bridge机制，允许前端H5页面通过特定的JS方法，可以直接调用对应的拍照、分享、回复之类的Native功能。
但需要注意的是由于bridge的机制问题，iOS端暂时无法在iframe内正常调用所有的JSAPI，请避免在iframe内使用。
- JsBridge对象调用示例
// bridge对象绑定在window.BRBForumJSBridge上
var bridge = window.BRBForumJSBridge;
// 通过call函数来调用各个Native功能
bridge.call('openReplyForm', {
text: '@#21',
topic_id: '61'
}, function (e) {
// Native功能执行之后的回调
alert(JSON.stringify(e));
});
// 通过addEventListener来监听Native事件
bridge.on('replySuccess', function(e) {
alert(JSON.stringify(e));
});
- JsBridge对象调用回调对象
call函数的第三个参数是一个回调函数，任何Native功能在执行完成后，需要调用这个函数，传回一个回调对象。
这个对象需要包含如下结构：
var e = {
success: true, // 是否调用成功
errorMessage: '如果success为false，需要传回一个错误信息',
data: '可选，有返回则返回'
}
事件扩展
事件扩展主要用于Native端调用JS端逻辑。
1. JSBridge就位（ready）
JSBridge的注入是一个异步过程，所以需要开发者监听这个ready事件再进行call调用。
BRBForumJSBridge.on('ready', function(e) {
// 执行其他call操作
});
2. 回复成功（replySuccess）
BRBForumJSBridge.on('replySuccess', function(content, post_id) {
// 返回用户输入的内容
console.log(content);
});
3. 点赞和踩成功（upSuccess | downSuccess）
BRBForumJSBridge.on('upSuccess' | 'downSuccess', function(post_id) {
// 返回点赞成功的post_id
console.log(post_id);
});
4. 关注用户成功（addFriendshipsSuccess）
BRBForumJSBridge.on('addFriendshipSuccess', function(user_id) {
// 返回关注成功的user_id
console.log(user_id);
});
5. 取消关注用户成功（cancelFriendshipSuccess）
BRBForumJSBridge.on('cancelFriendshipSuccess', function(user_id) {
// 返回关注成功的user_id
console.log(user_id);
});
Native功能
call函数主要用户JS端主动调用Native端功能。
1. 唤起回复表单（openReplyForm）
BRBForumJSBridge.call('openReplyForm', {
text: '@#21',
topic_id: '61'
}, function () {
// when success
});
入参：
| 参数 | 类型 | 必选 | 描述 | 例子 |
|---|---|---|---|---|
| text | string | 否 | 唤起表单填入的字符串 | '@#21' |
| topic_id | string | 是 | 回复的topic_id | '32' |
回调对象data：无
2. 回复楼层（replyFloor）
BRBForumJSBridge.call('replyFloor', {
post_id: '11',
refer_content: '<html>',
refer_floor: '3'
}, function () {
// when success
});
入参：
| 参数 | 类型 | 必选 | 描述 | 例子 |
|---|---|---|---|---|
| post_id | string | 是 | post id | '111' |
| refer_content | string | 是 | 引用的html，在上传时直接加入用户回复之前即可 | '<blockquote><p><a data-mention="true" href="/users/24382" class="simditor-mention">@zn_test</a> #1</p>123123</blockquote>' |
| refer_floor | string | 是 | 回复的楼层 | '3' |
回调对象data：无
3. 点赞和踩（up | down）
BRBForumJSBridge.call('up' | 'down', {
post_id: '2341',
}, function () {
// when success
});
入参：
| 参数 | 类型 | 必选 | 描述 | 例子 |
|---|---|---|---|---|
| post_id | string | 是 | post id | '214' |
回调对象data：无
4. 关注用户（addFriendship）
BRBForumJSBridge.call('addFriendship', {
user_id: '2341',
}, function () {
// when success
});
入参：
| 参数 | 类型 | 必选 | 描述 | 例子 |
|---|---|---|---|---|
| user_id | string | 是 | 用户 id | '214' |
回调对象data：无
5. 取消关注用户（cancelFriendship）
BRBForumJSBridge.call('cancelFriendship', {
user_id: '2341',
}, function () {
// when success
});
入参：
| 参数 | 类型 | 必选 | 描述 | 例子 |
|---|---|---|---|---|
| user_id | string | 是 | 用户 id | '214' |
回调对象data：无
网友评论