1.4 沙场大练兵：Hello World的创建

1-3 Hello World的创建

在创建项目之后，开发工具会添加默认的目录和页面。在默认的页面上，可以看到有“Hello World”文字，如图1.29所示。

下面，我们分析一下Hello World是怎么创建出来的（实例位置：源码\第1章\demo）。

（1）在pages/index/index.js文件里，Page的data里提供了数据源motto, data的数据可以动态地绑定到WXML页面中，如图1.30所示。

图1.29 Hello World界面

图1.30 motto数据源

（2）在pages/index/index.wxml文件里，通过双大括号（{{}}）的方式，将motto绑定到页面里，如图1.31所示，motto对应的值就可以在页面里显示出来。

图1.31 绑定motto

（3）在pages/index/index.wxss文件里，通过class的方式给Hello World添加样式，距顶部的高度为200px，如图1.32所示。

图1.32 添加样式

在实际的开发过程中也是这样来进行的：在JS文件里进行业务逻辑的处理，动态地提供数据；在WXML文件里绑定数据，渲染界面；在WXSS文件里添加样式，美化页面。这样就可以完成微信小程序的开发了。