DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2018-03-19 19:29
  • 更新:2018-03-19 19:29
  • 阅读:5532

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

分类:快应用

微信小程序其实就是运行在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值以达到效果
1 关注 分享
Trust

要回复文章请先登录注册

远一航一

远一航一

不支持的是不是太多了点?
2018-08-08 15:08
ypnow@163.com

ypnow@163.com

不支持的是不是太多了点?
2018-07-11 09:10