混合开发

一、原生语言：

苹果手机：ios系统，由swift和c++/object-c语言编写，后缀名为 ipa（ios开发的安装包的后缀名） swift语言是一种开源的语言

安卓手机：android系统，由java（android）语言编写，后缀名为apk
开源的
wp手机：windowphone系统，由c#语言编写， 一般说到混合开发不考虑这个版本

二、混合开发：

原生语言开发+js的开发

缘由：

js无法调动系统的原生功能（拍照、短信、打电话、通讯录），但是原生（android、ios、wp）可以

原生有很大的适配问题（特别是android），js可以很好的解决这个问题

术语：

hybridapp ---- js+ android/ios写的 — 可以安装至手机应用

webapp m站 touch端项目 手机网站 ---- 纯js写的 – 浏览器上访问的

nativeapp – 纯android/ios编写的程序 — 可以安装至手机应用

三、android + js的开发模式

准备工具：

java jdk — 前端的node，没有node，name你就玩不了vue以及react等

链接：https://pan.baidu.com/s/1_LsDWTLTa7Hnj3PtRFzkGg
提取码：b2ke

jdk配置文档

https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html

android-studio

intellij编辑器插件扩展而来（intellij在13-14年之前特别火爆，直到现在还被很多人青睐）

链接：https://pan.baidu.com/s/1bFXhgpC2XNJqLdZsmyBLtg
提取码：rzv6

安装教程

https://www.runoob.com/android/android-studio-install.html

数据线

四、代码分析

代码展示为java文件夹下为控制文件，相当于js文件，res文件相当于资源文件以及布局文件

如需需要给页面添加一个网页

wv.loadUrl("file:///android_asset/index.html");   ///加载本地的页面       ----- 代码在手机，更新需要下载替换
wv.loadUrl("https://h5.m.taobao.com/#index"); /// 加载远程的页面  -----  更新无需下载

如果现实无网络，需要添加权限

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

默认的webviw浏览器是纯洁的，不支持js

/**
* webView目前还不具备真正浏览器的功能
*/
webView.getSettings().setJavaScriptEnabled(true);//相当于google浏览器中的内容设置中的js的设置

//默认情况下，点击webview中的链接，会使用Android系统自带的浏览器打开这个链接。

//如果希望点击链接继续在我们自己的Browser中响应，必须覆盖 webview的WebViewClient对象：

//新建两个对象MWebViewClient 和 MWebChromeClient，他们分别继承自WebViewClient和WebChromeClient
/* Android WebView 做为承载网页的载体控件，他在网页显示的过程中会产生一些事件，
并回调给我们的应用程序，以便我们在网页加载过程中做应用程序想处理的事情。
比如说客户端需要显示网页加载的进度、网页加载发生错误等等事件。

WebView提供两个事件回调类给应用层，分别为WebViewClient,WebChromeClient开发者可以继承这两个类，接手相应事件处理。

WebViewClient 主要提供网页加载各个阶段的通知，比如网页开始加载onPageStarted，网页结束加载onPageFinished等；
WebChromeClient主要提供网页加载过程中提供的数据内容，比如返回网页的title,favicon等。*/

//处理页面加载各个阶段
MWebViewClient mWebViewClient = new MWebViewClient(webView, getApplicationContext());
webView.setWebViewClient(mWebViewClient);
//提供网页加载过程中提供的数据内容
MWebChromeClient mWebChromeClient = new MWebChromeClient( getApplicationContext());
webView.setWebChromeClient(mWebChromeClient);

MWebViewClient.java
public class MWebViewClient extends WebViewClient {
     private WebView webView;
      private Context context;
      
      public MWebViewClient(WebView webView) {
        super();
        this.webView = webView;
      }

      public MWebViewClient(WebView webView, Context context) {
        super();
        this.webView = webView;
        this.context = context;
      }

   
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
        webView.loadUrl(url);
        return true;
      }
      
      @Override
      public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
      }
      
      @Override
      public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
      }
      
   
      @Override
      public void onLoadResource(WebView view, String url) {
        super.onLoadResource(view, url);
      }
  
      @Override
      public void onReceivedSslError(WebView view,
          SslErrorHandler handler, SslError error) {
        super.onReceivedSslError(view, handler, error);
      }
}

MWebChromeClient.java

public class MWebChromeClient extends WebChromeClient {
    private Context context;
      
      public MWebChromeClient(Context context) {
        super();
        this.context = context;
      }

      @Override
      public boolean onJsAlert(WebView view, String url, String message,
          JsResult result) {
        return super.onJsAlert(view, url, message, result);
      }

      @Override
      public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
      }
      @Override
      public boolean onJsConfirm(WebView view, String url, String message,
          JsResult result) {
        return super.onJsConfirm(view, url, message, result);
      }
      @Override
      public boolean onJsPrompt(WebView view, String url, String message,
          String defaultValue, JsPromptResult result) {
        return super.onJsPrompt(view, url, message, defaultValue, result);
      }
}

假设你现在需要调用系统的拍照功能，android工程师会为你提供一个对象和他对应的方法
WebViewTakePhoto为对象，takePhoto为拍照的方法，

webView.addJavascriptInterface(new MJavascriptInterface1(getApplicationContext()), "WebViewTakePhoto");

通过这样的形式将地址传递给前端，testParams方法由前端定义

webView.loadUrl(“javascript:testParams(http://img4.imgtn.bdimg.com/it/u=103061881,2842093305&fm=26&gp=0.jpg’)”);

MJavascriptInterface1
class MJavascriptInterface1{
    private Context context;


    public MJavascriptInterface1(Context context) {
        // TODO Auto-generated constructor stub
        this.context = context;
    }
    @JavascriptInterface
    public void takePhoto(){
        Toast.makeText(context, "拍照", Toast.LENGTH_SHORT).show();
        //android调用拍照功能

//            webView.loadUrl("javascript:testParams('http://img4.imgtn.bdimg.com/it/u=103061881,2842093305&fm=26&gp=0.jpg')");
    }

}

前端调用拍照方法，在自己的写的触发函数中

window.WebViewTakePhoto.takePhoto()

说：
webview — android、ios的组件 ---- js运行的环境

进行配置

---  支持js

---  链接本组件内跳转

根据需求先写页面，假设你的一个按钮需要调用系统的功能，在你的按钮事件中调用由android工程师提供的相对应的对象和其方法即可，同时前端也会定义一些方法，但是前端自己不调用，android会根据webview的loadUrl方法进行调用，并且传参（根据需求看）