- 微信小程序开发图解案例教程：附精讲视频（第3版）
- 刘刚
- 348字
- 2022-01-17 14:08:45
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文件里添加样式，美化页面。这样就可以完成微信小程序的开发了。