指南针是一个很有意思的应用程序,这里用“画app吧”开发一个简单的指南针应用程序吧:
1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。
选择”新建“创建一个新的app,缺省情况下的设备是iphone5(或者其它设备)。
2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框,在设备列表中选择firefoxOS的手机。
3.选择“确定”之后,我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar,把它删除掉。
4.向窗口上放置一个指南针控件,然后设置窗口的背景颜色:
5.界面很简单,现在开始编写代码:
在窗口的onOpen事件里,注册传感器事件:
var win = this;
var compass = win.findChildByName("ui-gauge-pointer-compass", true);
if ( window.DeviceOrientationEvent ) {
window.addEventListener("deviceorientation", function( event ) {
var rotateDegrees = 360 - event.alpha;
compass.animSetValue(rotateDegrees);
}, false);
}
else {
compass.setValue(60);
}
7.差不多了,我们点击设备上的"预览"按钮,看看实际的运行效果。
8.我们通过菜单"文件“/”在设备上预览“生成一个URL,在实际的设备上看看效果如何。
9.最后当然是生成安装包了,菜单“云编译”/"编译FirefoxOS安装包"。
这里有我们做好的,
你也可以直接编辑
也可以在线运行
分享到:
相关推荐
App Inventor创意编程:指南针App制作.pdf
王家林的面向Web Cloud的HTML5 App开发实战:Browser&HTML5;&CSS3;&PhoneGap;&jQuery; Mobile& WebSocket&Node;.js(2天)
小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程...
基于Python的入门教程实战篇:网站+iOS App源码.zip 基于Python的入门教程实战篇:网站+iOS App源码.zip 基于Python的入门教程实战篇:网站+iOS App源码.zip 基于Python的入门教程实战篇:网站+iOS App源码.zip 基于...
Android指南针 显示海拔、大气压、角度,idea开发环境。
基于Android指南针app(源码+演示录像+说明)
Html 5 App 界面模板Html 5 App 界面模板Html 5 App 界面模板
App5.HTML : 操作 HTML 文档 App5.history : 使用浏览器历史记录 App5.Geo:使用地理位置 App5.media:使用视频和音频功能 App5.view : 操纵页面改变显示类型(例如:全屏) App5.event : 使用事件 App5.debug : ...
Android实战内容:TestApp
html5 app 模板html5 app 模板html5 app 模板html5 app 模板
Android Studio开发实战:从零基础到App上线
指南针安卓端源码.zip
资源名称:精通引动APP测试实战:技术、工具和案例内容简介:本书全面讲解了移动平台测试方面的技术、技巧、工具和测试用例等实战知识。内容涵盖主流的测试工具,包括JUnit、Monkey、MonkeyRunner、Robotium、...
AXURE RP8实战手册 网站和APP原型制作案例精粹:全选与取消全选效果.rp
Android实战内容:TestApp2
Android实战内容:TestApp1
Mui、H5+开发APP小技巧,点击底部导航切换界面源码文件,欢迎相互学习
构建跨平台APP HTML 5+PhoneGap移动应用实战 - 小例子多,不讲究很深的理论,只要求快速上手 - 技术新,使用HTML5和PhoneGap3,移动APP要用最新最快的技术 - 跨平台,结合HTML5和PhoneGap本身的特色,贯穿全书讲解跨...