App基于html/css/js的开发
在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类里面执行了耗时任务。这就是我接触的这种开发模式。方法名,请求,返回。三个要素。
相关推荐
Nostalgiachild 2020-11-13
韩伟佳 2020-10-09
wuleihenbang 2020-09-16
zzqLivecn 2020-07-09
chenjinlong 2020-06-10
yinbaoshiguang 2020-06-09
sgafdsg 2020-06-04
ustcrding 2020-06-03
chenjinlong 2020-06-03
AndroidGA 2020-06-01
安辉 2020-05-27
绿豆饼 2020-05-26
CNETNews 2020-05-26
xilove0 2020-05-12
绿豆饼 2020-05-12
ChainDestiny 2020-05-07
doomvsjing 2020-05-07
hqulyc 2020-05-05
lyccsu 2020-04-30