微信小程序开发要点 .pdf

小游微信小程序开发要点(草稿)

BYFURY2018-02-27@广州小游网络科技有限公司

微信样式表WXSS(WEIXINSTYLESHEETS)

PXàRPX转换

rpxresponsivepixel:

（）

WXSS为方便开发者适配不同可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在

屏幕尺寸，在小程序引擎底层为开iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=

发者做了尺寸单位的转换适配。为375px=750物理像素，1rpx=0.5px=1物理像素。

了能够让我们的小程序在不同屏幕

尺寸下的微信里界面布局表现一

致，WXSS的单位要求全部使用

rpx，禁止使用其他尺寸单位如

px、em等等。

IPHONE6尺寸

由上图可发现1px=2rpx是非常好口算的转换公式，故而我们要求设计

1.整体：750pxX1334px图要以iPhone6的尺寸为基准尺寸来进行设计，这样能够使得开发时的适配

2.顶部状态栏(电池条)：40px难度最为简单，只需要依据设计图，使用标注距离(px)的两倍来采用rpx即

3.导航条：88px(顶部合计128px)可。iPhone6的尺寸参数为下图所示。

4.底部标签栏：98px

5.中间内容区：1108px

在没有底部标签栏时，内容区高度

为1206px

以上单位x2即可得到rpx值

设计规范UI设计规范

在前文的基础上做些设计约定1、以iPhone6的尺寸（750x1334）为基准进行设计

UI标注规范

为了能够让前端实现界面布局时完全呈现与设计图一样的表现结果，设

计图在进行标注时：

1、每个切块要标注高度和宽度

2、每个切块要标注其与邻近一个切块或者屏幕边界的左(或右)距离

3、每个切块要标注其与邻近一个切块或者屏幕边界的上(或下)距离

4、边界上的一个点，应当有路径沿着垂直方向和水平方向的标注线到达对面

边界或者最远的一个切块

布局规范前端布局规范

在前文的基础上做些设计约定在设计稿以iPhone6为基准的情况下，前端开发布局能够以最为简单的

方式实现布局适配，以使小程序在不同屏幕尺寸的微信内布局表现一致。因

此做如下开发约定：

1、class属性值命名规范：name-name的方式，请勿使用下划线、驼

峰等非CSS标准的命名方式，例如定义一个class：

符合规范的命名：share-line

不符合规范的命名：ShareLine、share_line

2、所有像素单位必须采用rpx，禁止使用其他如px、em、pt等单位

3、严格按