h5 ios android 简介:
概念:
加载网址
加载网页
加载网页字符串
点击内容的时候 会调到浏览器 我们可以让其在当前页展示:h5 可以利用WebView,做一款app,混合开发,如果只是展示数据的话,只仅仅给你一个网址,就可以去访问了。
h5 : 优点 变化比较快,界面都放在服务器上了,服务器的网页一遍,界面全都变了。
h5 做布局变化很简单,服务端一改变,手机上全就变了,布局,快,变化快
缺点: 下载数据的时候,除了真实想展示给用户的以外,还下载了样式,宽,色,点击色
未点击色,滑动操作,都是网页下载下来的,下载数据量大,同样内容,下载的数据量要在原生的4-5倍。h5 页面加载速度慢
若: 你将H5 打在apk 里,速度要快 缺点不灵活了 变化小了
优点: 在android ios iba 文件 都可以用,写一个页面相当于写了两个页面
android webView 加载它即可,ios 相应控件加载
windosphone 使用极少 h5 也可展示同样效果 架一个壳子
h5 优点 跟java 差不多 一次编译 倒出运行 电商类的h5 做的 比原生好
缺点 : h5 做传输 加密很难,本身就是字符串形式 传递到本地的
无法做安全性比较高的,h5 再发展的,对 android 比对 ios 冲击大
应用类市场 被h5 冲击
andorid 嵌入式,智能家居,物联网,android 比ios 优势,可以在任何地方编译
运行
缺点 : 原来 c比java 快20 倍,h5 运行很慢
h5 渲染一个页面 和 原生布局 渲染一个界面 10倍左右时间,
java 抢了 很多 c 语言的工作 服务器 嵌入式
很多东西 无法比较 c 无法做硬件的访问
c 可以直接访问 硬件 ,java 则写不了驱动
编程语言排名 java c c++
Ios 硬件软件 兼容性高
原生应用 : 访问网页的时候布局是 变不了的 只能是数据发生变化的。
b+c 模式使用 :
在原生 app 中嵌入,html5 :
xml布局文件中,引入webView控件:
activity 中 loadUrl 即可
## 使用:怎么用 LSO ##
//webView 控件获取 设置ulr 设置在客户端显示,还是浏览器显示
assert webView!=null;
webView.loadUrl("http://www.baidu.com");
//设置 界面在当前窗口跳转不打开网页
webView.setWebViewClient(new WebViewClient());
// 让 webView 可以后退
@Override
public void onBackPressed() {
if (webView.canGoBack()) {
//webView Can go back
webView.goBack();
}
// if isn't can call father method
super.onBackPressed();
}
点击html 按钮,调用 android 代码:
在html 代码中我们可以调用 js, 利用webView 我们也可,加载html 界面,也可以,在html onClick 事件 中触发app 的代码,下面以吐司为例,
① 在main目录下,新建assets 文件夹,里边放个 html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function jstest(){
document.getElementById("btn").textContent = "hhhhh"
}
</script>
</head>
<body>
<button id="btn" onclick="obj.test('来自于HTML 5')">点我</button>
</body>
</html>
② MainActivity 目录下先建一个 类 JsInterface
package com.example.liyang.webviewforcsdn;
import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;
public class JsInterface {
private Context context;
public JsInterface(Context context) {
this.context = context;
}
@JavascriptInterface
public void test(String text){//方法名test与 html中方法名一致
Toast.makeText(context, "html调用java后台代码"+text, Toast.LENGTH_SHORT).show();
}
}
MainActivity 中代码:
package com.example.liyang.webviewforcsdn;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
public class MainActivity extends AppCompatActivity {
private WebView web_id;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
assert web_id!=null;
web_id = (WebView) findViewById(R.id.web_id);
// load Html code
loadHtml();
}
/**
* loadHtml to app
*/
private void loadHtml() {
InputStream html =null;
ByteArrayOutputStream bos = null;
try {
html = getAssets().open("test.html");
bos = new ByteArrayOutputStream();
byte[] byff = new byte[1<<10];
int len;
while((len=html.read(byff))!=-1){
bos.write(byff,0,len);
}
String str = bos.toString();
web_id.loadData(str,"text/html;charset=utf-8","utf-8");
//start js
web_id.getSettings().setJavaScriptEnabled(true);
// join native interface
web_id.addJavascriptInterface(new JsInterface(this),"obj");
} catch (IOException e) {
e.printStackTrace();
}finally {
if (html!=null){
try {
html.close();
} catch (IOException e) {
e.printStackTrace();
}
}if (bos!=null){
try {
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
在 android 点击按钮 调用js 代码,执行 js 事件
下边为按钮的监听事件
@Override
public void onClick(View v) {
int id = v.getId();
switch (id){
case R.id.btn_id:
// execute js code
web_id.loadUrl("javascript:jstest()");
break;
}
}
//override
@Override
public void onBackPressed() {
if (web_id.canGoBack()) {
web_id.goBack();
}
else
super.onBackPressed();
}