android Html5学习代码
来源：互联网 发布：支付宝小程序源码 编辑：程序博客网 时间：2024/06/02 06:36
1、Android Html5技术的优势
1、Html5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，而不需要经过各种Store的审核。
2、Html5支持音频、视频等多媒体，无需任何插件即可可观看收听。
3、用户可以离线使用，更新下载量及少，可以全部更新，也可以选择替换部分文件。
4、使用Html5，代码更安全安全。众所周知Web应用有一个很大的开发问题就是代码安全的问题，但现在Android Html5可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。
5、Html5可以做到跨平台，多数核心代码不用重写，在许多地方都可以用到，包括移动应用、移动网站、手机网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。减少工作量,便于后期维护。
2、HTML5可视化设计工具：Maqetta。
下载地址：http://www.3987.com/xiazai/2/43/48139.html
Maqetta 是IBM公司在2014年4月发布多的，一个创建桌面和移动用户界面的HTML5设计编辑工具，并同时宣布将项目捐助给开源机构Dojo基金会。Maqetta提供WYSIWYG可视化HTML5用户界面设计功能，仅需简单的拖曳操作，支持桌面和移动用户界面。
Maqetta 只需解压后运行下面文件然后打开：http://localhost:50000/maqetta 就可以注册使用，可以制作简单网页。
3、在eclipse新建工程中将制作好的html网页加到assets文件下：
4、使用webview显示，详细代码如下：
package com.example.webview;import android.os.Bundle;import android.app.Activity;import android.view.View;import android.view.View.OnClickListener;import android.webkit.WebView;import android.widget.Button;public class MainActivity extends Activity {private WebView webView;private Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); //实例化WebView对象 webView = new WebView(this); //设置WebView属性，能够执行Javascript脚本 webView.getSettings().setJavaScriptEnabled(true); // setContentView(webView); setContentView(R.layout.main);webView = (WebView)findViewById(R.id.webview); //设置WebView属性，能够执行Javascript脚本 webView.getSettings().setJavaScriptEnabled(true);button = (Button)findViewById(R.id.button);button.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stub try { //设置打开的页面地址 webView.loadUrl("file:///android_asset/file1.html"); }catch(Exception ex){ ex.printStackTrace(); } }});}}布局代码：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" > <Button android:layout_width="fill_parent" android:id="@+id/button" android:layout_height="wrap_content"/> <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"/></LinearLayout>
file1代码：
<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Untitled</title><script type="text/javascript" src="lib/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}],'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/blackberry/blackberry.css']],['iPad','',['themes/ipad/ipad.css']],['iPhone','',['themes/iphone/iphone.css']],['.*','',['themes/iphone/iphone.css']]],'mblThemeFiles':[],'mblLoadCompatPattern':''"></script><script type="text/javascript">require([ "dijit/dijit", "dojo/parser", "maqetta/space", "maqetta/AppStates", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/Button", "dojox/mobile/RadioButton", "clipart/StreetMap", "dojox/mobile/SpinWheelTimePicker", "dojox/mobile/ValuePickerTimePicker", "clipart/Computer", "clipart/Camera"]);</script><style>@import "themes/claro/claro.css";@import "app.css";</style><script type="text/javascript" src="app.js"></script><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></meta></head><body data-maq-device="androidtablet" data-maq-flow-layout="false" data-maq-comptype="mobile" class="claro" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}"> <a></a> <button data-dojo-type="dojox/mobile/Button" id="button" style="position: absolute; z-index: 900; width: 240px; height: 92px; left: 52px; top: 197px;" onclick="location.href='file2.html'"> 统计表格</button> <div data-dojo-type="dojox/mobile/ValuePickerTimePicker" style="position: absolute; z-index: 900; width: 233px; height: 169px; left: 46px; top: 17px;"></div> </body></html>file2代码：<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Untitled</title><script type="text/javascript" src="lib/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}],'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/blackberry/blackberry.css']],['iPad','',['themes/ipad/ipad.css']],['iPhone','',['themes/iphone/iphone.css']],['.*','',['themes/iphone/iphone.css']]],'mblThemeFiles':[],'mblLoadCompatPattern':''"></script><script type="text/javascript">require([ "dijit/dijit", "dojo/parser", "maqetta/space", "maqetta/AppStates", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/Button", "dojox/mobile/ToggleButton", "dojox/mobile/CheckBox", "clipart/PlayControl", "dojox/mobile/Slider"]);</script><style>@import "themes/claro/claro.css";@import "app.css";</style><script type="text/javascript" src="app.js"></script><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></meta></head><body data-maq-device="android_480x800" data-maq-flow-layout="true" data-maq-comptype="mobile" class="claro" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}"> <label style="position: absolute; z-index: 900; left: 16px; top: 30px;">角色列表</label> <table border="1" style="border-collapse:collapse;table-layout:fixed;position:absolute;z-index:900;left:16px;top:60px;width:436px;height:151px;"><colgroup> <col></col> <col></col> <col></col> </colgroup> <tbody> <tr> <td> 选项</td> <td> 爱好</td> <td> 习惯</td> </tr> <tr> <td> <input type="checkbox" data-dojo-type="dojox/mobile/CheckBox" style="position: absolute; z-index: 900; left: -1px; top: 55.5px;"></input> </td> <td> </td> <td> </td> </tr> <tr> <td> <input type="checkbox" data-dojo-type="dojox/mobile/CheckBox" checked="true" style="position: absolute; z-index: 900; left: 1px; top: 92.5px;" onkeyup="davinci.states.setState('Normal')" onkeydown="davinci.states.setState('Normal')"></input> </td> <td> </td> <td> </td> </tr> <tr> <td> <input type="checkbox" data-dojo-type="dojox/mobile/CheckBox" checked="true" style="position: absolute; z-index: 900; height: 19px; width: 19px; left: 1px; top: 122.19999999999999px;"></input></td> <td> </td> <td> </td> </tr> </tbody> </table> <button data-dojo-type="dojox/mobile/Button" style="position: absolute; z-index: 900; left: 36px; top: 287px;" onclick="location.href='file3.html'"> 添加</button> <button data-dojo-type="dojox/mobile/Button" style="position: absolute; z-index: 900; left: 146px; top: 287px; width: 64px; height: 32px;" onkeydown="davinci.states.setState('')">删除</button> </body></html>file3代码：<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Untitled</title><script type="text/javascript" src="lib/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}],'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/android/android.css']],['iPad','',['themes/android/android.css']],['iPhone','',['themes/android/android.css']],['.*','',['themes/android/android.css']]],'mblThemeFiles':[],'mblLoadCompatPattern':''"></script><script type="text/javascript">require([ "dijit/dijit", "dojo/parser", "maqetta/space", "maqetta/AppStates", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/Button"]);</script><style>@import "themes/claro/claro.css";@import "app.css";</style><script type="text/javascript" src="app.js"></script><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></meta></head><body data-maq-device="android_480x800" data-maq-flow-layout="true" data-maq-comptype="mobile" class="claro" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}"> <select style="width: 159px; position: absolute; z-index: 900; left: 311px; top: 19px;"><option value="Item 1"> Item 1</option> <option value="Item 2"> Item 2</option> <option value="Item 3"> Item 3</option> <option value="5"> 5</option> <option value="6"> 6</option> <option value="7"> 7</option> <option value="8"> 8</option> <option value="9"> 9</option> </select> <embed src="http://write.blog.csdn.net/postlist"></embed> <img></img> <button data-dojo-type="dojox/mobile/Button" style="position: absolute; z-index: 900; width: 242px; height: 76px; left: 83px; top: 266px;" onclick="location.href='file1.html'"> Button</button></body></html>代码下载地址：点击打开链接
0 0
- android Html5学习代码
- HTML5代码学习:值得收藏的HTML5代码片段
- Android原生代码与html5交互
- Android原生代码与HTML5的交互
- HTML5 Android开发学习Cordova-二维码扫描
- Android学习代码收藏
- Android代码混淆学习
- 代码学习第一天： HTML 教程- (HTML5 标准)
- HTML5 学习
- html5学习
- HTML5学习
- html5学习
- html5学习
- 学习HTML5
- HTML5学习
- HTML5学习
- Html5学习
- html5学习
- GDAL学习总结
- Sqlite数据库sqlite3命令
- JNI笔记
- 1.6 五分钟学会OpenStack 基础知识
- hive大数据倾斜总结
- android Html5学习代码
- ubuntu下编译protobuf
- 二叉树的四种遍历的递归和非递归的实现
- Android 沉浸式工具栏把内容挡住
- Gradle学习系列之三——读懂Gradle语法
- Linux环境下安装MySQL|Linux下Mysql安装教程
- 1.7三分钟读懂Saas、Paas、IaaS的区别
- 安卓中的事件分发机制源码解析
- 计算机图形学基础(零) 介绍
