應(yīng)用簡述
- 什么是JSAPI
JSAPI是比特兔論壇客戶端通過bridge機制，允許前端H5頁面通過特定的JS方法邻悬，可以直接調(diào)用對應(yīng)的拍照验庙、分享、回復之類的Native功能过牙。
但需要注意的是由于bridge的機制問題甥厦，iOS端暫時無法在iframe內(nèi)正常調(diào)用所有的JSAPI，請避免在iframe內(nèi)使用寇钉。
- JsBridge對象調(diào)用示例
// bridge對象綁定在window.BRBForumJSBridge上
var bridge = window.BRBForumJSBridge;
// 通過call函數(shù)來調(diào)用各個Native功能
bridge.call('openReplyForm', {
text: '@#21',
topic_id: '61'
}, function (e) {
// Native功能執(zhí)行之后的回調(diào)
alert(JSON.stringify(e));
});
// 通過addEventListener來監(jiān)聽Native事件
bridge.on('replySuccess', function(e) {
alert(JSON.stringify(e));
});
- JsBridge對象調(diào)用回調(diào)對象
call函數(shù)的第三個參數(shù)是一個回調(diào)函數(shù)刀疙，任何Native功能在執(zhí)行完成后，需要調(diào)用這個函數(shù)扫倡，傳回一個回調(diào)對象谦秧。
這個對象需要包含如下結(jié)構(gòu)：
var e = {
success: true, // 是否調(diào)用成功
errorMessage: '如果success為false竟纳，需要傳回一個錯誤信息',
data: '可選，有返回則返回'
}
事件擴展
事件擴展主要用于Native端調(diào)用JS端邏輯疚鲤。
1. JSBridge就位（ready）
JSBridge的注入是一個異步過程锥累，所以需要開發(fā)者監(jiān)聽這個ready事件再進行call調(diào)用。
BRBForumJSBridge.on('ready', function(e) {
// 執(zhí)行其他call操作
});
2. 回復成功（replySuccess）
BRBForumJSBridge.on('replySuccess', function(content, post_id) {
// 返回用戶輸入的內(nèi)容
console.log(content);
});
3. 點贊和踩成功（upSuccess | downSuccess）
BRBForumJSBridge.on('upSuccess' | 'downSuccess', function(post_id) {
// 返回點贊成功的post_id
console.log(post_id);
});
4. 關(guān)注用戶成功（addFriendshipsSuccess）
BRBForumJSBridge.on('addFriendshipSuccess', function(user_id) {
// 返回關(guān)注成功的user_id
console.log(user_id);
});
5. 取消關(guān)注用戶成功（cancelFriendshipSuccess）
BRBForumJSBridge.on('cancelFriendshipSuccess', function(user_id) {
// 返回關(guān)注成功的user_id
console.log(user_id);
});
Native功能
call函數(shù)主要用戶JS端主動調(diào)用Native端功能集歇。
1. 喚起回復表單（openReplyForm）
BRBForumJSBridge.call('openReplyForm', {
text: '@#21',
topic_id: '61'
}, function () {
// when success
});
入?yún)ⅲ?/p>
| 參數(shù) | 類型 | 必選 | 描述 | 例子 |
|---|---|---|---|---|
| text | string | 否 | 喚起表單填入的字符串 | '@#21' |
| topic_id | string | 是 | 回復的topic_id | '32' |
回調(diào)對象data：無
2. 回復樓層（replyFloor）
BRBForumJSBridge.call('replyFloor', {
post_id: '11',
refer_content: '<html>',
refer_floor: '3'
}, function () {
// when success
});
入?yún)ⅲ?/p>
| 參數(shù) | 類型 | 必選 | 描述 | 例子 |
|---|---|---|---|---|
| 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' |
回調(diào)對象data：無
3. 點贊和踩（up | down）
BRBForumJSBridge.call('up' | 'down', {
post_id: '2341',
}, function () {
// when success
});
入?yún)ⅲ?/p>
| 參數(shù) | 類型 | 必選 | 描述 | 例子 |
|---|---|---|---|---|
| post_id | string | 是 | post id | '214' |
回調(diào)對象data：無
4. 關(guān)注用戶（addFriendship）
BRBForumJSBridge.call('addFriendship', {
user_id: '2341',
}, function () {
// when success
});
入?yún)ⅲ?/p>
| 參數(shù) | 類型 | 必選 | 描述 | 例子 |
|---|---|---|---|---|
| user_id | string | 是 | 用戶 id | '214' |
回調(diào)對象data：無
5. 取消關(guān)注用戶（cancelFriendship）
BRBForumJSBridge.call('cancelFriendship', {
user_id: '2341',
}, function () {
// when success
});
入?yún)ⅲ?/p>
| 參數(shù) | 類型 | 必選 | 描述 | 例子 |
|---|---|---|---|---|
| user_id | string | 是 | 用戶 id | '214' |
回調(diào)對象data：無
