nt_jsbridge
H5和客户端之间使用到的桥接封装
- 该项目为nt项目的jsbridge方案中的js sdk部分
- 通过该项目,统一了H5与Native客户端间的交互,抹平了两端的差异;
使用
npm包引用
# 通过 npm 安装
npm i nt_jsbridge -S
# 通过 yarn 安装
yarn add nt_jsbridge
import { bridgeName } from "nt_jsbridge";
script标签引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/nt_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 "nt_jsbridge";
isNTApp // 是否在app中运行
isIOSNTApp // 是否在app ios版中运行
isAndroidNTApp // 是否在app Android版中运行
getAppData
返回值:
key | 类型 | 说明 |
---|
appVersion | String | APP版本 |
brand | String | 品牌 |
sysVersion | String | 系统版本 |
deviceId | String | 设备id |
使用方式:
import { getAppData } from "nt_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();
gotoNative
参数
原生Path
path | 参数 | 说明 |
---|
home_personal | N/A | 个人主页 |
使用方式:
import { gotoNative } from "nt_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 "nt_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 | 自定义右上角相关图标 |
menustext | String | 右上角图标文字 |
menuscolor | String | 右上角图标文字颜色:#999999 |
menusicon | String | 右上角图sha标图片地址 |
menuskey | String | 右上角图标图片索引 |
自定义右上角图标【menus】
1. PS:只支持以纯文字或纯图片的方式自定义右上角图标;权重 text > icon
2. icon传递图片参数时,图片文件名建议以name@2x形式命名(带上@2x)
3. 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 "nt_jsbridge";
appLogin(window.location.href);
appLogin();
activeWebview
- 从后台切回app触发。无其他参数,在事件触发时,会执行回调函数
使用方式:
import { activeWebview } from "nt_jsbridge";
activeWebview(() => {
console.log("激活");
});
closeWebview
import { closeWebview } from "nt_jsbridge";
closeWebview();
开源协议
本项目基于 MIT 协议。