小程序运用_小程序切图尺寸-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43182021/article/details/90259245

该博客围绕小程序开发展开，介绍了以iphone6为调试设备时设计稿尺寸与rpx、px的关系，说明了rpx与px的选择场景，推荐使用flex布局，提及不同机型默认字体，还阐述了全局样式设置、import路径、组件选择器使用、小程序跳转等开发要点。

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

一、小程序尺寸单位与设计原则

以iphone6（375*667）作为调试设备，设计稿以750*1334 ，改设备下设计稿与rpx为1:1关系，以px为单位时，则除以2。

二、rpx与px的选择

在绝大多数情况下，都可以用rpx,但以下几种情况需要具体的斟酌

1、字体的大小（字体是否需要随着机型放大缩小）

2、当设置border时

三、推荐使用flex布局

四、苹果机型默认字体：苹方安卓默认字体：思源

五、小程序会在每个页的最顶部生成page标签，当涉及到全局样式时，可以通过page来设置

app.wxss文件

page{
    font-family: "PingFangSC-Thin";
    font-size:32rpx;
}

组件只能继承极少数全局样式：font、 color

六、在使用import时要使用相对路径

七、在组件中不用使用Id选择器

八、小程序之间的跳转

前提：两个小程序必须关联同一个公众号（服务号或者是订阅号）

 <navigator class="nav" target="miniProgram" app-id="wx8ffc97ad5bcccc89" open-type="navigate">
 <image class="vendor" src="/images/my/vendor.png"></image>
 </navigator>

target：miniProgram

app-id：你要跳转的小程序的app-id

open-type: navigate