JsBridge SDK README

简介

JsBridge SDK 用于 Web/H5、Vue、UniApp 与原生 App 之间进行双向通信。

支持能力：

• App 信息获取
• 路由同步
• 页面生命周期同步
• 扫码
• 图片/视频选择
• 图片信息获取
• 文件上传
• 图片预览
• 电话拨打
• 标题栏设置
• 日志上报
• Scheme 打开
• 蓝牙打印
• PDA 扫码监听
• 子应用重载

安装

// 后续更改仓库地址后更新
npm install @hd-front-end/jsbridge-sdk

快速接入

import { initJsBridge,JsBridgeHandlers } from '@hd-front-end/jsbridge-sdk'

function refreshStore(data: JsBridgeAppData) {
    // 根据appData数据自行对接应用数据
}
async function doSetupWebViewJsBridge() {
    try {
        await JsBridgeHandlers.registerOnRoute((data, callback) => {
            // 处理路由跳转
        })
        await JsBridgeHandlers.registerOnGetRouteInfo((data, callback) => {
            // 获取路由信息映射表
            callback({})
        })
        await JsBridgeHandlers.registerOnRefreshStore((data, callback) => {
            //刷新store数据，根据传过来的key判断需要刷新什么数据
            refreshStore(appData)
        })
        await JsBridgeHandlers.registerOnPdaScan((data, callback) => {
            // Pda扫码回调
        })

        // 获取app全量数据
        const appData = await JsBridgeHandlers.handleGetAppInfoToObject()
        refreshStore(appData)
        // 通知app，应用已经初始化完成，name是随便标识
        JsBridgeHandlers.handleAppOnload({name: 'ReportApp'})
    } catch (e) {
    }
}

const jsBridgeSuccess = await initJsBridge()
if (jsBridgeSuccess) {
    await doSetupWebViewJsBridge()
}

环境判断

JsBridge.isReady()
JsBridge.inAndroidApp()
JsBridge.inIosApp()
JsBridge.inHdApp()

事件注册

registerOnRoute

监听原生路由跳转。

JsBridgeHandlers.registerOnRoute((route) => {
  console.log(route)
})

VueRoute

|字段|类型|说明| |---|---|---| |path|string|路由路径| |name|string|路由名称| |query|Record<string,any>|Query参数| |params|Record<string,any>|动态参数|

registerOnGetRouteInfo

原生主动获取路由配置。

JsBridgeHandlers.registerOnGetRouteInfo((routes, callback) => {
  callback(routes)
})

registerOnRefreshStore

监听用户、组织、权限等数据刷新。

返回：JsBridgeAppData

主要字段：

registerOnRefreshStore

监听用户、组织、权限等数据刷新。

返回：JsBridgeAppData

主要字段：

|字段|类型|说明| |---|---|---| |tokenInfo|TokenInfo|令牌信息（包含accessToken、refreshToken、temporaryToken、serverDiffTime）| |tenantInfo|TenantInfo|租户信息（包含id、name、logoUrl）| |orgInfo|OrgInfo|组织信息（包含id、code、name、parentOrgId、state、type、loginTime、outsideGeofence）| |store|Store|门店信息（包含id、code、name、alias、address、orgId、tenant、uuid等）| |employeeInfo|EmployeeInfo|员工信息（包含employeeId、employeeCode、employeeName、mobile、userId、worKOrgId、worKOrgCode、worKOrgName等）| |userInfo|UserInfo|用户信息（包含user、roles、stores、orgId、loginId、nickName、mobile、state、token、uniUserId等）| |permission|string[]|权限列表| |moduleInfo|ModuleInfo|模块信息（包含appId、uniAppid、versionCode、versionName、serviceUrl、h5Url、wgtUrl、updateType等）| |watermark|Watermark|水印配置（包含enable、fontSize、transparency、showEmployeeName、showEmployeeCode等）| |currentLanguage|string|当前语言| |statusBarHeight|number|状态栏高度| |navigationBarHeight|number|导航栏高度|

TokenInfo

|字段|类型|说明| |---|---|---| |serverDiffTime|number|服务器时间差| |accessToken|string|访问令牌，用于访问服务端资源。有效期较短，一般为分钟级| |refreshToken|string|刷新令牌，用于换取新的访问令牌。有效期很长，一般为一天| |temporaryToken|string|临时令牌，用于进行未登录的操作，比如立即修改密码和选择租户|

TenantInfo

|字段|类型|说明| |---|---|---| |id|string|租户ID| |name|string|租户名称| |logoUrl|string|租户LOGO图片URL|

