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

App基于html/css/js的开发

相关推荐