在android开发中原生的App在移植网络版的b/s系统中时会收到很多的限制，基于html开发android应用变得流行起来，在android中我们使用webview来加载网页，网页是动态的，它和后台数据库的关联是通过js来实现的。
接下来，我结合我公司的项目来讲解一个html的例子。
首先新建一个android工程，然后，在android 清单文件 中选择添加网络权限。
写道
<!-- 网络通信权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.INTERNET" />
其次，我们定义一个父类的Activity，它会用来进行一些初始化信息。
package com.youth.android.baseClass;
import com.youth.android.utils.SysApplication;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class PublicActivity extends Activity {
protected String sHTML = "";
protected JavaScriptInterface js;
public WebView web;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initContentView();
SysApplication.getInstance().addActivity(this);
}
protected void initContentView() {
initHTML();
web = new WebView(this);
initWebSetting(web);
setContentView(web);
goBrower(web);
}
@SuppressLint("SetJavaScriptEnabled")
protected void initWebSetting(WebView web) {
WebSettings webSettings = web.getSettings();
webSettings.setBuiltInZoomControls(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setBlockNetworkImage(false);
webSettings.setBlockNetworkLoads(false);
web.setWebChromeClient(new WebChromeClient());
addJavascriptInterface(web);
}
protected void addJavascriptInterface(WebView web) {
js = new JavaScriptInterface(this, web);
web.addJavascriptInterface(js, "js2java");
}
protected void initHTML() {
}
protected void goBrower(WebView web) {
// web.loadUrl("file://"+Environment.getExternalStorageDirectory().getPath()+"/sysdb/"+sHTML);
// web.loadUrl("file:///android_asset/harmony/root/logon.html");
web.loadUrl("file:///android_asset/" + sHTML);
}
protected void goBrower(WebView web, String sHTMLTemp) {
web.loadUrl("file:///android_asset/" + sHTMLTemp);
}
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
return true;
}
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
((Activity) this).finish();
return true;
}
return super.onKeyDown(keyCode, event);
}
}
然后我们在asserts文件夹下建立三个文件，一个是login.js,login.html，login.css。
(function() {
var LoginSystem = {};
/*
/* 重设body的高度
*/
function setSize() {
var windowHeight = document.documentElement.clientHeight;
document.getElementsByTagName('body')[0].style.height = windowHeight + 'px';
}
/*
*登录页js
*/
LoginSystem.login = function() {
setSize();
document.getElementById('telNo').value = "13100000000";
}
/*
* 登陆
*/
$$('#btnlogin').on('click',function() {
js2java_logon.callMethod('attemptLogin', '{\'telNo\':\'' + getTelNo() + '\',\'pwd\':\'' + getPassWord() + '\'}', '');
});
/*
* 注册
*/
$$('#btnreg').on('click', function() {
});
/*
* 执行登陆初始化
*/
LoginSystem.login();
})()
function getTelNo() {
return document.getElementById('telNo').value.trim();
}
function getPassWord() {
return document.getElementById('password').value.trim();
}
<body>
<!-- Views -->
<div class="views" style="width='100%' height='100%'">
<div class="index">
<div class="login-inner">
<div class="content">
<h1 class="content-title">
</h1>
<div class="content-body">
<div class="form">
<form name="loginForm">
<div class="form-wrap">
<div class="label">
<label>手机</label>
</div>
<div class="list-block list-block-self">
<input type="text" placeholder="请输入手机号" class=" button-big button-fill btn-default" id="telNo">
</div>
</div>
<div class="form-wrap">
<div class="label">
<label>密码</label>
</div>
<div class="list-block list-block-self">
<input type="password" placeholder="请输入密码" class=" button-big button-fill btn-default" id="password" value="admin">
</div>
</div>
<div class="row">
<div class="col-50">
<input type="button" id="btnlogin" class="button button-big button-fill color-cyan button-default" value="登录">
</div>
<div class="col-50">
<input type="button" id="btnreg" class="button button-big button-fill color-cyan button-default" value="注册">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Copyright (c) 2015-2016</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/login.js"></script>
</body>
只写了body部分，css样式我就先不加了，主要是界面上的设计特点。主要我们关心的是数据的流向。
Login.java文件
public class Logon extends PublicActivity{
protected void addJavascriptInterface(WebView web){
this.webView = web;
js = new LogonJSI(this,web);
web.addJavascriptInterface(js, "js2java_logon");
}
protected void initHTML(){
sHTML = "login.html";
}
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initContentView();
}
public void attemptLogin(String sJson) {
try {
JSONObject obj = new JSONObject(sJson);
telNo = uFunc.getJSONString(obj, "telNo");
mPassword = uFunc.getJSONString(obj, "pwd");
} catch (JSONException e) {
e.printStackTrace();
}
mypDialog = uFunc.initProgress(this,"验证密码中","正在验证密码 ");
mypDialog.show();
new UserLoginTask().execute((Void) null);
}
public class UserLoginTask extends AsyncTask<Void, Void, Boolean> {
@Override
protected Boolean doInBackground(Void... params) {
try {
}
@Override
protected void onPostExecute(final Boolean success) {
}
}
}
public class LogonJSI extends JavaScriptInterface {
public LogonJSI(Context c, WebView web) {
super(c, web);
}
public void attemptLogin(String sJson,String sCallback) {
((Logon)context).attemptLogin(sJson);
}
}
以上黑体部分表明了数据流向，在asynctask类里面执行了耗时任务。这就是我接触的这种开发模式。方法名，请求，返回。三个要素。
相关推荐
标题中的“使用H5/JS/CSS 套壳法编写的移动端仿铛铛APP”意味着这个项目是基于Web技术，包括HTML5（H5）、JavaScript（JS）和CSS，来模仿移动端的铛铛应用程序。这种方法通常被称为Hybrid App开发，它结合了原生应用...
本资料“前端面试题汇总”聚焦于HTML、CSS和JavaScript这三大核心技术，同时也涵盖了jQuery、移动App开发以及Node.js等相关领域。以下是这些关键知识点的详细解释： 1. HTML (HyperText Markup Language)： - 结构...
数据可视化大屏电子沙盘集合，基于：HTML/CSS/Echarts等等，包含行业：区块链金融行业、智慧社区、智慧物业、智慧政务、智慧交通、通用模板等，包含功能：自定义字体、Css动画、WebSocket实时数据、K线折线等各种...
基于HTML5+CSS+JS完成小红书首页项目相似度99%，附源码+素材，可用于毕业设计
【HTML+CSS+JS的仿天猫商城APP源码】是一个基于Web技术实现的移动应用模拟项目，它利用了HTML5、CSS3以及JavaScript的核心特性，旨在重现天猫商城APP的界面和部分功能。这个项目对于学习Web前端开发，尤其是对移动...
综上所述，利用HTML、CSS和JavaScript开发iPhone企业级应用是一种有效的策略，它能够快速迭代、跨平台，并且能够充分利用Web开发人员已有的技能。然而，这也需要开发者了解如何将这些Web技术与iOS的原生功能结合，以...
总结来说，这个"手机APP注册页面html模板"是一个基于CSS3的网页设计资源，它简化了手机应用注册页面的开发过程，提供了良好的基础样式和交互效果。通过理解和修改这个模板，开发者可以快速打造出符合品牌形象且用户...
技术栈覆盖：包含HTML5、CSS3和现代JavaScript（如ES6+），紧跟Web开发趋势，帮助学习者掌握最新技术。 清晰的结构：良好的代码组织和注释，便于初学者理解代码逻辑和功能实现。 模块化设计：代码可能采用模块化方式...
解锁网页开发秘籍，这套源码集成了HTML的结构力量、CSS的视觉魔法、JavaScript的交互智慧、jQuery的效率工具箱及Bootstrap的响应式盔甲。从基础搭建到动态交互，一步到位。 HTML筑基，强化网页骨络； CSS妆点，让...
探索全栈前端技术的魅力：HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代，构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码，融合了HTML的骨架...
标题中的“APP点餐系统HTML, Js, css,H5.DEMO-HTML .5代码类资源”表明这是一个基于HTML5、JavaScript、CSS技术构建的APP点餐系统的示例代码资源。这种系统通常用于实现在线餐饮服务，让用户在手机或网页上便捷地...
在基于HTML5的移动Web App开发中，通常结合JavaScript和CSS3来构建应用程序。技术架构设计注重动态更新和适应市场需求，通过前端数据层、后端服务和UI界面的协同工作，实现高效的数据交互和用户体验优化。例如，...
总的来说，这个基于HTML5+CSS3的聊天界面Demo展示了现代Web技术的强大潜力，不仅提供了基本的聊天功能，还注重用户体验和视觉设计。开发者可以通过学习这个示例，进一步提升自己的前端开发技能，理解如何利用新技术...
综上所述，基于HTML、CSS和JavaScript构建iPhone企业级应用涉及到的技术点非常广泛，包括但不限于Web技术的使用、混合式应用开发、iOS开发环境的设置、性能优化、安全性考虑以及测试和发布等方面。这些知识点对于...
【纯HTML5+CSS+JS自动聊天美女APP】是一个基于前端技术实现的轻量级应用程序，它无需安装任何额外插件，只需解压后即可直接运行。这个项目结合了JavaScript、HTML5和CSS三大核心Web技术，实现了与用户互动的自动聊天...
解锁网页开发秘籍，这套源码集成了HTML的结构力量、CSS的视觉魔法、JavaScript的交互智慧、jQuery的效率工具箱及Bootstrap的响应式盔甲。从基础搭建到动态交互，一步到位。 HTML筑基，强化网页骨络； CSS妆点，让...
在本项目中，"Loan Calculator App Using HTML, CSS and JavaScript.zip" 提供了一个基于Web的贷款计算器应用。这个应用利用了前端技术HTML、CSS和JavaScript，来实现一个用户友好的界面，以及计算贷款月供、总利息...
本篇文章将深入探讨基于HTML5的餐饮类APP开发的相关知识点。 首先，我们要理解HTML5的核心优势。HTML5是超文本标记语言的最新版本，它增强了网页的语义化，提供了更好的数据存储（Web Storage和IndexedDB）、离线...
这份精选资源包，囊括HTML、CSS、JavaScript、jQuery及Bootstrap框架的完美结合，为您的创意插上飞翔的翅膀。HTML奠定坚实基础，CSS赋予页面绚丽风格，JavaScript与jQuery注入交互灵魂，而Bootstrap则确保响应式设计...
MUI的核心特点包括高性能、模块化和易于定制，它基于HTML5和CSS3，同时也支持JavaScript进行交互逻辑的处理。 H5，即HTML5，是超文本标记语言的第五个版本，是构建Web页面和Web应用的基础。HTML5引入了许多新特性，...