在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的母婴商城项目设计源码”这一主题展开。此项目源码是一种网络商城的开发实例，主要应用于母婴产品类别的在线销售。整个项目采用的前端技术为HTML、CSS和JavaScript，这些...
该项目是一款基于HTML、CSS和JavaScript开发的健身App设计源码，总文件量为151个，其中包含31个JPG图片、30个JavaScript脚本、22个LESS样式表、22个HTML页面、19个PNG图片、7个CSS样式文件、6个Markdown文档、4个MP4...
本项目是一个精心设计的咖啡馆线上购物应用程序，采用了前端开发的三大核心技术：HTML、CSS和JavaScript。通过这些技术的结合使用，开发者们能够创建出功能强大且用户友好的界面，使得顾客能够轻松浏览商品、加入...
本集合的核心技术基于HTML、CSS以及Echarts图表库，这些技术的结合使得开发者能够构建出既美观又功能强大的数据展示平台。 本集合覆盖了多个行业应用，其中特别强调了区块链金融行业、智慧社区、智慧物业、智慧政务...
这款基于JavaScript的HTML/CSS效率类APP产品原型设计源码，不仅展示了现代移动应用界面设计的先进技术和方法，还体现了效率类APP在提升用户体验和操作便捷性方面的设计原则。开发者通过这些资源文件可以有效地构建出...
TypeScript是JavaScript的一个超集，它添加了可选的静态类型和基于类的面向对象编程等特性，有助于创建大型应用。在“HUAWEI爱宠一族”App中，这些技术的结合确保了应用不仅功能丰富，而且用户界面友好，运行效率高...
该项目作为一款线上教育平台CRM系统，其设计源码采用Python语言及前端技术栈（HTML/CSS/JavaScript），为在线教育行业提供了一套完善的客户关系管理解决方案。系统设计融入了先进的编程理念和技术，通过构建213个...
基于JavaScript与HTML/CSS的bsday01网页设计源码分享项目是一个完整的网页开发解决方案，它集合了多种网页设计与开发的关键元素，目的是为了创建一个视觉上吸引人且具备丰富交互功能的网页界面。该项目以bsday01命名...
标题中的“使用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+JS的仿天猫商城APP源码】是一个基于Web技术实现的移动应用模拟项目，它利用了HTML5、CSS3以及JavaScript的核心特性，旨在重现天猫商城APP的界面和部分功能。这个项目对于学习Web前端开发，尤其是对移动...
综上所述，利用HTML、CSS和JavaScript开发iPhone企业级应用是一种有效的策略，它能够快速迭代、跨平台，并且能够充分利用Web开发人员已有的技能。然而，这也需要开发者了解如何将这些Web技术与iOS的原生功能结合，以...
基于HTML5+CSS+JS完成小红书首页项目相似度99%，附源码+素材，可用于毕业设计
总结来说，这个"手机APP注册页面html模板"是一个基于CSS3的网页设计资源，它简化了手机应用注册页面的开发过程，提供了良好的基础样式和交互效果。通过理解和修改这个模板，开发者可以快速打造出符合品牌形象且用户...
CookWiki菜谱百科APP正是在这样的背景下应运而生，它采用当今网页开发中最为流行的前端技术——HTML、CSS和JavaScript，为用户提供了一个全面而丰富的菜谱资源平台。 HTML作为网页内容的骨架，承担着构建页面结构和...
项目“基于Html、CSS、JavaScript的hao123手机端新闻App轮播图设计源码”提供了一套完整的解决方案，旨在设计一个响应式且富有吸引力的轮播图模块，该模块作为App界面的亮点之一，能够有效展示最新或最受欢迎的新闻...
技术栈覆盖：包含HTML5、CSS3和现代JavaScript（如ES6+），紧跟Web开发趋势，帮助学习者掌握最新技术。 清晰的结构：良好的代码组织和注释，便于初学者理解代码逻辑和功能实现。 模块化设计：代码可能采用模块化方式...
本项目所展示的“基于HTML、CSS、Java、JavaScript的reggie_take_out外卖APP设计源码”，是一个集成了现代前端技术和后端开发语言的全功能外卖应用程序。该应用程序采用的技术栈广泛应用于各类网页和移动应用的开发...
总的来说，这个基于HTML5+CSS3的聊天界面Demo展示了现代Web技术的强大潜力，不仅提供了基本的聊天功能，还注重用户体验和视觉设计。开发者可以通过学习这个示例，进一步提升自己的前端开发技能，理解如何利用新技术...