本教程目的：采用ios app和android app外壳内嵌H5(html)网页，使其能够正常访问浏览。

前端框架-vue

开发环境
window系统，node.js环境，vue框架

开发语言
Javascript，html，css

开发说明

前端vue框架会生成打包成html文件，通过html文件我们部署在服务器上。直接通过浏览器访问域名地址即可访问整个以vue框架为主的项目。因考虑到原生的体验模式，vue项目会采用单页面模式加载，该模式下会默认初次访问时，把整个项目的静态资源都请求到位，在终端上就能如原生操作体验顺畅。（不包括异步请求的数据，并且是整个项目，不是当前仅访问的页面资源）

因页面的业务逻辑都是用vue框架开发的。既ios/android终端只需要开启webview容器承载页面访问即可。对于触发到原生键盘的弹起，只需要前端的input输入框触发则系统会默认弹出。

Native端(ios)

基本要求
在Macox系统上安装xcode软件，在xcode上新建工程项目，引入要调用的基本资源

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

开发阶段

在ios端代码文件内采用webview读取远程服务器上的url页面地址

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

Native端(android)

基本流程
打开android studio软件，新建工程项目，右键左侧空白>new project>android>android application project,接着在MainActivity中放入一个WebView

开发阶段

（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默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开  
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        webView.loadUrl("远程服务器的url页面地址");
    }
}

（3）修改功能清单文件 manifests/AndroidManifest.xml配置
在application节点前加入联网权限的声明：

<!-- 联网权限 -->
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

（4）修改application结点的android:theme属性,去掉activity的头

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

至此我们的基本功能都做完了,可以正常运行并且访问了。