小结一下最近工作中的Hybird编程（1）

最新推荐文章于 2024-10-31 11:24:10 发布

agdsdl

最新推荐文章于 2024-10-31 11:24:10 发布

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏： web IOS开发 hybird 文章标签： IOS Web hybird javascript OC

本文链接：https://blog.youkuaiyun.com/agdsdl/article/details/46496701

IOS开发同时被 3 个专栏收录

5 篇文章

订阅专栏

hybird

3 篇文章

订阅专栏

web

2 篇文章

订阅专栏

本文详细介绍了使用Hybird编程方式开发iOS抢红包页面的过程，包括HTML、CSS布局、JavaScript交互及Objective-C与JavaScript的双向调用等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小结一下最近工作中的Hybird编程（1）

作为一个IOS开发者，要使用Hybird编程，必须了解一下H5，CSS，javascript。
这里，和这里有免费的，还不错的学习教程。
以开发一个流行的抢红包页面为例，
我们大概要做这么个效果：
最终效果
1. 先从其他网站上扒一个页面框架：
红包页面packet.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>抢红包</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link href="m-style.css" rel="stylesheet" />
        <script src="../vendor/jquery.js"></script>
    </head>
    <body>

    </body>
    </html>

同时在packet.html目录下新建空文件”m-style.css”.
2. 在body段添加以下内容：

    <body>
      <div class="topbk">
            <img src="img/packet_bg@2x.png" width="100%">
            <p class="top_title">红包，先抢先得！</p>
          <div class="packet_long">
            <div id="head_icon"></div>
            <div id="scramble_button">光速抢</div>
            <p id="packet_history">看看大家的手气></p>
          </div> 
      </div>
        <div class="packet_rules">
        <p>
          红包规则： 
        </p>
        <p>
          1.手机绑定用户专享； <br>
          2.每个红包，每个账户限领一次；
        </p>
      </div>
        <script src="app.js"></script>
    </body>

3.在m-style.css中键入以下内容：

    html {
        height: 100%;
    }
    body {
        min-width: 320px;
        margin: 0;padding: 0;
        background-color:#FCECD3;
    }

    .topbk{
        text-align: center;
    }

    .top_title{
        position: absolute;
        top: 0;
        width: 100%;
        font-size:20px;
        color:#E44A4A;
    }
    .packet_long{
        position: absolute;
        top: 50px;
        left:50%;
        background: url(img/packet_long@2x.png) no-repeat;
        background-size: 100% 100%;
        width:234px;
        height:260px;
        margin-left:-127px;
        font-size:15px;
    }

    #scramble_button{
        position: absolute;

        background: url(img/packet_button@2x.png) no-repeat;
        background-size: 100% 100%;

        top:150px;
        left:50%;
        width:180px;
        height:27px;
        margin-left:-40%;
        padding-top:10px;
    }

    #scramble_button:active{
        background: url(img/packet_button_d@2x.png) no-repeat;
        background-size: 100% 100%;
    }

    #packet_history{
        position: absolute;
        bottom:20px;
        width:100%;
        margin-left:-50%;
        left:50%;
        font-size:12px;
        color:#FF0;
    }

    #head_icon{
        position: absolute;
        top:30px;
        left:50%;
        width:71px;
        height:71px;
        border-radius: 50%;
        background-image: url(img/head_icon.jpg);
        background-repeat:no-repeat;
        background-size: 100% 100%;
        margin-left:-35px;
        z-index: 100;
    }

    .packet_rules{
        font-size:12px;
        margin-left:30px;
        margin-right:20px;
        margin-top:20px;
    }

简单解释：
html文件中定义了界面元素的内容、层级关系等，css文件定义了界面元素的属性：位置、颜色、大小等。
topbk层本身没有定义大小和位置，然而中包含了一个image：

     <div class="topbk">
            <img src="img/packet_bg@2x.png" width="100%">

