@kbapp/js-bridge v0.4.2-alpha.0

开吧客户端桥接

该桥接仅限于开吧 app 内使用

下载

npm:

npm i @kbapp/js-bridge

yarn:

yarn add @kbapp/js-bridge

pnpm:

pnpm add @kbapp/js-bridge

示例

import { saveImageToLocal, JSBridgeCode } from '@kbapp/js-bridge'

defineComponents({
    /** 保存图片案例 */
    async saveImageHandle() {
        try {
            await saveImageToLocal({
                imageUrl: 'https://static.kaiba315.com.cn/kaiba-logo.png',
            })
        } catch (error) {
            switch (error.errCode) {
                case JSBridgeCode.UNSUPPORTED_VERSION:
                    // 用户当前版本为支持该桥接,此时应当引导用户升级app
                    // 用户同意后,可以调用 checkForNewVersion()或者前往应用商城
                    return

                default:
                    return
            }
        }
    },
})

Api

总览

登录设计

以小程序运行逻辑参考

如果是点击某个按钮再执行登录的情况

提供装饰器, 注入回调函数

const onTapSomeButton = decorateLogin(() => {
    // Todo someting
})

该装饰器执行逻辑为如果未登录, 则执行登录操作(跳转到登录页面, 登录成功后回退到当前页), 并直接抛出异常, 不做 监听登录成功后执行回调函数 操作

那岂不是用户登陆完成后回到当页面还需与再点一下

没错, 的确要这么设计, 原因是为了解 如果点击了 2 个通过装饰器包装的按钮, 登陆成功后, 2 个按钮的回调事件将会全部执行(其实也有办法解决, 只是多点代码) 这种情况, 测试较真的话, 真是个问题

如果是某个组件/页面加载的时候就得登录才能正常操作

重新设计一个 onMountedWithLogin

onMountedWithLogin(() => {
    // Todo someting
})

同 onMounted, 只在页面加载的时候执行一次, 只有登录成功后, 才执行回调函数, 如果没有登录, 则执行直接抛出异常, 并执行登录操作

那岂不是, 该页面如果没有被销毁的话, 就算登录成功, 页面也不回触发登录回调

是的, 要解决这个问题, 要么执行登录成功的时候, 页面要被销毁重新加载, 要么 onShow 的时候, 也做检查(页面组件似乎没有 onShow)

其中最终的目的就是禁止出现监听登录成功事件无限累加, 曾经在这上面吃了不少的亏

saveImageToLocal

保存图片到本地

请求参数

返回值

Promise<void>

异常返回值

Promise<{ errCode: JSBridgeCode }>

saveVideoToLocal

保存视频到本地

请求参数

返回值

Promise<void>

异常返回值

Promise<{ errCode: JSBridgeCode }>

defineShareModelState

invokeShareModal

唤起分享更多模态框

请求参数

返回值

void

sharePoster

分享图片

请求参数

返回值

Promise<void>

异常返回值

Promise<{ errCode: JSBridgeCode }>

setWebViewTitle

设置网页标题(建议通过 document.title 设置)

请求参数

返回值

Promise<void>

异常返回值

Promise<{ errCode: JSBridgeCode }>

checkForNewVersion

检测是否有新版本可用, iOS 无论是否有最新版本都直接跳转到应用商店, 安卓如果有新版,则弹窗提示,没有的话 toast 提示无新版本

请求参数

无

返回值

void

canIUse

检测某个方法能被当前版本使用

请求参数

传入方法名(string)

返回值

Promise<boolean>

示例

import { canIUse } from '@kbapp/js-bridge'

if (await canIUse('sharePoster')) {
    console.log('当前app版本能使用')
} else {
    console.log('请升级app')
}

runAction

app 执行 Action

请求参数

返回值

无

closeWebView

关闭当前 webview

请求参数

无

返回值

无

defineShareModel

定义当前页面分享文案

请求参数

返回值

无

getAppLoginInfo

获取 app 登录信息.如果未登录返回 null

请求参数

无

返回值

Promise<{
    /** 车牌号:例如浙A999999 */
    carNo: string
    /** 未知 */
    role: number
    /** 手机号 */
    mobile: string
    /** 性别 */
    sex: number
    /** 电台id */
    siteId: string
    /** 头像地址 */
    avatar: string
    /** token */
    token: string
    /** 用户id */
    userId: number
    /** 用户名 */
    userName: string
} | null>

triggerAppLogin

唤起 app 登录. 如果已登录,将直接返回登录信息

请求参数

无

返回值

Promise<{
    /** 车牌号:例如浙A999999 */
    carNo: string
    /** 未知 */
    role: number
    /** 手机号 */
    mobile: string
    /** 性别 */
    sex: number
    /** 电台id */
    siteId: string
    /** 头像地址 */
    avatar: string
    /** token */
    token: string
    /** 用户id */
    userId: number
    /** 用户名 */
    userName: string
}>

watchAppLoginSuccess

登录完成会触发回调函数,调用该时将会立刻检测当前是否登录

请求参数

(loginInfo) => void

返回值

// 返回函数,调用该函数,停止监听
() => void

示例代码

import { watchAppLoginSuccess } from '@kbapp/js-bridge'

const handle = watchAppLoginSuccess(() => {
    console.log('登录成功')
})

// handle() 停止监听

JSBridgeCode

错误码枚举

键值对

常见问题

1. 桥接触发无反应: 请检查当前是否处于开吧 app 内,以及当前网页是否在白名单内