构建移动网站与APP：HTML 5移动开发入门与实战（跨平台移动开发丛书）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 制作一个简单的HTML 5移动APP

本节我们开始实际操作，编写一个简单的HTML 5移动APP，让读者对移动APP技术有一个初步的了解。

1.3.1 开发工具的选择

在编辑器的选择上，Web前端开发自由度是非常高的，即使是文本文档编辑器也可以作为Web开发的工具，但是为了提高开发效率，还是要选择一款功能强大且时髦的编辑器。笔者推荐的是近年来席卷前端界的Sublime Text，一款独具个性的高级编辑器，如图1.3所示。

图1.3 Sublime Text编辑器

Sublime Text支持目前主流的操作系统，如Windows、Mac、Linux，同时还支持32和64位，支持各种流行编程语言的语法高亮、代码补全等。该款编辑器插件相当丰富，同时版本更新勤快。非常酷的一点是编辑器右边没有滚动条，取而代之的是代码缩略图。Sublime Text是一款收费软件，不过目前为止可以无限期地使用。

提示

Sublime Text还有很多意想不到的强大功能，读者可以自行下载体验，下载地址为http://www.sublimetext.com/3。

1.3.2 APP代码的编写

下面我们就编写一个简单的HTML 5 Hello APP代码，让读者直观地体会一下HTML 5移动应用的魅力，详见【代码1-5】。

【代码1-5】

        01  <html>
        02  <canvas id="myCanvas"></canvas>
        03  <script type="text/javascript">
        04  console.log("get id - myCanvas");
        05  var canvas = document.getElementById('myCanvas');
        06  console.log("get context - myCanvas");
        07  var context = canvas.getContext("2d");
        08  console.log("set context font - myCanvas");
        09  context.fillStyle = '#808080';
        10  context.font = 'italic 16px sans-serif';
        11  context.textBaseline='top';
        12  context.fillText('Hello World! ', 0, 50);
        13  context.font = 'bold 24px sans-serif';
        14  context.fillText('Hello world! ', 0, 100);
        15  </script>
        16  </html>

关于【代码1-5】的具体分析如下：

第02行代码定义了HTML 5控件<canvas>，其具体含义是一个画布，可以支持设计人员的自定义图形。

第03～15行为脚本代码，通过JavaScript实现在<canvas>控件上的图形操作，具体方法的含义读者可以参考HTML 5相关文档，本章就不做深入介绍了。同时，第04、06和08行代码分别使用console.log()方法在控制台输出调试信息。

1.3.3 调试运行Hello APP

调试运行HTML 5 APP可以选择专业的HTML调试工具，还可以直接使用具有调试功能的浏览器，譬如Google Chrome、Firefox和Opera这些支持HTML 5标准的浏览器均有强大的调试功能。

下面我们在Firefox浏览器中运行【代码1-5】，页面效果如图1.4所示。然后，我们打开调试器界面（快捷键Ctrl+Shift+J），查看一下调试信息的输出，如图1.5所示。

图1.4 Hello APP运行效果图

图1.5 Hello APP调试运行效果图

从图1.5中可以看到，【代码1-5】中第04、06和08行代码使用console.log()方法在控制台输出的调试信息全部成功显示出来了。

上一章目录下一章