在Enyo框架下编写webOS的“hello world！”-手把手带你写一个 web 框架

继上篇讲解了webOS SDK的安装及取得Enyo 1.0的代码后，这节讲如何写一个Enyo的hello wrold。

上一节我们把Enyo的框架代码放在了H:\enyo目录下，目录结构如下图：

目录1.0必须有，且不能改名，否则会引起框架中自带的示例因为路径错误，找不到框架源码而无法运行。目录下的framework是框架的源码。support提供一些开发方面的支持，包括文档，示例等。

所有示例的运行，不需要webOS SDK的支持，直接用webkit内核的浏览器在PC上就能看到效果，所以请先准备好chrome浏览器。SDK 3.0目前也不支持Enyo程序，即使把程序打包安装到模拟器中，也没办法正常运行。以后教程中的示例效果除特别说明，都是PC上在chrome浏览器中看到的效果。

下面讲解Enyo的hello world

Enyo框架带的示例中就有hello world中的样例代码，地址为support目录下的examples\HelloWorld，目录结构如下：

用chrome打开index.html可以看到浏览器中打出Hello World!，如下图：

下面进入代码讲解。

打开index.html

<html> 
<head> 
<title>enyo HelloWorld</title> 
//这里引入框架的JS，可以看到路径里有1.0，所以前面提到复制的时候不能少了1.0 
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script> 
</head> 
<body> 
<script type="text/javascript"> 
new enyo.Canon.HelloWorld().renderInto(document.body); 
</script> 
</body> 
</html>

body中的代码是程序启动时执行的代码。new enyo.Canon.HelloWorld()，创建了一个enyo.Canon.HelloWorld的对象。renderInto(document.body)则是指把前面创建的对象渲染到body中。那enyo.Canon.HelloWorld对象是哪里定义的呢?在HelloWorld.js中。如下：

enyo.kind({ 
 
name: "enyo.Canon.HelloWorld", 
 
kind: enyo.Control, 
 
content: "Hello World!" 
 
});

这些代码的意思是指，创建一个继承自enyo.Control的类enyo.Canon.HelloWorld，并且这个类的一个属性content是Hello World!。

渲染的时候控件的content就会写入html的body标签中。

HelloWorld项目下的其它几个文件作用如下：

HelloWorld.css：定义样式，为空的话，所有的样式都是使用webos内置的样式。

appinfo.json：包含装载和启动程序所必需的一些信息。最主要的属性是ID,webos内所有的程序的ID都是***的，不能重复。

经过这个教程，大家应该对webos的开发有个感性认识，接下来的文章，会介绍enyo开发的基础。