nt_jsbridge v0.0.14

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

• 获取APP及设备信息

返回值：

使用方式：

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

• 打开Native原生页面

参数

原生Path

使用方式：

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

• 打开一个新的Webview

参数

使用方式：

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

• 设置页面属性

参数

自定义右上角图标【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

• 登录

参数

使用方式：

import { appLogin } from "nt_jsbridge";

appLogin(window.location.href);
appLogin();

activeWebview

• 从后台切回app触发。无其他参数，在事件触发时，会执行回调函数

使用方式：

import { activeWebview } from "nt_jsbridge";

activeWebview(() => {
	console.log("激活");
});

closeWebview

• 关闭自身webview

import { closeWebview } from "nt_jsbridge";

closeWebview();

开源协议

本项目基于 MIT 协议。