新建页面的技巧与规则
小程序包含一个描述整体程序的 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;
}
<!--pages/welcome/welcome.wxml-->
<image class= "avatar" src="../../images/avatar/1.png"></image>
<text>Hello</text>
<button>开启小程序之旅</button>
初识flex布局进行垂直分布布局
使用View标签，类似于html中的div，我们经常在微信小程序中布局的使用， 我们称之为容器。
flex是基于容器的布局，我们要使用container来表示flex:
.container{
display: flex;
}
通过view标签使用container
<view class="container">
<image class= "avatar" src="../../images/avatar/1.png"></image>
<text>Hello</text>
<button>开启小程序之旅</button>
</view>
这时候我们运行项目，会发现布局改变,如图所示：
但我们实际想要的是垂直的效果，我们要将flex-direction修改为column，默认的是row也就是我们刚刚没有设置flex-direction却也能看到水平排列的原因，设置好的效果如图所示：
不推荐使用微信官方的button组件（会有一些内置的样式、属性），这里我们通过自定义的View来实现Button
<view>
<text>开启小程序之旅</text>
</view>
flex布局的align-items
我们在flex布局的样式编写中添加代码：
align-items: center;
得到了居中的效果
为导航语添加样式：
.motto{
color: #666;
margin-top: 160rpx;
font-size: 32rpx;
font-weight: bold;
}
<text class="motto">Hello</text>
如果我们想设置全局的字体颜色，可以在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;
}
设置边框内文字属性（使用line-height: 80rpx与边框等高来实现垂直居中）：
.journey{
font-size: 22rpx;
color: #405f80;
line-height: 80rpx;
font-weight: bold;
}
应用样式：
<view class="journey-container">
<text class="journey">开启小程序之旅</text>
</view>
实现效果：
实现全屏的背景颜色
当我们在container使用background-color时我们发现背景颜色并不能填充整个布局，因为我们并没有设置container的高度，其高度是自适应的，跟随内部布局变化而变化：
通过在app.json下设置： “window”:{“navigationBarBackgroundColor”:“#b3d4db”
}实现导航栏的背景颜色达到沉浸的效果：
那么我们该如何实现全屏的背景颜色呢?
打开调试器，可以看到其实在我们自定义的View的外层还有一层page:文章来源：https://www.toymoban.com/news/detail-767915.html
所以我们只需要设置page的默认背景颜色就可以全屏的背景颜色：
：文章来源地址https://www.toymoban.com/news/detail-767915.html
到了这里，关于微信小程序入门与实战之rpx响应式单位与flex布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
