本教程目的：采用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"
至此我们的基本功能都做完了,可以正常运行并且访问了。
