携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情​

​什么是原生APP，什么是web APP？ Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式)，该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

原生APP又称Native App，该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

那除了定义中提到两者的构成部分和读取数据的不同以外，还有哪些方面有区别呢？从以下几个方面简单阐述一下：

1、开发方面的区别

目前React Native开发越来越火，微信小程序是基于React Native开发的，体验接近原生APP，发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件，也能顺利发布到苹果APP store。

移动Web App

1、因为运行在移动设备的浏览器上，所以只需要一个开发项目

2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python)

3、这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

1、每一种移动操作系统都需要独立的开发项目

2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

3、需要使用各自的软件开发包，开发工具以及各自的控件

2、能力方面的区别

移动Web App只能使用有限的移动硬件设备功能。

原生App 能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等。对于这一点感触很深刻，2016年做新年H5营销小活动的时候，就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。

3、获取方法的区别

移动Web App

1、从移动设备上的浏览器访问

2、不需要安装额外的软件

3、软件更新只需要服务器就够了

4、因为现在没有什么商品或卖场提供这种App，不过一般都是嵌套在系统内部，或者内部系 统中使用

5、跨平台开发，用户不需要去卖场来下载安装App

  6、需要过度依赖网络，没有任何缓存数据

  7、任何时候都可以发布App，因为根本不需要官方卖场的审核

8、如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进(这也是优势?)

  9、所有的用户都是用同样的版本

原生App

1、直接下载到设备

2、以独立的应用程序运行(并不需要浏览器)

3、用户必须手动去下载并安装这些原生App

4、有一些商店与卖场来帮助用户寻找你的App，app store里面应有尽有。

5、原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架;

6、手机用户无法上网也可访问APP应用中以前下载的数据。

7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

8、APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。

   9、用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

App的开发技术，目前流行的两种方式，原生和Html5。原生分了安卓平台和ios平台（还有小众的黑莓、死去的塞班就不说了），H5就是Html5。

总结：

1.如果APP中出现大段文字（如新闻、攻略等），且格式比较丰富（如加粗，字体多样），那么用H5会比较方便。原因是原生开发解析json对字符串格式处理不算很好。

2.如果讲究APP反应速度（含页面切换流畅性），则选用原生开发，因为H5其本质是网页，换页时，基本要加载整个页面，就像是浏览器打开一个新页面一样，显得较慢，而原生系统则只加载变化部分。

3.如果APP对有无网络、网络优劣敏感（譬如有离线操作，在线操作），那么，基本选用原生开发，虽然H5可以做到，但是很复杂。

4.如果APP需要频繁调用硬件（摄像头、麦克风、未来的湿度检测仪等等）那么，基本选用原生开发，这样支持硬件更多，更容易扩展，且调用速度更快，H5就望尘莫及了。

5.如果APP用户常见页面频换，如（淘宝首页各种不同活动），那么用H5，维护起来更容易。

6.如果预算有限（H5开发一套可跨平台覆盖安卓、ios，黑莓、塞班），不是很讲究用户体验，不在乎加载速度，那非H5不可。

Android与H5混合开发 Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力，且具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以App和H5页面相结合就显得尤为重要。而android和H5都不可能独立存在，而是相互影响的。例如，H5页面要获取App中的用户的基本信息，App端要操作H5页面等。

    本文主要功能要点

    1.webView如何加载H5页面

    2.Android如何调用H5中的方法

    3.H5如何调用Android中的方法
   

   一、webView如何加载H5页面

   1.载入远程页面

     （1）在AndroidManifest.xml文件中添加权限

             <uses-permission android:name="android.permission.INTERNET"/>

（2）布局文件webview.xml

<WebView
    android:id="@+id/wv_webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

（3）MainActivity.javapublic class MainActivity extends AppCompatActivity {

WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.webview);

    webView = (WebView)findViewById(R.id.wv_webview);
    loadWeb();
}

public void loadWeb(){
    //String url = "https://www.baidu.com/";
    String url = "file:///android_asset/index.html";
    //此方法可以在webview中打开链接而不会跳转到外部浏览器
    webView.setWebViewClient(new WebViewClient());
    webView.loadUrl(url);
}


//重载onKeyDown的函数，使其在页面内回退,而不是直接退出程序
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
        webView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

} 2.载入本地页面

   （1）新建assets目录用来存放html页面

右键app->new->folder->assetsfolder

   （2）html页面放入assets目录

