混合开发模式介绍

2,582 阅读5分钟

1. 开发模式介绍

利用原生+h5模式开发app也有一段时间了,写篇文章来介绍一下现在的开发模式。由于刚刚毕业半年接触前端也没有多久,很多也是自己摸索出来的,不足之处还请多多指正。

首先为了能够更加快捷高效的开发,我们当时决定使用把js的资源包直接放在本地让webview去加载的模式,而不是放在服务端去让webview去加载。

那就存在了一个问题,每次开发完js后,都要把编译后的文件手动的copy到android和ios的资源目录里,那岂不是非常的麻烦。正好git有子模块的概念,能够很好的解决这个问题。

先介绍一下git的子模块,子模块就是为了解决能单独处理多个项目,并拥有共同的模块的问题。首先这多个项目每个项目都是一个仓库,然后子模块也是一个单独的仓库,这个单独的仓库能够被多个项目共享。这样的话我们就可以把h5编译后的文件作为一个子模块,让h5、android、ios都填加这个子模块。就可以只需在h5代码更新后,编译一下,然后将子模块推送到远端,android和ios直接更新一下子模块就可以实现实时的更新h5的资源包了,而不用我们每次更新了h5的代码,还要每次去手动的复制粘贴了。

这里用个图来表示一下

2. js与原生交互处理

交互处理虽然网上一堆的资料介绍,不过还是在此记录一下。

  • js与android webview的交互

    android 加载本地的h5资源

    //首先webview启用js支持
    webView.getSettings().setJavaScriptEnabled(true);
    // 然后assets目录下面的加载html (android 这里将h5编译后的资源包放在了assets/h5目录下)
    webView.loadUrl("file:///android_asset/h5/index.html");
    //webview需要添加js的接口协议  此处的phone用来指定js的实例名称
    webView.addJavascriptInterface(MainActivity.this, "phone");
    

    android调用js方法

    js方法

    //前端采用了vue.js 发现只有将方法挂载在全局的window上才能被调用,不知道还有没有别的方法
    window.hello = function () {
    }
    window.helloParam = function (value) {
    }
    

    android 调用js方法

    //调用无参的js hello方法
    webView.loadUrl("javascript:hello()");
    //调用有参的js helloParam方法
    String hello = "hello!!!";
    webView.loadUrl("javascript:helloParam('" + hello + "')");
    //注意 如何参数是boolean或者 int型时 需要把单引号去掉 
    webView.loadUrl("javascript:helloParam(" + true + ")");
    

    js调用android方法

    android 方法

    //在方法上添加 @JavascriptInterface就能被调用了 但是需要注意 涉及ui处理的部分需要回到主线程操作
    //无参无返回方法
    @JavascriptInterface
    public void startFunction() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "hello!", Toast.LENGTH_SHORT).show();
            }
        });
    }
    
    //无参有返回方法
    @JavascriptInterface
    public void startFunction() {
        return "hello!"
    }
    
    //有参有返回方法 建议参数为某个模型时都转换成jsonString来传值
    @JavascriptInterface
    public void startFunction(final String text) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
            }
        });
        return "hello!"
    }
    

    js调用android方法

    //此处的phone需要和移动端定的js的实例名称保持一致
    window.phone.startFunction()
    window.phone.startFunction('hello!!')
    
  • js与ios UIWebview的交互

    ios UIWebview加载本地的h5资源

    //首先在ios的项目目录下新建一个h5的文件用来存放h5的资源包,然后在xcode中通过Add Files to “ProjectName”的方式导入进来
    //加载h5目录下的index.html
    let path = Bundle.main.path(forResource: "index", ofType:"html", inDirectory:"h5")
    let url = URL(fileURLWithPath:path!)
    let request = URLRequest(url:url)
    let jsContext = mWebview.value(forKeyPath: "documentView.webView.mainFrame.javaScriptContext") as? JSContext
    //此处的phone用来指定js的实例名称  JavaScriptMethod在下文中实现
    jsContext?.setObject(JavaScriptMethod(holderController:self), forKeyedSubscript: "phone" as NSCopying & NSObjectProtocol)
    mWebview.loadRequest(request)
    

    ios UIWebview调用js方法

    self.mWebview.stringByEvaluatingJavaScript(from: "helloParam('Hello Js!')")
    

    js调用 ios UIWebview方法

    ios UIWebview方法

    @objc protocol JavaScriptMethodProtocol: JSExport {
      //无参无返回方法
        func startFunction()
      //无参有返回方法
        func startFunction()->String
      //有参又返回方法  注意:此处不要漏写下滑线
        func startFunction(_ param: String)
    }
    
    class JavaScriptMethod : NSObject, JavaScriptMethodProtocol {
        private var holderController: ViewController?
        
        init(holderController:ViewController) {
            super.init()
            self.holderController = holderController
        }
        
        func startFunction() {
             NSLog("hello!");
        }
      
        func startFunction() -> String{
            return "hello!"
        }
        
        func startFunction(_ param: String) {
            NSLog(param);
        }   
    }
    
    

    js调用

    //此处的phone需要和移动端定的js的实例名称保持一致
    window.phone.startFunction()
    window.phone.startFunction('hello!!')
    

3. 子模块详细操作说明

  1. 首先在github上新建一个子模块的仓库

  2. 为h5,ios,android的项目都添加这个子模块(h5将编译文件目录作为子模块的路径)

    git submodule add <repository>子模块仓库地址 <path>子模块的路径
    
  3. h5开发完后,将编译后的文件提交的子模块仓库的远端 可以使用命令方式提交或者使用SourceTree等工具来辅助提交

    //例如编译后文件在dist目录下
    cd dist 
    git add --all
    git commit -m"h5更新"
    git push
    
  4. android和ios本地更新子模块, 然后推送至远端 或者使用SourceTree等工具。。。

    git submodule foreach git pull origin master
    git add --all
    git commit -m"h5更新"
    git push
    
  5. jenkins配置自动更新子模块

    看完上述操作有些朋友可能会觉得有些繁琐。每次h5更新,我都要在android和ios上去更新子模块,那岂不是很麻烦。比如我本地原生代码没有任何的改动,但是h5的子模块更新了,还要在android和ios上都去更新一下。那么在jenkins上配置如下命令,就可以保证每次编译出来的安装包,子模块都是最新的了

    git submodule init
    git submodule update
    git submodule foreach git pull origin master
    

其实混合App的开发场景应该并不多见,我们公司也是在需要开发较为复杂的电商首页,和在需要使用大量的图表(为了android和ios样式统一,选用了echarts图表库)的场景时才使用了这样的模式开发。