混合开发: 实现 js 和原生客户端的交互框架 js-native-bridge

WebViewJsBridge-iOS 和 WebViewJsBridge-Android 是我新写的 Js-Bridge 桥接库，简单易用，功能更完整，供大家参考。

Github 项目地址
说明：

iOS 端支持最低 iOS7 以上的设备，但是 demo 中的 js 因为使用 es6 语法，所以 iOS10 以下会出现语法错误，请使用 Babel 库来做兼容。
Android 端支持最低 sdk19 4.4 以上设备，测试过 Android 7.0 的设备没问题，如果出现低版本不兼容 es6 问题，同样使用 Babel 库来做下兼容。

运行 demo：
Mac 电脑自带 web 服务器，将 js 项目拖入 /Library/WebServer/Documents 目录下，使用终端敲击如下命令 sudo apachectl start 便起来一个 web
服务，浏览器输入 http://127.0.0.1 便能访问 webServer 的 Documents 目录，iOS，Android Demo 的 WebView 访问 js demo 下 index.html 文件，iOS，Android demo 分别使用 Xcode 和 Android Studio 运行。

demo.gif, Android demo 效果相近

基础用法

iOS，Android 客户端的混合开发，避免不了 js 和 native 之间的交互，一些常用的 js-bridge 库实现都是只支持一种系统。
js 调用 native 端的接口要简单，且一个函数就能调用 iOS 和 Android 两个系统，并且尽量模块化，在存在大量 native 接口的情况下便于维护这些函数。

使用方法，以 js 端调用系统的相机或相册获取一张图片为例，其它功能大同小异。
js 端的调用代码如下：

// index.html  
<script type="module">
  // 导入对应的 native 功能模块，其中核心模块 native-core.js 必须导入
  import NCore from './native-bridge/native-core.js'
  import NKit from './native-bridge/native-kit.js'
  var nCore = NCore()
  var nKit = NKit(nCore)
  ...
    var self = this
    nKit.selectPhoto(function (photo) {
      // 图片为 base64 数据
      self.imageBytes = photo.image
      return '获取图片成功'
    })
  ...
</script>

selectPhoto 方法的定义如下：

// native-kit.js
// 导入 native-core 核心模块
export default core => {
  return {
    selectPhoto (picker) {
      // 全局记录回调函数
      this.selectPhoto.picker = picker
      core.loadWidget('kit', this)
      // NativeKit 是 native 端注册的全局对象，camera 是对应的方法名，如此就能调用到原生客户端的方法
      core.evaluateNative('NativeKit', 'camera', function (photo) {
        // 调用之前的回调函数
        return $nativeBridgeWidget.kit.selectPhoto.picker(photo)
      })
    }
  }
}

native 系统相关的接口可以定义到 native-kit.js 中，或者模块分的粒度更细。

iOS 端使用 JavaScriptCore 实现交互，如何获取 JSContext 等不赘述，参考 iOS demo 即可。
先定义 JSExport 协议：

// HCKitJSExport.h
@protocol HCKitJSExport <JSExport>
// camera 即为 js 端调用的方法别名
JSExportAs(camera,
           - (void)cameraWithResult:(JSValue *)result
           );
@end

实现该协议：

头文件

// HCKitJSExportImpl.h
@interface HCKitJSExportImpl : NSObject <HCKitJSExport>
+ (instancetype)instance:(HCJSCoreBaseViewController *)vcContext;
@end

实现文件：

@interface HCKitJSExportImpl ()<UIImagePickerControllerDelegate, UINavigationControllerDelegate>

@property (nonatomic, weak) HCJSCoreBaseViewController *vcContext;

@property (nonatomic, strong) JSValue *imageValue;

@end
@implementation HCKitJSExportImpl

+ (instancetype)instance:(HCJSCoreBaseViewController *)vcContext {
    HCKitJSExportImpl *impl = [HCKitJSExportImpl new];
    impl.vcContext = vcContext;
    return impl;
}

