安卓(android) html5开发与最佳实践（上）

安卓(android) html5开发与最佳实践（上）

安卓(android) html5开发与最佳实践（下）

首先得具备一定html/css/javascript知识，如果页面不是由你自己写，而是有美女前端工程师帮忙，那就随便了解一点点即可

下面我们开始：

新建一个页面

首先加入这些常用meta标签，这里要重点加入的一个就是viewport

viewport的属性如下：

<meta name="viewport"      content="          height = [pixel_value | device-height] ,          width = [pixel_value | device-width ] ,          initial-scale = float_value ,          minimum-scale = float_value ,          maximum-scale = float_value ,          user-scalable = [yes | no] ,          target-densitydpi = [dpi_value | device-dpi |                               high-dpi | medium-dpi | low-dpi]          " />

我们一般这么写就行了

<meta name="viewport" content="width=device-width,  initial-scale=1.0,  user-scalable=no">

target-densitydpi在安卓版本19被标记为过时了

如果需要适配则可以使用css media特性

比如可以为不同density写不同的css

可以这样

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

也可以这样

#header {    background:url(medium-density-image.png);}@media screen and (-webkit-device-pixel-ratio: 1.5) {    /* CSS for high-density screens */    #header {        background:url(high-density-image.png);    }}@media screen and (-webkit-device-pixel-ratio: 0.75) {    /* CSS for low-density screens */    #header {        background:url(low-density-image.png);    }}

像素比也可以通过js获得

if (window.devicePixelRatio == 1.5) {  alert("hdpi screen");} else if (window.devicePixelRatio == 0.75) {  alert("ldpi screen");}

其他都是html那些东西了，代码慢慢写，样式慢慢调，推荐用火狐浏览器调试

页面写完，安卓客户端当然也要写

客户端要维护的就是一个webview，超简单

webview自然是在xml里定义好

让后就是一些常见设置了

比如js调用java代码

写一个类

public class WebAppInterface {    Context mContext;    WebAppInterface(Context c) {        mContext = c;    }    /** Show a toast*/    @JavascriptInterface//这个4.2版本的api，4.2以下的手机貌似写了也没事    public void showToast(String toast) {        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();    }}

然后

WebView webView = (WebView) findViewById(R.id.webview);webView.addJavascriptInterface(new WebAppInterface(this), "Web");//添加js对象

js调用时如下就可以

<script type="text/javascript">    function showAndroidToast(toast) {        Web.showToast(toast);    }</script>

现在我们还要做一件事，避免运行程序后调用手机浏览器打开网页，而不是自己的app跳转

private class MyWebViewClient extends WebViewClient {    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        if (Uri.parse(url).getHost().equals("www.example.com")) {            // 这里只有内部网站才让app跳            return false;        }        // 否则调用浏览器打开        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));        startActivity(intent);        return true;    }}

上面可以起到防盗链的作用，当然你的设置进来：

WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebViewClient(new MyWebViewClient());

在Activity后退事件中最好加上webview的历史后退

public boolean onKeyDown(int keyCode, KeyEvent event) {        if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {        myWebView.goBack();        return true;    }        return super.onKeyDown(keyCode, event);}

webView也可以debug

在js里面通过console.log("str");来输出到控制台，这个可以在浏览器的控制台上看到，在app里面可以这样来做也可以看到log

WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient() {  public boolean onConsoleMessage(ConsoleMessage cm) {    Log.d("MyApplication", cm.message() + " -- From line "                         + cm.lineNumber() + " of "                         + cm.sourceId() );    return true;  }});