3-5 制作项目启动页（上）

自适应单位：RPX

先把页面的骨架写出来。就是在wxml中写。

关于标签 <view> 类似于html中div，1、起到容器的作用，2、另外在分割文档不同部分。view和div是一样的。没有什么实际的意义，不像image。img是显示控制一张图片。view没有这样很强的功能。其实就是没有语义化。

先把页面中的内容写出来。

大的容器，放一个图片，然后文本。接着是一个框，里面一个文本。

这样的就构成了页面的骨架。接着填充这些东西。image要知道哪张图片，所以要添加属性src=“” 。所以在根目录下新建一个目录images放图片。在目录中拷贝文件。根目录的路径就可以这样写 /images/avatar.png 。关于图片路径容易错误，比如会莫名其妙的缺少空格。有个小技巧，点击图片，会在图片预览框的下面给出提示的路径，复制一下就行了。

图片路径加了之后，有效果了，但是高和宽不是我们要的样子。因为小程序会给没有设置宽高的图片一个默认值：宽300px，高225px（从小程序的文档里 组件——媒体组件——image）；两个text里面写上要显示的文字。另外text不写，文字也可以显示。1、关于标签<text>，用于放置文本，如果没有text也是可以显示文字的，但是不能设置样式了。2、跟html不一样的：在小程序里只有text包围的文字，才能被长按选中。这样的文字才能复制。

调整image的大小。设计图中，图像是200x200px ，一种样式是行内样式，200x200px；但是显示出来之后，会很大。所以不能用习惯的px这样单位，用rpx。为什么？

我们在看图片大小的时候，200x200 px是物理上的大小。但是小程序里面px是逻辑分辨率的概念。iphone下面，逻辑分辨率和物理分辨率是2:1的关系。也就是说，如果这里面用的是100px就没有问题了。跟200rpx效果一样。但是很少用px逻辑分辨率，因为小程序需要跑在不同的机型上，不同机型上，分辨率不一样，很多时候我们需要动态去适应不同分辨率的设备。需要用rpx做这个自适应。

关于自适应单位RPX，推荐在iphone6中设计大小，然后用RPX单位，用px像素也是可以的，但是会出现问题，比如如果用200px，iphone4中，屏幕比较小，显得很大，而用更大的屏幕显示还是这么大小，那么就会让视觉关系失调，显得又很小。也就是说用px，在任何机型上显示都是固定大小。但是我们希望的是，在不同的机型上，等比例缩小的。这样才会在高宽上保持一个很好的等比关系。所以iPhone 6作为基准线，750像素的宽度来做效果图，比如你要做一个图片，200个像素，就直接在小程序里面写200rpx。它们之间的转化关系是1：1的。用rpx为单位，在其他屏幕里，会自适应相应的大小，比较合适。px是物理分辨率，rpx是逻辑分辨率，iphone6下面物理分辨率和逻辑分辨率是2：1的关系。不同机型，用rpx自适应。

关于图片，最直接的方法，新建一个images目录，然后图片放在目录中，在wxml（理解成w微信的xml）中标签image，设置src。