OrgInfo

|字段|类型|说明| |---|---|---| |id|string|组织ID| |code|string|组织Code| |name|string|组织名称| |parentOrgId|string|上级组织ID，0表示为根组织| |state|string|组织状态（enabled:启用, disabled:禁用）| |type|string|组织类型| |loginTime|string|上次登录时间| |outsideGeofence|boolean|是否在电子围栏外|

EmployeeInfo

|字段|类型|说明| |---|---|---| |employeeId|string|员工ID| |employeeCode|string|员工工号| |employeeName|string|员工名称| |employeeStationState|string|员工在岗状态（onDuty-在岗, offDuty-离岗）| |mobile|string|手机号| |userId|string|Uni用户ID| |userName|string|用户名称| |worKOrgId|string|工作组织ID| |worKOrgCode|string|工作组织Code| |worKOrgName|string|工作组织名称| |worKOrgType|string|工作组织类型| |hqOrgName|string|总部组织名称| |outerUserCode|string|外部系统用户Code| |outerUserId|string|外部系统用户ID| |source|string|来源| |tenant|string|租户|

UserInfo

|字段|类型|说明| |---|---|---| |user|Object|用户基本信息（包含uuid、code、name）| |roles|Array|角色列表（每个角色包含uuid、code、name）| |stores|Array|门店列表| |orgId|string|组织ID| |loginId|string|账号| |nickName|string|名称| |mobile|string|手机号| |linkMan|string|联系方式| |state|string|状态| |token|string|Token| |uuid|string|UUID| |uniUserId|string|Uni用户ID| |dataPermissions|Array|数据授权| |lastLoginCity|string|上次登录城市| |currentLoginCity|string|本次登录城市|

ModuleInfo

|字段|类型|说明| |---|---|---| |appId|string|Portal中注册的应用ID| |uniAppid|string|前端框架UniApp ID| |tenant|string|租户| |appTenant|string|应用租户| |platform|string|平台类型| |versionCode|string|最新版本号（用于比对）| |versionName|string|最新版本名称| |description|string|更新描述文案| |serviceUrl|string|服务端接口地址| |h5Url|string|H5线上地址| |wgtUrl|string|安装包/H5资源包下载地址| |updateType|string|更新类型（NORMAL-普通, SILENT-静默, FORCE-强制）| |subAppEntryParams|string|海鼎零售APP进入子应用所需参数| |centerUrl|string|中央服务器地址|

Watermark

|字段|类型|说明| |---|---|---| |enable|boolean|是否启用水印| |fontSize|string|字体大小（small/medium/large）| |transparency|string|透明度（lowOpacity/mediumOpacity/highOpacity/opaque）| |itemsPerRow|number|每行显示个数| |itemsPerColumn|number|每列显示个数| |basicInfoLineNo|number|基本信息行号| |showOrgInfo|string|组织信息显示（root-根组织名称, login-登录组织名称, hide-不显示）| |showEmployeeName|boolean|是否显示员工姓名| |showEmployeeCode|boolean|是否显示员工工号| |showPhoneNumberLastDigits|boolean|是否显示手机尾号| |basicInfoSort|string[]|基本信息排序（可选值：employeeCode、employeeName、orgInfo、phoneNumberLastDigits）| |timeInfoLineNo|number|时间信息行号（-1表示不显示）| |orgName|string|组织名称| |employeeName|string|员工姓名| |employeeCode|string|员工工号| |phoneNumberLastDigits|string|手机号尾号|

Store

|字段|类型|说明| |---|---|---| |id|string|ID| |code|string|代码| |name|string|名称| |alias|string|别名| |address|string|详细地址| |orgId|string|组织ID| |tenant|string|租户| |uuid|string|UUID| |version|number|版本| |versionTime|string|版本时间| |createInfo|Object|创建信息| |lastModifyInfo|Object|最后修改信息|

registerOnPdaScan

监听 PDA 硬件扫码。

JsBridgeHandlers.registerOnPdaScan((code)=>{
})

App信息

handleGetAppInfo

获取 JSON 字符串。

const data = await JsBridgeHandlers.handleGetAppInfo()

handleGetAppInfoToObject

获取对象。

const data = await JsBridgeHandlers.handleGetAppInfoToObject()

返回：JsBridgeAppData

路由同步

handleRouterAfterEach

router.afterEach((to, from) => {
  JsBridgeHandlers.handleRouterAfterEach(to, from)
})

UniRoute

|字段|类型|说明| |---|---|---| |name|string|路由名称| |path|string|路由路径| |style|UniRouteStyle|页面样式|

