安卓(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;
  }
});