本教程目的：采用ios app和android app外殼內(nèi)嵌H5(html)網(wǎng)頁，使其能夠正常訪問瀏覽。

前端框架-vue

開發(fā)環(huán)境
window系統(tǒng)，node.js環(huán)境，vue框架

開發(fā)語言
Javascript，html，css

開發(fā)說明

前端vue框架會生成打包成html文件，通過html文件我們部署在服務(wù)器上。直接通過瀏覽器訪問域名地址即可訪問整個以vue框架為主的項目。因考慮到原生的體驗模式，vue項目會采用單頁面模式加載，該模式下會默認初次訪問時，把整個項目的靜態(tài)資源都請求到位，在終端上就能如原生操作體驗順暢。（不包括異步請求的數(shù)據(jù)，并且是整個項目，不是當前僅訪問的頁面資源）

因頁面的業(yè)務(wù)邏輯都是用vue框架開發(fā)的。既ios/android終端只需要開啟webview容器承載頁面訪問即可。對于觸發(fā)到原生鍵盤的彈起，只需要前端的input輸入框觸發(fā)則系統(tǒng)會默認彈出。

Native端(ios)

基本要求
在Macox系統(tǒng)上安裝xcode軟件，在xcode上新建工程項目，引入要調(diào)用的基本資源

let configuration = WKWebViewConfiguration()
configuration.preferences = WKPreferences()
configuration.preferences.javaScriptEnabled = true
configuration.userContentController = WKUserContentController()

let webview = WKWebView.init(frame: self.view.bounds, configuration: configuration)
self.view.addSubview(webview)
webview.navigationDelegate = self

開發(fā)階段

在ios端代碼文件內(nèi)采用webview讀取遠程服務(wù)器上的url頁面地址

webview.load(URLRequest.init(url:URL.init(fileURLWithPath: Bundle.main.path(forResource: "https://xxxxx/#/index", ofType: "html", inDirectory: "h5")!)))

Native端(android)

基本流程
打開android studio軟件，新建工程項目，右鍵左側(cè)空白>new project>android>android application project,接著在MainActivity中放入一個WebView

開發(fā)階段

（1）修改activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context="com.example.uitest2.MainActivity" >

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

（2）添加WebView容器加載主頁
修改MainActivity.java，最終代碼如下

import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends ActionBarActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
      //覆蓋WebView默認使用第三方或系統(tǒng)默認瀏覽器打開網(wǎng)頁的行為，使網(wǎng)頁用WebView打開  
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        webView.loadUrl("遠程服務(wù)器的url頁面地址");
    }
}

（3）修改功能清單文件 manifests/AndroidManifest.xml配置
在application節(jié)點前加入聯(lián)網(wǎng)權(quán)限的聲明：

<!-- 聯(lián)網(wǎng)權(quán)限 -->
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

（4）修改application結(jié)點的android:theme屬性,去掉activity的頭

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

至此我們的基本功能都做完了,可以正常運行并且訪問了。