微信小程序开发 -页面布局介绍- 附简单小程序实例（底部）

最新推荐文章于 2025-07-15 10:00:49 发布

在code里寻找乐趣

最新推荐文章于 2025-07-15 10:00:49 发布

阅读量8.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信开发文章标签：微信小程序小程序开发

本文链接：https://blog.youkuaiyun.com/bifjhh_sk/article/details/79134704

本文介绍了微信小程序的页面布局，包括移动端分辨率的理解，如pt、px、PPI，重点讲解了rpx作为自适应单位的使用。通过一个小程序实例，详细阐述如何基于iPhone6的物理分辨率进行设计，以及如何创建启动页面、构建轮播图和新闻列表。内容涵盖Swiper组件、数据绑定和Page生命周期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    小程序实例 
关于移动端分辨率 
将不同尺寸的设计图，按照一定的比例，完美的显示在页面之中
 
pt 
逻辑分辨率 
和屏幕的物理尺寸有关
长度和视觉单位
 
px 
物理分辨率
不是长度相关的单位
1px就是一个像素点
1 pt物理尺寸下有多像素点（px）
 
Reader 
求每一个pt下面包含了多少个px
 
PPI（DPI） 
利用分辨率什么的实用勾股定理算出的数值
 
关于rpx–小程序的自适应单位 
1个pt可以有一个px构成，也可以有2个，或者更多
iPhone6下2个px构成一个pt
 
如何做不同分辨率设备的自适应 
以iPhone6的物理像素750X1135为视觉稿进行设计，在小程序中实用rpx为单位
iPhone6 1px = 1rpx = 0.5pt
 
为什么实用iPhone6的物理分辨率来做设计 
iPhone6 下 1px = 1rpx
iPhone6plus 1px = 0.6rpx
小程序官方推荐使用iPhone6来进行设计 
 并不是所有的单位都适用rpx
 
开启项目 
创建一个纯净的项目模板
配置app.json创建目录 
 

                