在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类里面执行了耗时任务。这就是我接触的这种开发模式。方法名,请求,返回。三个要素。
相关推荐
基于HTML5+CSS+JS完成小红书首页项目相似度99%,附源码+素材,可用于毕业设计
程序采用的前后端分离、且后端所用的是最主流的苹果cms框架,是基于ThinkPHP和Layui的多功能开源免费内容管理系统 ...基础技术:Html/Javascript/CSS / Flash开发框架:jQuery, Extjs , Flex 等;
2022苹果CMS 全新二开影视源码app源码完整版 程序采用的前后端分离、且后端所用的是最主流的苹果cms框架,是... 关于前端采用的是分层架构 基础技术:Html/Javascript/CSS Flash开发框架:jQuery, Extjs , Flex 等;
Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的 CSS UI 库。 2.1.3 开发工具 Visual Studio Code 2.1.4 管理工具 Git 2.2 环境搭建 2.2.1...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
程序采用的前后端分离、且后端所用的是最主流的苹果cms框架,是基于ThinkPHP和Layui的多功能开源免费内容管理系统 ...基础技术:Html/Javascript/CSS / Flash开发框架:jQuery, Extjs , Flex 等;
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
html5开发
项目采用Html5、CSS3、MUI、AngularJS以及HTML5 规范开发的一款H5场景制作平台;
根底技术:Html/Javascript/CSS / Flash开发框架:jQuery, Extjs , Flex 等; ————————————————– 搭建教程 小程序源码导入之前,需求开通小程序账号,并且AppId复制过来填写到开发者工具中,还...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...