Coder Social home page Coder Social logo

carlsq / fmwebviewjavascriptbridge Goto Github PK

View Code? Open in Web Editor NEW
30.0 4.0 4.0 157 KB

FMWebViewJavascriptBridge inspired by WebViewJavascripBridge and react native

License: MIT License

Objective-C 80.42% Ruby 2.51% HTML 6.69% JavaScript 10.38%
jsbridge ios webviewjavascriptbridge react-native bridge androidjsbridge javascriptinterface

fmwebviewjavascriptbridge's Introduction

#FMWebViewJavascriptBridge

CI Status Version License Platform

简介

FMWebViewJavascriptBridge inspired by react native 是一个轻量级的JavascriptBridge,只支持WKWebView iOS 8.0之后,与android原生调用保持一致。 image

how to Use

自定义 JavascriptInterface

  • 自定义 JavascriptInterface 类
  • 在暴露的接口前添加FM_EXPORT_METHOD宏
  • 支持的参数可以是 nil NSNull NSString NSNumber NSDictionary NSArray NSDate char int double BOOL
  • 同时支持返回值给Javascrip的回调, 回调的类型FMCallBack,支持参数同上
@implementation JavascriptInterface

FM_EXPORT_METHOD(@selector(push:))
- (void)push:(NSUInteger)one {
  [self.viewController.navigationController
      pushViewController:[WKViewController new]
                animated:YES];
  NSLog(@"test push%ld", (unsigned long)one);
}

FM_EXPORT_METHOD(@selector(pop:))
- (void)pop:(NSString *)testArray {
  [self.viewController.navigationController popViewControllerAnimated:YES];
  NSLog(@"pop array %@", testArray);
}

FM_EXPORT_METHOD(@selector(setNavTitle:response:))
- (void)setNavTitle:(NSDictionary *)userInfo response:(FMCallBack)callBack {
  self.viewController.title = userInfo[@"name"];
  callBack(@{@"name":@"carlSQ",@"age":@"26"});
}

添加接口给javascript调用

用 FMWKWebViewBridge 类中的接口addJavascriptInterface 添加接口道javascrip层

_webViewBridge = [FMWKWebViewBridge wkwebViewBridge:self.webView];
[_webViewBridge addJavascriptInterface:[JavascriptInterface new] withName:@"JavascripInterface"];

js层调用

与android原生调用保持一致,addJavascriptInterface 会在js层注入一个对象,名字是addJavascriptInterface 中设置的名字


<script>

JavascriptInterface.setNavTitle({"name" : "carl", age:"18"},function(responseData) {
                                     setNavTitle.innerHTML = "name:"+responseData.name +"  age:" + responseData.age;
                                     })

</script>

#Usage

pod 'FMWebViewJavascriptBridge', '~> 3.0.0'

Author

carl Shen

License

FMWebViewJavascriptBridge is available under the MIT license. See the LICENSE file for more info.

fmwebviewjavascriptbridge's People

Contributors

carlsq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

fmwebviewjavascriptbridge's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.