微信小程序转快应用兼容教程-样式篇

本文已过期。推荐将小程序先转换为uni-app项目，详情；然后从uni-app编译为快应用，详情

==============================以下为过期内容========================

微信小程序其实就是运行在webview中的html网页，理论上支持符合w3c规范的所有css样式；快应用采用原生控件渲染，布局采用CSS Flexbox（弹性盒）样式，针对部分原生组件，对 CSS 进行了少量的扩充以及修改，具体请查看快应用文档快应用style样式。

DCloud推出的小程序转换工具，会完成快应用支持样式的自动转换，对于快应用不支持的css代码，转换工具会注释并加上备注，如下：

  /*display:inline-block;  
 comment by uniapp*/

快应用和小程序的样式差异及解决方案

DCloud转换工具无法自动转换的样式定义，需要开发者手动修改部分代码，主要差异及解决方案示例如下：

• 伪类选择器：快应用不支持before、after等伪类选择器；开发者若在小程序中通过before/afetr伪类来画线画图标的，可改用border或是image组件解决；
• margin:0 auto;快应用不支持auto，若需居中显示，可通过给父元素添加align-items:center;实现
• 快应用颜色不支持 rgb 及 rgba，需转换为16进制颜色
• position：absolute;快应用不支持absolute，建议换成stack标签，实现该效果
• display：block/inline/inline-block;快应用不支持这几样式，导致转换后样式和预期不一致，开发者可以改变父元素的flex-direction值，子元素的flex-grow/shrink值以达到效果