App基于html/css/js的开发

在android开发中原生的App在移植网络版的b/s系统中时会收到很多的限制，基于html开发android应用变得流行起来，在android中我们使用webview来加载网页，网页是动态的，它和后台数据库的关联是通过js来实现的。

接下来，我结合我公司的项目来讲解一个html的例子。

首先新建一个android工程，然后，在android清单文件中选择添加网络权限。

写道 
<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样式我就先不加了，主要是界面上的设计特点。主要我们关心的是数据的流向。

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> {@Overrideprotected Boolean doInBackground(Void... params) {try { }@Overrideprotected 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类里面执行了耗时任务。这就是我接触的这种开发模式。方法名，请求，返回。三个要素。

更多相关文章

随机推荐