- (void)cameraWithResult:(JSValue *)result {
    // 保障 oc 调 js 的回调函数和 js 在同一线程
    self.vcContext.jsThread = [NSThread currentThread];
    // result 该 JSValue 即为 js 的回调函数
    _imageValue = result;
    // ui 在主线程
    dispatch_async(dispatch_get_main_queue(), ^{
        UIImagePickerController * imagePicker = [[UIImagePickerController alloc] init];
        imagePicker.editing = YES;
        imagePicker.delegate = self;
        imagePicker.allowsEditing = YES;
        
        UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"请选择打开方式" message:nil preferredStyle:UIAlertControllerStyleActionSheet];
        
        UIAlertAction * camera = [UIAlertAction actionWithTitle:@"相机" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            imagePicker.sourceType =  UIImagePickerControllerSourceTypeCamera;
            imagePicker.modalPresentationStyle = UIModalPresentationFullScreen;
            imagePicker.cameraCaptureMode = UIImagePickerControllerCameraCaptureModePhoto;
            [self.vcContext presentViewController:imagePicker animated:YES completion:nil];
        }];
        
        UIAlertAction * photo = [UIAlertAction actionWithTitle:@"相册" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
            [self.vcContext presentViewController:imagePicker animated:YES completion:nil];
        }];
        
        UIAlertAction * cancel = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
            [self.vcContext dismissViewControllerAnimated:YES completion:nil];
        }];
        
        [alert addAction:camera];
        [alert addAction:photo];
        [alert addAction:cancel];
        
        [self.vcContext presentViewController:alert animated:YES completion:nil];
    });
}

#pragma mark - imagePickerController delegate

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info {
    
    [picker dismissViewControllerAnimated:YES completion:nil];
    UIImage * image = [info valueForKey:UIImagePickerControllerEditedImage];
    NSData *imageData = UIImagePNGRepresentation(image);
    NSString *imageBase64 = [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
    NSDictionary *dict = @{@"image": imageBase64};
    if (self.imageValue) {
        [self.vcContext executeJSValueThreadSafe:self.imageValue args:@[dict]];
    }
}

@end

Android 端使用的是 JavaScriptInterface 实现的交互。
实现类如下

public class NativeKitJSImpl {

    private static final String TAG = "NativeKitJSImpl";
    private MainActivity mActivity;

    public NativeKitJSImpl(MainActivity activity) {
        this.mActivity = activity;
    }

    @JavascriptInterface
    public void camera(final String picker) {
        mActivity.tempCallback = picker;
        new AlertDialog.Builder(mActivity)
                .setTitle("提示")
                .setMessage("选择相机或者相册")
                .setPositiveButton("相机", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        mActivity.takePhoto(new ObtainPhoto() {
                            @Override
                            public void getPhotoBase64(String image) {
                                final JSONObject jsonObject = new JSONObject();
                                try {
                                    jsonObject.put("image", image);
                                    JsInterfaceUtils.evaluateJs(mActivity.mMainWebView, picker, new ValueCallback<String>() {
                                        @Override
                                        public void onReceiveValue(String s) {
                                            Log.d(TAG, s);
                                        }
                                    }, jsonObject);
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                }
                            }
                        });
                    }
                })
                .setNegativeButton("相册", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        mActivity.selectPhoto(new ObtainPhoto() {
                            @Override
                            public void getPhotoBase64(String image) {
                                final JSONObject jsonObject = new JSONObject();
                                try {
                                    jsonObject.put("image", image);
                                    JsInterfaceUtils.evaluateJs(mActivity.mMainWebView, picker, new ValueCallback<String>() {
                                        @Override
                                        public void onReceiveValue(String s) {
                                            Log.d(TAG, s);
                                        }
                                    }, jsonObject);
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                }
                            }
                        });
                    }
                }).show();
    }

}

在 MainActivity 中添加此 JavaScriptInterface ：

mMainWebView.addJavascriptInterface(new NativeKitJSImpl(this), "NativeKit");

如此就实现 js 与 native 端（iOS，Android）的交互。

NativeKitJSImpl 类中，可以不引用具体的 Activity，如，MainActivity 。这样耦合比较紧，可以引用接口，接口中定义要调用的方法，这样只要我的 Activity 实现了接口方法，就可以传入 jsImpl 类中了。
如这样定义接口：

