@likg/js-bridge

概述

此库主要用于原生和H5之间通过方法进行交互，H5开发者若要使用本库，需提示原生开发者根据本库 声明文件 规则定义相应的方法，否则无法使用。本库约定，安卓开发者注入到H5的方法对象为 js_android。

为了统一入参，便于后期拓展，原生接收参数的类型为对象（Object）类型（注意：本库会将参数对象类型JSON序列化为字符串之后再进行传递）。H5 在调用原生方法时，如果没有参数设置，本库会默认传递 null 对象给原生，原生在处理参数时需注意。

H5开发者在使用本库时，对于需传递 供原生调用 的JS方法，本库默认接收字符串方法名，并做特殊处理，将其转为 {callback: 'fnName'} 给原生。比如本库封装了一个 getLocation 的通信方法，H5在调用时，只需传递供原生回调的方法名即可，如下所示：

getLocation('handler');

其中，handler 为 H5 挂载在 window 上的全局方法，即供原生调用的方法名。原生接收到的类型为：

{callback: 'handler'}

再次强调，由于 Android 无法直接接收对象，所以本库在处理安卓参数（对象传参）时，则先 JSON 序列化之后再进行传递。

关于同步返回：

在H5和原生交互的方法中，可能会遇到调用原生方法同步返回的情况，比如，我要调用 getToken 方法获取用户token，期望原生能够直接返回，而不是再定义一个方法供原生调用将token传递给H5。由于安卓在方法内部可以return供H5直接接收，而iOS不能，所以这里H5采用 prompt 方式处理，那么iOS开发者在如下方法：

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

中统一拦截H5中的prompt，并通过H5传递过来的type类型判断并做相应处理。如下所示:

// 设置代理
self.webView.UIDelegate = self;

// JS端调用prompt函数时，会触发此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
    NSError *err = nil;
    NSData *dataFromString = [prompt dataUsingEncoding:NSUTF8StringEncoding];
    // 读取数据
    NSDictionary *data = [NSJSONSerialization JSONObjectWithData:dataFromString options:NSJSONReadingMutableContainers error:&err];
    if (!err){
        // 根据data中type类型的返回指定数据
        completionHandler(returnValue);
    }
}

安装

H5开发通过如下方式安装本库：

$ npm install lg-js-bridge
$ yarn add lg-js-bridge

使用

这里以获取Token为例：

import jsBridge from 'lg-js-bridge';

const token = jsBridge.getToken();

声明文件

特别说明：如下示例中的 callback 表示 H5 给原生作为回调的函数名变量，H5 调用时将原生回调的函数名作为参数设置;

/************************************************
 ****** APIs
************************************************/
/**
 * 1. 跳转微信小程序
 * @param {*} options
 */
static launchMiniProgram(options: {
    userName: string /** 小程序原始id */;
    path: string /** 拉起小程序页面的可带参路径，不填默认拉起小程序首页 */;
    miniprogramType: 0 | 1 | 2 /** 打开类型；0：正式版，1：开发版，2：体验版 */;
}): void;
/**
 * 2. H5调用原生支付
 */
static payment(params: {
    callback: string /** 支付回调H5函数名 */;
    payType: string /** 支付类型（这里需要和原生约定类型，如：微信支付 - WX_PAY，支付宝支付 - ALI_PAY，苹果支付 - APPLE_PAY） */;
    payStr: string /** 支付参数（这里需要和后台沟通，将原生拉起支付的参数以JSON字符串形式返回，到时直接传递给原生并由原生解析即可） */;
    orderNo?: string /** 订单号（有时原生调用支付回调函数之后，H5这边需要通过订单号查询支付状态，所以这里将订单号传给原生，原生在回调时作为参数回传给H5使用） */;
}): void;
/**
 * 3. H5调用原生分享
 */
static shareWith(options: {
    type: number /** 分享类型： 0 文字 / 1 图片 / 2 网页链接 / 3 视频连接 / 4 小程序 */;
    title?: string /** 标题（可选） */;
    link?: string /** 网页链接（可选） */;
    text?: string /** 文字内容/网页链接描述（可选） */;
    videoUrl?: string /** 视频连接地址（可选） */;
    imageUrl?: string /** 图片链接地址/网页链接缩略图（可选） */;
    imageBase64?: string /** 图片base64（可选） */;
}): void;
/**
 * 4. 保存图片至手机相册
 * @param images 图片集合/这里将图片的在线链接放入集合传递给原生进行保存
 */
static saveImages(images: string[]): void;
/**
 * 5. 保存视频至手机相册
 * @param {string} videoUrls 视频地址集合/这里将视频的在线链接放入集合传递给原生进行保存
 */
static saveVideos(videoUrls: string[]): void;
/**
 * 6. 通知原生返回上一页（原生pop控制器）
 */
static nativeBack(): void;
/**
 * 7. 通知原生绑定平台
 * @param options
 * @param options.platform 平台：WX/ALIPAY
 * @param options.callback 微信绑定之后的回调函数
 */
static bindPlatform(options: {
    platform: 'WX' | 'ALIPAY';
    callback: string;
}): void;
/**
 * 8. 通知原生打开APP
 * @param appTag WX | QQ
 */
static openApp(appTag: 'WX' | 'QQ'): void;
/**
 * 9. 通知原生定位
 * @param callback 原生定位成功以后调用H5回调函数，并将定位信息作为回调函数参数传递。
 */
static getLocation(callback: string): void;
/**
 * 10. 从原生获取token。
 *
 * iOS开发者注意：----- 此方法通过prompt触发，type类型为：GET_TOKEN
 */
static getToken(): string;
/**
 * 11. 分享（邀请）海报 --- 裂变
 * @param options
 * @param options.type  -- 分享（邀请）标识符，H5和原生根据具体使用场景自行约定一个字符串常量标识；
 * @param options.callback -- H5回调函数名，原生在成功触发邀请之后调用该js函数，用于通知H5做后续处理；
 */
static sharePoster(options: {
    type: string;
    callback: string;
}): void;
/**
 * 12. 设置剪切板
 * @param value 复制内容
 */
static setClipboard(value: string): void;
/**
 * 13. 获取剪切板内容
 * @returns value
 */
static getClipboard(): string;
/**
 * 14. 百度统计
 * @param eventId 事件ID
 */
static baiduStatistics(eventId: string): void;
/**
 * 15. 通知原生刷新页面
 * @param k 通知标识，可以理解为事件名称，需原生和H5协商
 */
static nativeRefresh(k: string): void;