在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类里面执行了耗时任务。这就是我接触的这种开发模式。方法名，请求，返回。三个要素。
相关推荐
本项目是一款基于HTML/CSS/JavaScript开发的咖啡馆线上购物App设计源码，包含68个文件，涵盖21个CSS样式文件、21个JavaScript脚本文件、21个资源映射文件，并附有必要的Markdown文档、图标和图片资源。该App旨在为...
该项目是一款基于HTML、CSS和JavaScript开发的健身App设计源码，总文件量为151个，其中包含31个JPG图片、30个JavaScript脚本、22个LESS样式表、22个HTML页面、19个PNG图片、7个CSS样式文件、6个Markdown文档、4个MP4...
标题中的“使用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线折线等各种...
数据可视化大屏电子沙盘集合，基于：HTML/CSS/Echarts等等，包含行业：区块链金融行业、智慧社区、智慧物业、智慧政务、智慧交通、通用模板等，包含功能：自定义字体、Css动画、WebSocket实时数据、K线折线等各种...
【HTML+CSS+JS的仿天猫商城APP源码】是一个基于Web技术实现的移动应用模拟项目，它利用了HTML5、CSS3以及JavaScript的核心特性，旨在重现天猫商城APP的界面和部分功能。这个项目对于学习Web前端开发，尤其是对移动...
该项目为基于HTML、CSS、JavaScript的CookWiki菜谱百科APP设计源码，共计98个文件，其中包括44个PNG图片文件、19个HTML文件、17个CSS文件、9个JavaScript文件，以及gitignore、project、md、xml、eot、svg等辅助文件...
综上所述，利用HTML、CSS和JavaScript开发iPhone企业级应用是一种有效的策略，它能够快速迭代、跨平台，并且能够充分利用Web开发人员已有的技能。然而，这也需要开发者了解如何将这些Web技术与iOS的原生功能结合，以...
基于HTML5+CSS+JS完成小红书首页项目相似度99%，附源码+素材，可用于毕业设计
总结来说，这个"手机APP注册页面html模板"是一个基于CSS3的网页设计资源，它简化了手机应用注册页面的开发过程，提供了良好的基础样式和交互效果。通过理解和修改这个模板，开发者可以快速打造出符合品牌形象且用户...
技术栈覆盖：包含HTML5、CSS3和现代JavaScript（如ES6+），紧跟Web开发趋势，帮助学习者掌握最新技术。 清晰的结构：良好的代码组织和注释，便于初学者理解代码逻辑和功能实现。 模块化设计：代码可能采用模块化方式...
总的来说，这个基于HTML5+CSS3的聊天界面Demo展示了现代Web技术的强大潜力，不仅提供了基本的聊天功能，还注重用户体验和视觉设计。开发者可以通过学习这个示例，进一步提升自己的前端开发技能，理解如何利用新技术...
解锁网页开发秘籍，这套源码集成了HTML的结构力量、CSS的视觉魔法、JavaScript的交互智慧、jQuery的效率工具箱及Bootstrap的响应式盔甲。从基础搭建到动态交互，一步到位。 HTML筑基，强化网页骨络； CSS妆点，让...
探索全栈前端技术的魅力：HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代，构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码，融合了HTML的骨架...
本项目为全功能外卖APP设计源码，采用HTML、CSS、Java、JavaScript等多语言开发，共计256个文件。其中，Java源文件71个，PNG图片70个，JavaScript脚本30个，HTML页面30个，CSS样式29个，此外还包含9个字体文件、4个...
综上所述，基于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，来实现一个用户友好的界面，以及计算贷款月供、总利息...