// 定义基础接口
public interface NativeBaseInterface {
    WebView getMainWebView();
    // 提供 Activity 上下文
    AppCompatActivity getActivityContext();
}

public interface NativeSelectPhotoInterface extends NativeBaseInterface {
    // 拍照获取图片
    public void takePhoto(ObtainPhoto obtainPhoto);
    // 相册获取图片
    public void selectPhoto(ObtainPhoto obtainPhoto);
}

NativeKitJSImpl 类中引入上下文环境，使用 WeakReference 避免循环引用。
如：

private NativeSelectPhotoInterface mActivity;
public BotsNativeKitJSImpl(WeakReference<NativeSelectPhotoInterface> weakReference) {
    this.mActivity = weakReference.get();
}

native 调用 js

原生调用的 js 方法，需要 js 端将被调用的函数注册进来。

var test = function (param) {
  self.$nativeUi.alert('test js', JSON.stringify(param), function affirm () {
    console.log('点击了确认ok')
  }, function cancel () {
    console.log('点击了取消cancel')              
  })
  return 'finished'
}
// 调用 core 核心模块的 registerJs 函数，test 是要被原生调用的函数
this.$nativeCore.registerJs('testJs', test)

iOS 端调用 js 函数的示例：

- (IBAction)testJs:(id)sender {
    NSDictionary *dict = @{@"foo":@"hello", @"bar":@YES};
    JSValue *value = [self callJsBridge:@"testJs" args:@[dict]];
    NSLog(@"测试返回值：%@", [value toString]);
}
- (JSValue *)callJsBridge:(NSString *)methodName args:(NSArray *)args {
    JSValue * jsBridge = self.appJSContext[@"$jsBridge"];
    JSValue *jsFunction = [jsBridge valueForProperty:methodName];
    return [jsFunction callWithArguments:args];
}

Android 端调用 js函数的示例：

JSONObject jsonObject = new JSONObject();
try {
    jsonObject.put("bar", "hello");
    jsonObject.put("foo", true);
    String script = "$jsBridge.testJs";
    JsInterfaceUtils.evaluateJs(mMainWebView, script, new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            Log.d(TAG, s);
        }
    }, jsonObject);
} catch (JSONException exception) {
    exception.printStackTrace();
}

vue 插件

实现 Vue 插件，在 Vue 框架中使用更加方便。
插件实现如下：

// native-vue.js
import NCore from './native-bridge/native-core.js'
import NUI from './native-bridge/native-ui.js'
import NStore from './native-bridge/native-store.js'
import NKit from './native-bridge/native-kit.js'
import NRequest from './native-bridge/native-request.js'

var jsBridge = {}
jsBridge.install = function (Vue, options) {
  var nCore = NCore()
  var nUi = NUI(nCore)
  var nStore = NStore(nCore)
  var nKit = NKit(nCore)
  var nRequest = NRequest(nCore)
  Vue.prototype.$nativeCore = nCore
  Vue.prototype.$nativeUi = nUi
  Vue.prototype.$nativeStore = nStore
  Vue.prototype.$nativeKit = nKit
  Vue.prototype.$nativeRequest = nRequest
}
export default jsBridge;

使用插件：

// 使用前引入插件
import nativeVue from './native-vue.js'
Vue.use(nativeVue);

var self = this
var params = {'id':2, 'pageNum':3, 'pageSize':10, 'keyword':'xx'}
this.$nativeRequest.get('https://api.github.com/', params, function success(response) {
  console.log(response)
  self.resultMsg = response
}, function fail(error) {
  console.log(error)
})

最后

该库我自己已经投入使用，希望大家提出宝贵意见，帮助完善程序。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 156,907评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,546评论 1赞 289
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,705评论 0赞 238
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,624评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,940评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,371评论 1赞 210
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,672评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,396评论 0赞 195
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,069评论 1赞 238
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2赞 242
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1赞 256
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,243评论 2赞 251
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,847评论 3赞 231
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2赞 259