（3）修改url

 　　   webview.loadUrl(file:///android_asset/index.html);

 二、Android如何调用H5中的方法

         （1）添加webview对调用js方法的支持

//支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要 　　　　　　webView.getSettings().setJavaScriptEnabled(true); 　　　　　　//支持弹窗，也就是支持html网页弹框 　　　　　　webView.setWebChromeClient(new WebChromeClient(){ 　　　　　 public boolean onJsAlert(WebView view,String url,String message,JsResult result ){ 　　　　　　return super.onJsAlert(view,url,message,result); 　　　　　　} 　　　　　　}); 　　　 （2）调用h5无参无返回值的方法（直接调用） 　　　　　　h5方法： 　　　　　　　function show(){ 　　　　　　　　document.getElementById(“temp”).innerHTML = “Hello world”; 　　　　　　　} 　　　　　调用： 　　　　　 webView.loadUrl(“javascript:show()”); 　　　（3）调用h5有参无返回值的方法 　　　　　　　当调用H5带参数的方法时，势必要传入一个字符串，当传入固定字符串时，用单引号括起来即可；当传入变量名时，需要用转义符。 　　　　　　　h5方法：　　　　　　　　 　　　　　　　function alertMsg(message){ 　　　　　　alert(message); 　　　　　　　} 　　　　　　　调用：　　　　　　 　　　　　　　webView.loadUrl(“javascript:alertMsg(‘哈哈’)”); 　　　　　　　String content = “9880”; 　　　　　　　webView.loadUrl(“javascript:alertMsg(“”+content+””)”); 　　　　（4）调用h5有返回值方法 　　　　　　　function sum(i,j){ 　　　　　　 return i+j; 　　　　　　　} 　　　　　　调用： 　　　　　　webView.evaluateJavascript(“sum(1,2)”,new ValueCallback() { 　　　　　　@Override 　　　　　　public void onReceiveValue(Object value) { 　　　　　　Toast.makeText(MainActivity.this,”js返回结果为=”+value,Toast.LENGTH_LONG).show(); 　　　　　　} 　　　　　　}); 　　　 完整代码：

<Button
    android:id="@+id/btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Button"
    android:layout_marginBottom="12dp"
    android:layout_marginTop="8dp"/>


<WebView
    android:id="@+id/wv_webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


</WebView>

MainActivity.java public class MainActivity extends AppCompatActivity {

WebView webView;
Button btn;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.webview);

    btn = (Button)findViewById(R.id.btn);

    btn.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
            //调用H5无参无返回值方法
            webView.loadUrl("javascript:show()");
            //调用H5有参方法
            webView.loadUrl("javascript:alertMsg('哈哈')");
            String content = "9880";
            webView.loadUrl("javascript:alertMsg(\""+content+"\")");
            //调用H5有返回值方法
            webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
                @Override
                public void onReceiveValue(Object value) {
                    Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();
                }
            });
        }
    });


    webView = (WebView)findViewById(R.id.wv_webview);
    loadWeb();

}

@SuppressLint("JavascriptInterface")
public void loadWeb(){

    String url =  "file:///android_asset/index.html";
    //此方法可以在webview中打开链接而不会跳转到外部浏览器
    webView.setWebViewClient(new WebViewClient());
    webView.loadUrl(url);

    //支持弹窗，也就是支持html网页弹框
    webView.setWebChromeClient(new WebChromeClient(){
        public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
            return super.onJsAlert(view,url,message,result);
        }
    });

    //支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要
    webView.getSettings().setJavaScriptEnabled(true);
}


public boolean onKeyDown(int keyCode, KeyEvent event) {
    //重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
    if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
        webView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode,event);
}

} 三、H5如何调用Android中的方法 Android需要新建一个类，里边提供给H5操作的方法，并规定别名。 　　（1）新建一个类 　　　　 　　　　public class JsInteration { 　　　　 @JavascriptInterface 　　　　public String back() { 　　　　return “hello world”; 　　　　} 　　　　}　　 　　（2）webView添加js接口，并起别名 　　 　　　　webView.addJavascriptInterface(new JsInteration(),”android”); 　　（3）H5调用 　　　　 　　　　window.android.back(); 完整代码： index.html

测试

<button id="btn" onclick="getMsg()">按钮</button>

MainActivity.java public class MainActivity extends AppCompatActivity {

WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.webview);    

    webView = (WebView)findViewById(R.id.wv_webview);
    loadWeb();

}

@SuppressLint("JavascriptInterface")
public void loadWeb(){

    String url =  "file:///android_asset/dj_index.html";
    //此方法可以在webview中打开链接而不会跳转到外部浏览器
    webView.setWebViewClient(new WebViewClient());
    webView.loadUrl(url);

    /*
      打开js接口，参数1为本地类名；参数2为别名
     */
    webView.addJavascriptInterface(new JsInteration(),"android");
}




public  class  JsInteration  {
    @JavascriptInterface//一定要写，不然h5调不到这个方法
    public  String  back() {
        return "hello world";
    }
}


public boolean onKeyDown(int keyCode, KeyEvent event) {
    //重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
    if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
        webView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode,event);
}

}

​