1.直接使用html文件、js文件、圖片、佈局存放在本地assets或網絡中
2.在MainActivity加載本地HTML
mWebview = (WebView) findViewById(R.id.webView1);
mWebview.getSettings().setJavaScriptEnabled(true);
mWebview.loadUrl("file:///android_asset/test3.html");
// mWebview.loadDataWithBaseURL(null,data, "text/html", "utf-8", null);3.再test3中引入並設置一個簡單的點擊事件
<div class="kcbox-title">
<img src="image/img-02.png" class="kcbox-title-img" />
//引入點擊事件
<p onclick="abc()">點擊我變換文字</p>
<i class="jtico"></i>
</div>4.在vue.js中處理事件
// var ydata = window.InteractJsForUI.getMyCustomInf();
// var data = JSON.parse(ydata);
function abc() {
document.write("<p>我是變化的文字 我的第一段 </p>");
}二、性能優化
WebView的性能，給人印象是打開速度比native慢，因爲打開一個WebView比較耗要經歷無反饋 白屏 loanding時間。
優化方式
1.全局 WebView在客戶端剛啓動時，就初始化一個全局的WebView待用，並隱藏；
2.直接由native開始網絡請求數據存入JsonObject中。
3.DNS採用和客戶端API相同的域名
4.一些前端JS加載 編譯和CSS渲染上的優化
參考大牛文章：https://mp.weixin.qq.com/s/evzDnTsHrAr2b9jcevwBzA
webView基礎：http://blog.csdn.net/carson_ho/article/details/52693322
附test3.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="Keywords" content="" id="Keywords" />
<meta name="Description" content="" id="Description" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="jquery-2.0.2.js" type="text/javascript" charset="utf-8"></script>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="cnt cntbg">
<div class="kbox clearflx">
<div class="kbox-img">
<img src="image/edu.png" />
</div>
<div class="kbox-text">
<!--<h2>Michael</h2>-->
<div class="stextd"><span>Michael</span></div>
<div class="stextd"><span class="stitle">填報人所屬部門：</span><span>企業金融一部-團隊2</span></div>
<div class="stextd"><span class="stitle">填報日期：</span><span>2016年3月9日</span></div>
</div>
</div>
<div class="kcbox hide">
<div class="kcbox-title">
<img src="image/img-02.png" class="kcbox-title-img" />
//引入點擊事件
<p onclick="abc()">點擊我變換文字</p>
<i class="jtico"></i>
</div>
<div class="kcbox-cnt">
<div class="stextd"><span class="stitle">客戶名稱：</span><span>Mara Thea day wing Limited by Share Ltd</span></div>
<div class="stextd"><span>XXXXXXX有限公司</span></div>
<div class="stextd"><span class="stitle">客戶經理：</span><span>Michael</span></div>
<div class="stextd"><span class="stitle">機構層級：</span><span>香港分行</span></div>
</div>
</div>
</div>
</body>
</html>