3、view、text、image组件，vh、rpx单位

admin

vh
css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px,举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

rpx相对长度单位(750rpx)
手机屏幕自适应尺寸 默认为750rpx 使用rpx 相对尺寸单位，不管在什么尺寸的手机屏幕上都是相对尺寸。
在使用微信开发工具时 ，iphone6的屏幕下做视觉设计，iphone6的屏幕尺寸宽是375px,相对750rpx ，是1：2的比例，如果视觉上是100px,我们在实际操作是就给赋值为：200rpx;因为这个1:2的比例比较好换算。

about.wxss
.contant{
  background-color:  thistle;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding-top: 40rpx;

}
image{
  width: 675rpx;
  height: 675rpx;
  border-radius: 50%;
  margin-bottom: 10px;
}
text{
  font-weight: bold;
  font-size: 60rpx;
  margin-bottom: 10px;
}

about.wxml
<view class="content">
  <image src="../../images/2.png" class="img_banner"></image>
  <text class="info">hello world 中文网</text>
  <image src="http://bbs.bixingcms.com/data/attachment/forum/202002/21/192934puqrqnnunn0xk0km.png"></image>
  <text>wechat</text>
  <image src="/images/3.png"></image>
</view>

weekly.wxml
<view class="content">
  <image src="/images/2.png" class="image_banner"></image>
  <text>电影周周看</text>
  <text>我每周推荐一部好电影</text>
  <text>我的blog是bbs.bixingcms.com</text>
</view>

weekly.wxss
.image_banner
{
  border-radius: 50%;
  width: 600rpx;
}

app.wxss 全局设置栏式
.content{
  background-color:  thistle;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

app.json 全局设置新增页面地址、前后顺序优先级
{
  "pages": [
    "pages/about/about","pages/weekly/weekly"
  ],
  "sitemapLocation": "sitemap.json"
}