混合开发模式介绍

1. 开发模式介绍

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

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

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

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

这里用个图来表示一下

WX20180112-140744@2x.png

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. 子模块详细操作说明

首先在github上新建一个子模块的仓库
为h5，ios，android的项目都添加这个子模块（h5将编译文件目录作为子模块的路径）
```
git submodule add <repository>子模块仓库地址 <path>子模块的路径
```
h5开发完后，将编译后的文件提交的子模块仓库的远端可以使用命令方式提交或者使用SourceTree等工具来辅助提交
```
//例如编译后文件在dist目录下
cd dist 
git add --all
git commit -m"h5更新"
git push
```
android和ios本地更新子模块, 然后推送至远端或者使用SourceTree等工具。。。
```
git submodule foreach git pull origin master
git add --all
git commit -m"h5更新"
git push
```
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图表库）的场景时才使用了这样的模式开发。