WebView与JS的交互和优化
来源:互联网 发布:算法设计与分析难不难 编辑:程序博客网 时间:2024/05/22 02:22
一、与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>
阅读全文
0 0
- WebView与JS的交互和优化
- Android Webview优化及与Js交互
- WebView与js的交互
- js与webView的交互
- WebView 与 JS 的交互
- webView 与 JS 的交互
- WebView与Js的交互
- webview与js的交互
- webview和js的交互
- webview和js的交互
- webView 和Js的交互
- js和webview的交互
- webview的基本设置和与js的相互交互
- webview与js交互
- webview与js交互
- webview与js交互
- webview与js交互
- webview与js交互
- MathJax 基础 (1):基础语法
- Windows 函数API大全
- Windows Server 2008将在今年具备TLS 1.2功能
- Tree(LCA模板)
- ssh 客户端登陆报 No further authentication methods available
- WebView与JS的交互和优化
- mybatis里#{}和${}的区别
- java--接口(interface\implements)
- poj1651 Multiplication Puzzle
- 查看网站信息
- python3.5安装gensim包报错 scipy
- Hdu 4063
- 【Unity3D入门】Unity3D学习笔记001——Unity的下载、安装与破解
- heX——基于 HTML5 和 Node.JS 开发桌面应用