微信小程序入门与实战之rpx响应式单位与flex布局

新建页面的技巧与规则

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

app.json必须有一个pages数组：

一个小程序页面由四个文件组成，分别是：

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名
新建pages文件夹，再新建index文件夹，点击新建page可以同时自动创建四个基本文件

创建后编译器会自动在app,json目录的pages下配置好刚刚创建的界面（在json文件格式没有错误的清情况下才会自动配置）：

这时候我们编译运行项目，就能看见效果：

image标签显示一张图片

微信小程序使用image标签显示图片，通过src获取图片，src先输入的/表示根目录，获取根目录下创建好的images文件夹中的图片。
绝对路径表示：

相对路径表示（…表示上一级的目录）先返回两次的上一级目录到根目录再访问images文件夹：

小程序rpx响应式单位的特点

当我们查看预览效果发现小程序显示出来的效果时椭圆，而不是我们源文件的正圆：

那我们该怎么将图片调整为正常的比例呢？
通过设置style属性（源文件的边长也为200px）：

这时候我们能发现显示出来的效果为正圆（但显示大小比源文件的大）：

为了使小程序能够达到我们想要的效果，我们应该使用微信官方推荐的rpx。

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

那么为什么我们刚开始我们没有设置style的时候显示的图片是长方形呢？
因为image标签默认宽度320px、高度240px。

分离CSS样式到WXSS文件中

不推荐直接将样式用style写在标签上,最好将样式写在WXSS文件中,WXSS 与我们熟知的CSS没有太大差别。

.avatar{
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}
1
2
3
4
5

<!--pages/welcome/welcome.wxml-->
<image class= "avatar" src="../../images/avatar/1.png"></image>
<text>Hello</text>
<button>开启小程序之旅</button>

1
2
3
4
5

初识flex布局进行垂直分布布局

使用View标签，类似于html中的div，我们经常在微信小程序中布局的使用， 我们称之为容器。
flex是基于容器的布局，我们要使用container来表示flex:

.container{
  display: flex;
}
1
2
3

通过view标签使用container

<view class="container">
  <image class= "avatar" src="../../images/avatar/1.png"></image>
  <text>Hello</text>
  <button>开启小程序之旅</button>
</view>
1
2
3
4
5

这时候我们运行项目，会发现布局改变,如图所示：

但我们实际想要的是垂直的效果，我们要将flex-direction修改为column，默认的是row也就是我们刚刚没有设置flex-direction却也能看到水平排列的原因，设置好的效果如图所示：

不推荐使用微信官方的button组件（会有一些内置的样式、属性），这里我们通过自定义的View来实现Button

  <view>
    <text>开启小程序之旅</text>
  </view>
1
2
3

flex布局的align-items

我们在flex布局的样式编写中添加代码：

  align-items: center;
1

得到了居中的效果

为导航语添加样式：

.motto{
  color: #666;
  margin-top: 160rpx;
  font-size: 32rpx;
  font-weight: bold;
}
1
2
3
4
5
6

  <text class="motto">Hello</text>
1

如果我们想设置全局的字体颜色，可以在app.wxss下设置（如果没有设置单独的样式，则该字体默认为app.wxss下配置的字体）

自己编写一个Button组件

设置外边框属性（设置边框内的文字水平居中要用到text-align: center），边框圆角为border-radius：

.journey-container{
  border: 1px solid #405f80;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
  margin-top: 200rpx;
}
1
2
3
4
5
6
7
8

设置边框内文字属性（使用line-height: 80rpx与边框等高来实现垂直居中）：

.journey{
  font-size: 22rpx;
  color: #405f80;
  line-height: 80rpx;
  font-weight: bold;
}
1
2
3
4
5
6

应用样式：

  <view class="journey-container">
    <text class="journey">开启小程序之旅</text>
  </view>
1
2
3

实现效果：

实现全屏的背景颜色

当我们在container使用background-color时我们发现背景颜色并不能填充整个布局，因为我们并没有设置container的高度，其高度是自适应的，跟随内部布局变化而变化：

通过在app.json下设置： “window”:{“navigationBarBackgroundColor”:“#b3d4db”
}实现导航栏的背景颜色达到沉浸的效果：

那么我们该如何实现全屏的背景颜色呢?
打开调试器，可以看到其实在我们自定义的View的外层还有一层page:

所以我们只需要设置page的默认背景颜色就可以全屏的背景颜色：
：