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

Hello World的创建

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

图1.27 Hello World界面

下面，我们分析一下Hello World是怎么创建出来的。

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

图1.28 motto数据源

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

图1.29 绑定motto

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

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

图1.30 添加样式