本教程目的：采用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框架為主的項(xiàng)目。因考慮到原生的體驗(yàn)?zāi)Ｊ匠ザ蹋瑅ue項(xiàng)目會采用單頁面模式加載欣孤，該模式下會默認(rèn)初次訪問時(shí)，把整個項(xiàng)目的靜態(tài)資源都請求到位昔逗，在終端上就能如原生操作體驗(yàn)順暢降传。（不包括異步請求的數(shù)據(jù)，并且是整個項(xiàng)目勾怒，不是當(dāng)前僅訪問的頁面資源）
因頁面的業(yè)務(wù)邏輯都是用vue框架開發(fā)的婆排。既ios/android終端只需要開啟webview容器承載頁面訪問即可。對于觸發(fā)到原生鍵盤的彈起笔链，只需要前端的input輸入框觸發(fā)則系統(tǒng)會默認(rèn)彈出段只。
Native端(ios)
基本要求
在Macox系統(tǒng)上安裝xcode軟件，在xcode上新建工程項(xiàng)目鉴扫，引入要調(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讀取遠(yuǎn)程服務(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軟件赞枕，新建工程項(xiàng)目，右鍵左側(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默認(rèn)使用第三方或系統(tǒng)默認(rèn)瀏覽器打開網(wǎng)頁的行為鹦赎，使網(wǎng)頁用WebView打開
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
webView.loadUrl("遠(yuǎn)程服務(wù)器的url頁面地址");
}
}
（3）修改功能清單文件 manifests/AndroidManifest.xml配置
在application節(jié)點(diǎn)前加入聯(lián)網(wǎng)權(quán)限的聲明：
<!-- 聯(lián)網(wǎng)權(quán)限 -->
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
（4）修改application結(jié)點(diǎn)的android:theme屬性,去掉activity的頭
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
至此我們的基本功能都做完了,可以正常運(yùn)行并且訪問了。
