Giter Club home page Giter Club logo

blog's People

Contributors

nwyle avatar

Watchers

 avatar  avatar

blog's Issues

App中嵌入帆软html5报表

App中嵌入帆软html5报表

帆软软件推出了html5插件以更好得让报表在移动端展现,本文讲述如何在app中集成html5报表

html5集成的优势

  1. 安卓/iOS平台可以公用代码,维护方便;
  2. 无需再引入sdk

集成时遇到的问题

目前主要碰到2种问题:超链在新的界面打开的需求;传输数据加密的需求。
App中使用WebView来展示Html5报表,如果单元格/图表上设置了超链,不做任何处理的话会在原webview上打开超链的报表,因为webview可能不是全屏或者本身没有实现前进后退按钮,那么这样的效果会很不理想。更理想的效果应该是新建一个UINavigationController(iOS)或者新开一个Activity(android)来展示超链出来的报表;
在前端和报表服务器传输数据的过程中,可能一些敏感数据(包括请求的报文和返回的结果)希望在传输的过程中加密;

解决方案

两个问题的解决方案比较类似,都是把事情移交给App去处理。例如超链,需要打开一个超链时,告诉App,需求打开一个超链,那么App就可以自由选择怎么展现;需要向服务器发送数据时,先把数据给App,让App把数据加密了再返回给Html5,再发送到服务器;得到服务器返回的加密结果后,也是先把数据给App,让App解密再给Html5。那么2个问题都涉及到Html5如何App通信,下面详细说明。

iOS部分

在iOS工程里引入第三方库WebViewJavascriptBridge;
定义UIWebView,并设置javascriptBridge,配置javascriptBridge在接收到来自html端的请求后的处理动作。这里的事件名要注意,不能随便写,一定要是我们规定好的字符串。

WebViewJavascriptBridge *bridge = [WebViewJavascriptBridge bridgeForWebView:webview]; //定义bridge 
[bridge setWebViewDelegate:self]; //设置代理   
//注册超链的处理函数,注意这里事件名一定要是hyperLinkHandler 
[bridge registerHandler:@"hyperLinkHandler" handler:^(id data, WVJBResponseCallback responseCallback) { 
    [self doHyper:data];//在这里处理超链,data是NSDictionary类型的超链信息,包括name和url 
}];    
//注册数据加密的方法,注意这里事件名一定要是dataEncrypt 
[bridge registerHandler:@"dataEncrypt" handler:^(id data, WVJBResponseCallback responseCallback) { 
    responseCallback([self doEncrypt:data]); //doEncrypt方法为加密方法,通过responseCallback回调,把加密后的结果返回给Html 
}];   
//注册数据解密的方法,注意这里事件名一定要是dataDecrypt 
[bridge registerHandler:@"dataDecrypt" handler:^(id data, WVJBResponseCallback responseCallback) { 
    responseCallback([self doDecrypt:data]); //doDecrypt方法为解密方法,通过responseCallback回调,把解密后的结果返回给Html 
}]; 
[webview loadRequest:request];   
//在这里写收到超链后需要执行的动作,这里在navigationController中重新打开了这个超链。 
- (void) doHyper:(NSDictionary *) hyperLink { 
    NSString *url = [hyperLink objectForKey:@"url"]; 
    NSString *name = [hyperLink objectForKey:@"name"]; 
    Html5ReportWebView *linkView = [[Html5ReportWebView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 600) andUrl:url]; 
    UIViewController *linkViewController = [[UIViewController alloc] init]; 
    linkViewController.title = name; 
    linkViewController.view.backgroundColor = [UIColor whiteColor]; 
    [linkViewController.view addSubview:linkView]; 
    [someNavigationController pushViewController:linkViewController withAnimate:YES]; 
} 
- (id) doDecrypt:(NSString *) str { 
    //做解密 
    return strAfterDecrypt; 
} 
- (id) doEncrypt:(NSString *) str { 
    //做加密 
    return strAfterEncrypt 
}

安卓部分

安卓的webView本身是支持addJavascriptInterface方法的,只需要在webview里绑定一个处理通信的类IFJSJavaScriptInterface(注意这里名称一定要是JSBridge,和前端html一致);
定义IFJSJavaScriptInterface里处理超链的方法,名字一定要是handleHyperLink,注意这里需要在暴露给js的方法前加上@JavascriptInterface声明。

IFJSJavaScriptInterface myJavaScriptInterface = new IFJSJavaScriptInterface(getContext());
addJavascriptInterface(myJavaScriptInterface, "JSBridge"); //名字一定要是JSBridge
@JavascriptInterface
public void handleHyperLink(final String path, final String name) {
  getLoadHandler().post(new Runnable() {
    @Override
    public void run() {
      //这里获取到url后按照需求处理页面,可以新开一个Activity展现
      Intent intent = new Intent(context, WebViewActivity.class);
      intent.putExtra("url",  path); 
      context.startActivity(intent);
    }
  });
}
@JavascriptInterface
public void dataDecrypt(final String data, final String callBack) {
    getLoadHandler().post(new Runnable() {
        @Override
        public void run() {
            //这里做解密的事情,解密完成后,通过html规定的callback回调,把结果传递回去
            webView.loadUrl("javascript:" + callBack + "('" + dataAfterDecrypt + "')");
        }
    });
}
@JavascriptInterface
public void dataEncrypt(final String data, final String callBack) {
    getLoadHandler().post(new Runnable() {
        @Override
        public void run() {
            //这里做加密的事情,加密完成后,通过html规定的callback回调,把结果传递回去
            webView.loadUrl("javascript:" + callBack + "('" + dataAfterEncrypt + "')");
        }
    });
}

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.