Namespace Pollution Mechanism

    @node-transfer/jsbridge

    1.0.7 • Public • Published

    @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

    • 获取APP及设备信息
    返回值:
    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

    • 打开Native原生页面
    参数
    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

    • 打开一个新的Webview
    参数
    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】

    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 "@node-transfer/jsbridge";
    
    appLogin(window.location.href);
    appLogin();

    activeWebview

    • 从后台切回app触发。无其他参数,在事件触发时,会执行回调函数
    使用方式:
    import { activeWebview } from "@node-transfer/jsbridge";
    
    activeWebview(() => {
    	console.log("激活");
    });

    closeWebview

    • 关闭自身webview
    import { closeWebview } from "@node-transfer/jsbridge";
    
    closeWebview();

    fullScreen

    • 界面全屏
    import { fullScreen } from "@node-transfer/jsbridge";
    
    fullScreen();

    开源协议

    本项目基于 MIT 协议。

    Install

    npm i @node-transfer/jsbridge

    DownloadsWeekly Downloads

    3

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    5

    Last publish

    Collaborators

    • iris_zhr