使得topbk层大小随着img而变，这是我们想要的效果。
topbk层下属的其他层都是采用绝对定位，也就是直接指定了上下左右宽高属性。当然这些属性都是相对于父元素，也就是topbk的。
考虑到iPhone的Retina屏，所有的图片尺寸都会缩小一半使用。
待会我们js代码会用到jquery，因此要引入jquery：

        <script src="../vendor/jquery.js"></script>

记得下载jquery到vendor目录。
当然也有mobile端的jquery-like库叫Zepto可以使用,还有jquery mobile, 不过暂时还没有研究。
在body的最后，有：

        <script src="app.js"></script>

我们将主要的js代码都单独存放在app.js中，在body的最后引入，不会阻塞页面的渲染。
4. 添加功能
现在界面已经搞定。我希望在用户点击“光速抢”的时候能真正执行抢红包的动作。
一般这样的功能都是需要和服务器交互，由服务器判断是否抢成功，抢到多少，然后返回结果。
说起来复杂，写起来简单，其实就是一个ajax请求：

    $.ajax({
        url: '...',
        type: 'POST',
        dataType: 'json',
        data: {pkgId: '1'},
        success:function(data){
            //解析返回数据
        }
        error:function(request, description, exception) {

        }
    })

然而我们的客户端为了安全考虑，不在网络上传输明文数据，因此native会给每个请求加密，同时解密服务器返回的数据。这个功能native已经做好了，我们这里直接调用native的功能。
然而这又涉及到OC和javascript的相互调用。
5. OC和javascript的相互调用
做一个功能之前，现在网上搜索一番。最后结论：
OC调用javascript是通过

    [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

javascript调用OC一般是通过在页面中发起一个特定的url请求，然后在OC中响应

    -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

在响应中判断此url，并做相应的动作。
这一套机制github上有套开源库已经实现，就不多述了。
然而我们想要更完善的封装，因此我们自己实现了这个功能, 文件nativeBridge.js:

    var nativeBridge = {
        asyncRequest:function(paramJson, successedCallback, failedCallback){
            jscall("asyncRequest", paramJson, successedCallback, failedCallback);
        }
    };

定义一个OC-js桥，所有的交换函数都在其中定义。
jscall会将参数组织到自定义的url里，然后新建一个iframe，将iframe的url设置为我们自定义的url：

    function jscall_execute(url)
    {
        var iframe = document.createElement("IFRAME");
        iframe.setAttribute("src", url);
        document.documentElement.appendChild(iframe);
        iframe.parentNode.removeChild(iframe);
        iframe = null;
    }

    function jscall(functionName){
        var url = "mybridgescheme://"+functionName;
        for (var i = 1; i < arguments.length; i++) {
            url += "@BDG@"+arguments[i];
        };
        jscall_execute(url);
    };

这样OC端的shouldStartLoadWithRequest里，就会收到我们自定义的url请求。
6. 现在回到我们的功能：响应用户点击“光速抢”。
添加响应事件：

    $("#scramble_button").click(function(event) {
        alert("hah!");
    });

刷新页面，点击按钮，页面弹出了“hah！”，works well.
现在将测试的alert去掉，加上真正的请求代码：

    function grabSuccessedCallback (respData) {
        alert(respData);
    }
    function grabFailCallback (errorMsg) {
        alert(errorMsg);
    }
    $("#scramble_button").click(function(event) {
        nativeBridge.asyncRequest('{"action":"Grab", "pkgId":1}', "grabSuccessedCallback", "grabFailCallback");
    });

由于native端功能尚未实现，我们这样来测试：

    var nativeBridge = {
        asyncRequest:function(paramJson, successedCallback, failedCallback){
            //jscall("asyncRequest", paramJson, successedCallback, failedCallback);
           var js = successedCallback + '("hah!")';
              eval(js);
        }
    };

同时在app.js的最上端引入nativeBridge.js:

    document.write('<script src="nativeBridge.js"></script>');

刷新页面，点击按钮，页面弹出了“hah！”，great.
好了，撤回测试代码。这样我们web端基本完成，现在来实现native端功能。
7. 实现native端
新建一个native工程hybirdDemo，选择单视图模板。
将nativeBridge.js拖到工程里。
在项目中新建一个view controller名为WebViewController.
在storyboard中添加navigation controller，
添加一个view controller，将其类设置为WebViewController, 并在其上添加一个web view：
storyboard结构
在WebViewController中实现web的delegate：

    - (void)webViewDidFinishLoad:(UIWebView *)webView {
        if(![[webView stringByEvaluatingJavaScriptFromString:@"typeof nativeBridge == 'object'"] isEqualToString:@"true"]){
            NSBundle *bundle = [NSBundle mainBundle];
            NSString *filePath = [bundle pathForResource:@"nativeBridge" ofType:@"js"];
            NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
            [webView stringByEvaluatingJavaScriptFromString:js];
        }

        NSString *theTitle = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
        if([theTitle length] > 0)
        {
            self.title = theTitle;
        }
    }

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
        if ([[[request URL] scheme] isEqualToString:@"mybridgescheme"]) {
            NSString *requestContent = [[request URL] resourceSpecifier];
            NSString *functionAndArgs = [requestContent substringFromIndex:2]; // remove leading "//"
            functionAndArgs = [functionAndArgs stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            NSArray *funArgArray = [functionAndArgs componentsSeparatedByString:@"@BDG@"];

            if ([[funArgArray objectAtIndex:0] isEqualToString:@"asyncRequest"]) {
                NSString* paramJson = [funArgArray objectAtIndex:1];
                NSString* successedCallback = [funArgArray objectAtIndex:2];
                NSString* failedCallback = [funArgArray objectAtIndex:3];

                // for test
                NSString *jsStr = [NSString stringWithFormat:@"%@(%@)", successedCallback, @"\"hah from native!\""];
                int after = 2;//s
                dispatch_time_t trigerTime = dispatch_time(DISPATCH_TIME_NOW, after * NSEC_PER_SEC);
                dispatch_after(trigerTime, dispatch_get_main_queue(), ^(void){
                    NSString *ret = [self.webView stringByEvaluatingJavaScriptFromString:jsStr];
                });
            }
        }
    }

然而我们的webview从哪里读取网页呢？有两种思路：
- 一种是将制作好的网页打包到xcode项目中，然后webview可以从本地加载。
- 一种是webview加载一个http url，通过网络加载。这种方式网页上的改动可以即时生效，方便调试，我们选用这种方式。
这就需要我们在本地搭建一个web服务器。在这里我选用的是开源的apache-tomcat。到其官网下载最新安装包，解压后运行bin/startup.sh就会启动tomcat服务器。如果之前没有配置过java的话，你可能需要配置JAVA_HOME环境变量：

    export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk***/Contents/Home

将我们的网页拷贝到webapps中，这样我们的网页就可以通过url远程访问。本例中我们的地址是http://127.0.0.1:8080/wap/test_packet/packet.html
在viewDidLoad中添加以下代码：
self.webView.delegate = self;
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@”http://127.0.0.1:8080/wap/test_packet/packet.html“]]];
编译运行，打开页面，点击“光速抢”，等待2秒后页面弹出“hah from native!”, that’s great!
等等…页面好像hang住了…
在网上搜索一番，发现从OC回调到js时，不能立即弹出alert，延时0秒弹出即可：

        setTimeout(function() {
            alert(respData);
        }, 0);

问题解决。
8. 调试
纯web页面用chrome调试最方便。
webview中的页面用safari调试即可。
- 在safari选项中勾选“显示开发菜单”。
- 在手机或模拟器打开web页面的时候，在开发菜单中选择调试的页面。
- 调试。。。
9. 一些坑
- stringByEvaluatingJavaScriptFromString要放在主线程调用。
- 从OC回调到js时，不能立即弹出alert，哪怕延时0秒弹出都行。

到这里我们基本完成了一个完整的hybird应用开发。其中涉及到很多琐碎的知识点，同时也遇到了相当多的坑。即便如此，我们还有许多的问题未解决：
- js的模块引用
- OC回调js匿名函数（block）的处理
…
示例中的代码可以到这里下载。