@node-transfer/jsbridge
H5和客户端之间使用到的桥接封装
- 该项目为nt项目的jsbridge方案中的js sdk部分
- 通过该项目,统一了H5与Native客户端间的交互,抹平了两端的差异;
使用
npm包引用
# 通过 npm 安装
npm i @node-transfer/jsbridge -S
# 通过 yarn 安装
yarn add @node-transfer/jsbridge -S
import { bridgeName } from "@node-transfer/jsbridge";
script标签引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@node-transfer/jsbridge/dist/ntbridge.js"></script>
const ntBridge = window.ntChainBridge;
ntBridge.openWebview("https://www.baidu.com")
详细文档
h5 调用 native 已经注册的方法:
isNTApp、isIOSNTApp、isAndroidNTApp
- 判断H5是否在app中运行,值为true或false
import {
isNTApp,
isIOSNTApp,
isAndroidNTApp
} from "@node-transfer/jsbridge";
isNTApp // 是否在app中运行
isIOSNTApp // 是否在app ios版中运行
isAndroidNTApp // 是否在app Android版中运行
getAppData
返回值:
key |
类型 |
说明 |
appVersion |
String |
APP版本 |
brand |
String |
品牌 |
sysVersion |
String |
系统版本 |
deviceId |
String |
设备id |
使用方式:
import { getAppData } from "@node-transfer/jsbridge";
// 方式一:
getAppData(({ success, data, error, callbackKey }) => {
console.log("getAppData-callback:", { success, data, error, callbackKey });
});
// 方式二:
getAppData().then(({ success, data, error, callbackKey }) => {
console.log("getAppData-then:", { success, data, error, callbackKey });
});
// 方式三:
const { success, error, data, callbackKey } = await getAppData();
getBaseUsetData
返回值:
key |
类型 |
说明 |
mobile |
String |
手机号码 |
nodeType |
String |
节点类型:0 临时节点,2标准节点,3主节点 |
thirdToken |
String |
用户token |
使用方式:
import { getBaseUsetData } from "@node-transfer/jsbridge";
getBaseUsetData(({ success, data, error, callbackKey }) => {
console.log("getBaseUsetData-callback:", { success, data, error, callbackKey });
});
gotoNative
参数
key |
类型 |
说明 |
path |
String |
原生path |
原生Path
path |
参数 |
说明 |
home_personal |
N/A |
个人主页 |
使用方式:
import { gotoNative } from "@node-transfer/jsbridge";
// 方式一:
gotoNative({
path: "/path",
callback: ({ success, data, error, callbackKey }) => {
console.log("gotoNative-callback1:", { success, data, error, callbackKey });
}
});
// 方式二:
gotoNative("/path", ({ success, data, error, callbackKey }) => {
console.log("gotoNative-callback2:", { success, data, error, callbackKey });
});
// 方式三:
gotoNative("/path").then(({ success, data, error, callbackKey }) => {
console.log("gotoNative-then:", { success, data, error, callbackKey });
});
// 方式四:
const { success, error, data, callbackKey } = await gotoNative("/path");
console.log("gotoNative-async/await:", { success, data, error, callbackKey });
openWebview
参数
key |
类型 |
说明 |
url |
String |
打开webview的url地址 |
使用方式:
import { openWebview } from "@node-transfer/jsbridge";
// 方式一:
openWebview({
url: "https://www.baidu.com",
callback: ({ success, data, error, callbackKey }) => {
console.log("openWebview-callback1:", { success, data, error, callbackKey });
}
});
// 方式二:
openWebview(
"https://www.baidu.com",
({ success, data, error, callbackKey }) => {
console.log("openWebview-callback2:", { success, data, error, callbackKey });
}
);
// 方式三:
openWebview("https://www.baidu.com").then(
({ success, data, error, callbackKey }) => {
console.log("openWebview-then:", { success, data, error, callbackKey });
}
);
// 方式四:
const { success, error, data, callbackKey } = await openWebview("https://www.baidu.com");
console.log("openWebview-async/await:", { success, data, error, callbackKey });
setPage
参数
key |
类型 |
说明 |
title |
String |
标题 |
isPullRefresh |
Boolean |
是否下拉刷新 |
bgColor |
String |
header背景颜色:#999999 |
color |
String |
header文字颜色:#333333 |
hasHead |
Boolean |
是否显示header |
menus |
Array |
自定义右上角相关图标 |
menus[text] |
String |
右上角图标文字 |
menus[color] |
String |
右上角图标文字颜色:#999999 |
menus[icon] |
String |
右上角图sha标图片地址 |
menus[key] |
String |
右上角图标图片索引 |
自定义右上角图标【menus】
- PS:只支持以纯文字或纯图片的方式自定义右上角图标;权重 text > icon
- icon传递图片参数时,图片文件名建议以name@2x形式命名(带上@2x)
- menus暂时只支持单个图标
使用方式:
// 设置标题、背景颜色等属性
setPage({
color: "#62abba",
bgColor: "#f28d61",
isPullRefresh: true
});
// 触发setPage,不显示header
setPage({
hasHead: false
});
// 设置右上角图标-纯文字
setPage(
{
title: "Bridge setPage",
menus: {
key: "deleteAddress",
text: "删除地址",
color: "#666666"
}
},
function(e) {
console.log("setPage callback e:", e);
}
);
// 设置右上角图标-图片
setPage(
{
bgColor: "#f28d61",
menus: [{
key: "wechatShare",
icon: "https://gos-prod.oss-cn-hangzhou.aliyuncs.com/nt_mall_h5/icons/share1@2x.png"
}]
},
function(e) {
console.log("setPage6 callback e:", e);
}
});
appLogin
参数
key |
类型 |
说明 |
callbackUrl |
String |
登录成功后跳转地址 |
使用方式:
import { appLogin } from "@node-transfer/jsbridge";
appLogin(window.location.href);
appLogin();
activeWebview
- 从后台切回app触发。无其他参数,在事件触发时,会执行回调函数
使用方式:
import { activeWebview } from "@node-transfer/jsbridge";
activeWebview(() => {
console.log("激活");
});
closeWebview
import { closeWebview } from "@node-transfer/jsbridge";
closeWebview();
fullScreen
import { fullScreen } from "@node-transfer/jsbridge";
fullScreen();
开源协议
本项目基于 MIT 协议。