UniRouteStyle

|字段|说明| |---|---| |navigationBarBackgroundColor|导航栏背景色| |navigationBarTextStyle|标题颜色 black/white| |navigationBarTitleText|标题文字| |navigationStyle|default/custom| |enablePullDownRefresh|开启下拉刷新| |onReachBottomDistance|触底距离|

生命周期

handlePageLifeCycle

await JsBridgeHandlers.handlePageLifeCycle({
  state:'onShow',
  route:{}
})

PageLifeCycle

|字段|类型|说明| |---|---|---| |state|string|appOnLaunch/onLoad/onShow/onHide/onUnload| |route|any|页面路由|

扫码

handleScan

const result = await JsBridgeHandlers.handleScan(request)

UniScanRequest

|参数|类型|说明| |---|---|---| |scanType|string[]|qrCode、barCode| |hideAlbum|boolean|隐藏相册| |language|string|zh-Hans、en| |failedMsg|string|识别失败提示| |screenType|string|Android扫码页面类型| |timeoutInterval|string|超时秒数| |timeoutText|string|超时提示| |viewText|string|扫码提示文案|

UniScanResult

|字段|类型|说明| |---|---|---| |resp_result|string|扫码结果| |resp_code|number|状态码| |resp_message|string|结果说明|

状态码：

• 1000 成功
• 10 用户取消
• 11 失败

图片/视频选择

handleChooseMedia

const result = await JsBridgeHandlers.handleChooseMedia(request)

UniChooseMediaRequest

|参数|类型|说明| |---|---|---| |extension|string[]|扩展名过滤| |sourceType|string[]|album/camera| |camera|string|front/back| |mediaType|string[]|image/video| |count|number|最大选择数| |maxDuration|number|视频时长限制| |sizeType|string[]|original/compressed|

UniMediaFile

|字段|说明| |---|---| |tempFilePath|本地路径| |name|文件名| |fileType|MimeType| |size|大小(B)| |width|宽度| |height|高度| |duration|视频时长(ms)| |thumbTempFilePath|视频缩略图|

UniChooseMediaResult

|字段|类型| |---|---| |tempFiles|UniMediaFile[]| |tempFilePaths|string[]|

图片信息

handleGetImageInfo

ImageInfoRequest

|参数|类型|说明| |---|---|---| |src|string|图片路径|

返回：UniMediaFile

文件上传

handleUploadFile

UniUploadFileOption

|参数|类型|说明| |---|---|---| |url|string|上传地址| |filePath|string|文件路径| |name|string|表单字段名| |header|any|请求头| |formData|any|附加参数| |timeout|number|超时时间(ms)|

UniUploadFileResult

|字段|类型|说明| |---|---|---| |code|number|业务状态码| |errMsg|string|错误信息| |data|string|返回数据| |statusCode|number|HTTP状态码|

图片预览

handlePreviewImage

UniPreviewImageRequest

|参数|类型|说明| |---|---|---| |current|string\|number|当前图片| |urls|string[]|图片列表|

电话拨打

handleMakePhoneCall

UniPhoneCall

|参数|类型|说明| |---|---|---| |phoneNumber|string|电话号码|

标题栏

handleSetNavigationBar

UniNavigationBarStyle

|参数|类型|说明| |---|---|---| |title|string|标题| |frontColor|string|#ffffff/#000000| |backgroundColor|string|背景颜色|

日志

handleLog

UniLog

|参数|类型|说明| |---|---|---| |tag|string|日志标签| |level|string|DEBUG/INFO/WARN/ERROR| |message|string|日志内容|

Scheme 打开

handleOpenSchemeUrl

UniUrlScheme

|参数|类型|说明| |---|---|---| |url|string|链接地址| |openType|string|APP/SYSTEM| |style|any|APP页面样式|

Base64转换

handlePathToBase64

await JsBridgeHandlers.handlePathToBase64({
  src:'/xxx/a.png'
})

返回：Base64字符串

蓝牙打印

handleBluetoothPrint

蓝牙打印文本。

handleBluetoothPrintImage

蓝牙打印图片。

应用控制

handleCloseWebView

关闭当前页面。

handleAppOnload

通知原生页面加载完成。

handleLogout

通知原生退出登录。

handleReloadModule

UniReloadModule

|字段|类型|说明| |---|---|---| |appId|string|子应用ID|

默认配置

SDK导出以下默认配置：

defaultUniChooseMediaRequest
defaultUniScanRequest
defaultUniRouteStyle
defaultUniLog

可在业务中直接基于默认配置扩展。