混合开发模式介绍

时间 2019-12-08 标签混合开发模式介绍

1. 开发模式介绍

利用原生+h5模式开发app也有一段时间了，写篇文章来介绍一下如今的开发模式。因为刚刚毕业半年接触前端也没有多久，不少也是本身摸索出来的，不足之处还请多多指正。javascript

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

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

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

这里用个图来表示一下java

2. js与原生交互处理

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

js与android webview的交互ios

android 加载本地的h5资源git

//首先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方法github

js方法web

//前端采用了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图表库）的场景时才使用了这样的模式开发。