参考文章：

【手把手】带你撸一个安卓壳子

Android：最全面的 Webview 详解

Android webview 常用配置

web前端的小伙伴们大家好，说起APP混合开发，大家首先想到的可能就是类似Cordova的库，可以让我们不写一行安卓代码，就轻松地实现原生APP的一些常用功能，但是对于一些特别的"需求"我们就无能为力了。所以为了提高我们的知识储备，我觉得还是有必要学习一波安卓的知识的。下面就由我带着大家手把手撸一个安卓的壳子出来，由于本人也是第一次写安卓的东西，难免会有些不对的地方，希望各路大神见怪莫怪。

1、下载Android Studio
官网下载地址，开发安卓貌似就只有这一个编辑器可用了，这个IDE风格和webStorm的风格一模一样，应该是一家公司的产品，这个没有深究过。安装过程在此就不详细说明了，有需要的可以自行百度。

2、创建一个新项目
打开IDE，点击 Start a new Android Studio project 创建一个新项目 

填写下面的信息(APP名称和域名建议和我填写一样，这样下面就不用改了^_^)，点击next

选择APP支持的安卓最低版本，点击next

然后选择一个空白页，点击next

这里直接默认，最后点击 Finish

3、启动项目
至此，我的第一个APP已经创建完成，怎么运行它呢？有两种运行方式，一种是模拟器、一种真机。我建议使用真机，模拟器可能会出现一些意想不到的问题。

选择运行模式

第一个代表模拟器，第二个是真机，这里我们选择真机 USB Device，点击OK

接下来把我们的手机通过USB连接电脑，注意手机要打开 USB调试 ，简单说一下手机怎么打开 USB调试，以华为畅玩9为例，首先我们要打开手机的开发者模式，依次点击 设置>系统>关于手机>连续点击版本号(考验手速的时候到了!)   直到出现 "打开手机开发者模式"字样的提示，然后我们再点击 设置>系统>开发者选项>USB调试开关打开。

然后点击下面的绿色三角，运行程序，开始运行的时候手机上可能会弹出来一次 允许调试的授权框 ，我们点击允许。

大功告成！我们可以看到APP已经成功安装到手机上了

4、修改APP名称和图标
我们可以看到默认的APP图标和名称，作为一名优秀的前端开发，简直不能忍

修改图标：选择 File>New>Image Asset

Name的值不要改，Asset Type 选择 Image，path选择我们的图标路径，再通过 Resize 调整图片到合适大小，点击next。

我们看到了很多红色，不用鸟他，直接Finish

修改名称：打开 app>res>values>strings.xml  修改其中的 app_name 的值

修改完毕，我们再重新运行一下程序，哈哈，非常完美！

5、创建 webView，并去掉标题栏
既然是混合开发，webview是必须的，理论上我们的Android架子只需要一个页面放置webview即可。
首先我们要允许webview联网,打开 app>manifests>AndroidManifest.xml，在 application 上面添加一行：

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

打开  app>res>layout>activity_main.xml 把默认的 TextView 控件删掉，加上webview控件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http:///apk/res/android"
     xmlns:app="http:///apk/res-auto"
     xmlns:tools="http:///tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity">
  
     <WebView  xmlns:android="http:///apk/res/android"
         android:id="@+id/webview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"/>
  
 </android.support.constraint.ConstraintLayout>


我们发现还有一个默认的标题，这个也是不需要的，打开 app>manifests>AndroidManifest.xml，找到android:theme="@style/AppTheme"  改成下面的

android:theme="@style/Theme.AppCompat.Light.NoActionBar"
再次运行一下，标题栏没有了，但是白屏，那是因为我们还没有给webview链接。

6、webview的一些基本配置
*设置链接：

我们修改 MainActivity.java 文件中的MainActivity类，如下，（如果某个单词出现红色，说明没有引入包，把鼠标定位到红色单词上，按住 Alt + Enter 按照提示引入相应的包即可，之后不再重复说明此问题。）
myWebView.loadUrl( "https://zhengshaoguo.com/static/app/" ); 这行就是webview要加载的地址，我这里放的是一个服务器的地址，当然也可以放本地的，本地怎么放得这里就不做说明了。

public class MainActivity extends AppCompatActivity {
     private WebView myWebView = null;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate( savedInstanceState );
         setContentView( R.layout.activity_main );
  
         myWebView = (WebView) findViewById( .webview );
         WebSettings webSettings = myWebView.getSettings();
         myWebView.loadUrl( "https://zhengshaoguo.com/static/app/" );
     }
 }


服务器上对应的HTML文件如下：js相信大家都看的懂，就不解释了。

<!DOCTYPE html>
 <html>
    <head>
       <meta charset="utf-8">
       <title>Carson</title>  
       <script>
          function callAndroid(){
             document.getElementById("output").innerHTML="欢迎来到单身狗联盟";
          }
       </script>
    </head>
    <body>
       <button type="button" id="button1" οnclick="callAndroid()">test</button>
       <div id="output"></div>
    </body>
 </html>