我们在开发web页面时，使用HTML+CSS+JS这样的组合来构建展示给用户的页面，其中HTML是用来描述当前页面的结构，CSS是用来描述页面的样式，JS通常处理页面与用户之间的交互。
而小程序开发中，其自己的一套书写规范，但与web页面也有相似之处，如WXML在其中就充当了HTML的角色。和HTML非常相似，WXML也是由标签、属性等构成，但也存在着众多不一样的地方：
标签名不一样，在HTML中我们经常会使用div、p、span等来组合出不同的效果。而在小程序中，我们会使用view、button、text等标签，同时小程序页提供了地图、视频、音频等组件供开发者使用。
多了一些wx:if这样的属性以及表达式，在web页面开发中，我们通过使用JS来控制DOM，以及响应用户操作。而小程序通过{{}}的语法将数据绑定到界面，同时也可以通过wx:开头的属性来控制数据的显示。
<!--index.wxml--> <view> <text>{{msg}}</text> <view wx:if="{{flag}}">当前显示状态为true</view> </view>
3 WXSS样式
WXSS具有CSS大部分特性，同时也做了一些扩充和修改：
新增了尺寸单位。为了考虑手机设备屏幕宽度和设备像素比的不同，需要换算，小程序提供了新的尺寸单位rpx，其不需要开发者自己换算，而是由小程序底层来完成。
提供全局样式和局部样式。在app.wxss中可以设置全局样式，而在具体的页面.wxss中可以设置当前页面的样式。
此外WXSS仅支持部分CSS选择器。
/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; }
4 JS交互
在web开发中，我们使用JS来控制与用户的交互行为，而小程序中也是使用JS来处理用户的操作。如先前，我们在页面上显示“Hello World！”。我们只需要在页面的JS文件中，对其进行设置值即可。
Page({ data: { msg: 'Hello World', flag: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, onLoad: function () { }, })