微信小程序开发要点

小游

PX àRPX转换

WXSS为方便开发者适配不同屏幕尺寸，在小程序引擎底层为开发者做了尺寸单位的转换适配。为了能够让我们的小程序在不同屏幕尺寸下的微信里界面布局表现一致，WXSS的单位要求全部使用rpx，禁止使用其他尺寸单位如px、em等等。

IPHONE6尺寸

1.整体：750px X 1334px

2.顶部状态栏(电池条)：40px

3.导航条：88px (顶部合计128px)

4. 底部标签栏：98px

5. 中间内容区：1108px

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

以上单位x2 即可得到rpx值

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

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

微信样式表WXSS(WEIXIN STYLE SHEETS)

rpx（responsive pixel）:

可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

由上图可发现 1px = 2rpx是非常好口算的转换公式，故而我们要求设计图要以iPhone6的尺寸为基准尺寸来进行设计，这样能够使得开发时的适配难度最为简单，只需要依据设计图，使用标注距离(px)的两倍来采用rpx即可。iPhone6的尺寸参数为下图所示。

设计规范

在前文的基础上做些设计约定UI设计规范

1、以iPhone6的尺寸（750 x 1334）为基准进行设计

UI标注规范

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

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

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

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

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

布局规范

在前文的基础上做些设计约定前端布局规范

在设计稿以 iPhone6为基准的情况下，前端开发布局能够以最为简单的方式实现布局适配，以使小程序在不同屏幕尺寸的微信内布局表现一致。因此做如下开发约定：

1、class属性值命名规范：-的方式，请勿使用下划线、驼峰等非CSS标准的命名方式，例如定义一个class：

符合规范的命名：share-line

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

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

3、严格按照设计切图标注设置距离，如设计为30px，则代码中应为60rpx

4、所有的view、navigate要有class进行WXSS样式修改，需设置padding为0以使其覆盖默认的style避免影响布局

5、微信小程序框架是类似VUE的MVVM（Model-View-ViewModel）渐进式前端框架，从代码维护成本、代码整洁方面考虑，做如下约定：所有的布局表现样式都要写入wxss，在wxml文件中通过class进行引用，请不要在wxml中通过style来设置除了显示和隐藏行为之外的表现样式，即除了style=”display: {{display_style}}”外，控制展示行为的wxss代码不要出现在wxml文件中，非不得已的情况下禁止同时使用用class和style。