WebView与JS的交互和优化

一、与JS交互     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>

WebView与JS的交互和优化

二、性能优化

猜你喜欢