新建页面的技巧与规则

小程序包含一个描述整体程序的 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:

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

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

【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
【DRF+Django】微信小程序入门到实战_day01(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 文档链接微信开放文档 # 课程内容 (1)flex 布局 (2)fle ...
微信小程序入门与实战笔记
微信小程序目录微信小程序 1微信小程序介绍 1.1什么是微信小程序 1.2小程序特点 1.3对开发者的影响 1.4分辨率与rpx 1.4.1英寸 1.4.1分辨率(pt): 1.4.2分辨率(px ...
【DRF+Django】微信小程序入门到实战_day04(上)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_用户登录页面 ...
【DRF+Django】微信小程序入门到实战_day03(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_发送短信验证码 ...
微信小程序入门到实战(1)-基础知识
1.微信小程序介绍微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 1 ...
微信小程序入门与实战之初识小程序的自定义组件
文章列表顶部轮播图跳转为每个轮播图设置点击响应函数,为其设置参数为文章的id 小程序tabBar选项卡配置基础我们在app.json配置tabBar选项卡: "tabBar": ...

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