混合程式設計即是把HTML5應用程式嵌入android 原生容器裡面。
首先安裝好anddroid studio軟體配置好環境變數及下載好相關外掛。具體安裝步驟可以參考這篇文章：https://www.cnblogs.com/zhangqie/p/6222636.html。

1、建立android 原生容器
步驟1：開啟android studio 軟體，選擇 Start a new Android Studio project 選項 會跳出步驟2的圖片

步驟2：這裡可以修改Application name、Company domain、Project location、Package name ，根據自己的需求更改，然後點選最下邊的Next按鈕

步驟3：因為需要一個android原生容器，並不需要附帶內容，所以這裡選擇Empty Activity ,然後點選最下邊的 Next按鈕

步驟4：可以更改Activity Name 和Layout Name,這裡我選擇預設。點選最下邊的finish按鈕。

步驟5：跳出的頁面會直接顯示Activity_main.xml 和MainActivity.java 的程式碼.

步驟6：點選左上角的有個android小人的下拉框，選擇project。

步驟7：找到APP目錄下的src\main 下的 AndroidManifest.xml

通過步驟1到7，一個空的android 容器就建立好了

2. 配置webview 及相關許可權
上面開啟有三個檔案：
MainActivity.java :
activity_main.xml: 定義介面的佈局，相關元件的樣式
AndroidManifest.xml:用於配置許可權、app的資訊
2.1：新增使用網路許可權，配置軟體版本
設定軟體版本號的程式碼：

     android:versionCode="1"
     android:versionName="1.0"

設定 sdkAPI的程式碼，這個需要android sd版本和API Level 相應。對應關係參考下表：

我設定的模擬器（後文會講）的code name 用Marshmallow 6.0 所以設定為23.程式碼如下：

     <uses-sdk android:minSdkVersion="23" />

配置許可權的程式碼：

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

整體程式碼：

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.xxx.myapplication"
    android:versionCode="1"
    android:versionName="1.0"
    >
    <uses-sdk android:minSdkVersion="23" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

2.2 WebView
在MainActivity.java 裡面生成WebView 元件，建立Webview元件有兩種方式，這裡我只用一種。
整體程式碼如下：

package com.example.xxx.myapplication;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;//支援WebView 的標頭檔案
import android.webkit.WebViewClient;//支援WebViewClient 的標頭檔案


public class MainActivity extends AppCompatActivity {
    private WebView webview; //定義一個WebView的變數
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview =(WebView)findViewById(R.id.webview);//通過findViewById關聯activity_main.xml 定義的元件，所以之後需要在activity_main.xml 定義一個webview的元件
         //設定WebView 屬性，能夠執行Javascript指令碼
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("http://www.baidu.com");
        //WebViewClient類 作用：處理各種通知 和請求事件
        webview.setWebViewClient(new HelloWebViewClient());
    }
    //Web檢視
    private class HelloWebViewClient extends WebViewClient {
        @Override
        //這個方法，在web頁面開啟連結時，自動呼叫android自帶的瀏覽器開啟連結
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

在activity_main.xml 裡面定義WebView 元件
layout_width 可以配置為fill_parent 、match_parent、wrap_content .fill_parent 及match_parent 表示和父容器等寬，wrap_content 更加內容來設定寬度

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.xxx.myapplication.MainActivity">

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

</android.support.constraint.ConstraintLayout>

這個一個顯示百度搜索主頁的app就建好了，怎麼看效果？我這裡用模擬器看最終結果。
設定模擬器的步驟：
安裝的android studio 和sdk 及對應的外掛沒有問題，則會在工具欄上看到高亮的AVD Manager圖示。點選AVD Manager 圖示。

點選 Create Virtual Device…按鈕。

選擇左側的Phone，然後再右邊選擇自己喜歡的機型。點選下邊的Next按鈕。

選擇 X86 Images Tab標籤 ，選擇Marshmallow 、API Level 23。這裡不用管ABI 和Target。點選Next按鈕。

這是最後一步提示剛才所有操作後的模擬機的最終配置資訊及一些高階配置。點選Show Advanced Settings 就會有高階配置項，比如前置攝像頭的模擬，網路模擬，cpu數量 、記憶體大小、SD card 的大小等配置。

配置好高階設定，點選右下角的Finish按鈕，就可以完成模擬機的全部配置。點選下圖的綠色箭頭就能啟動模擬機。

模擬器啟動完後，下圖紅色框選擇app，然後點選旁邊的綠色按鈕。

等軟體編譯完成後，就能看到模擬器上顯示的執行效果，如下圖：