05.静态页面和样式

组件

微信小程序中提供了专门的组件来构建小程序页面结构，例如：

• <view>：容器组件，类似于 HTML 中的 <div>；
• <text>：文本组件，用来设置所有的文本内容；
• <image>：图片组件
• <navigator>：导航组件，类似于 HTML 中的 <a>；

例如我们在一个 .wxml 文件中设置以下代码：

<view>
    <text>Hello Wechat</text>
</view>

样式

小程序中提供了新的尺寸单位 rpx，默认以 iphone6 的宽度 750 为基准。也就是说，当我们拿到的原型图宽度为 750px 时，我们在写样式时就可以完全按照原型图的尺寸 1: 1 换算成 rpx。如果我们拿到的原型图宽度为 375px 时，我们在写样式时就可以完全按照原型图的尺寸 1: 2 换算成 rpx。

.box {
    width: 750rpx;
    height: 300rpx;
}

引入外部样式

小程序中的公共样式我们也可以提取出去，然后在页面中引入外部样式：

@import 'common.wxss'