只跨web和小程序的应用

背景介绍

通常情况下，cml框架会生成跨H5、小程序、客户端的应用。为了H5、小程序、客户端初始样式呈现效果一致，cml会添加一致性基础样式。在开发模式下，构建会严格校验CMSS语法，只允许书写跨H5、小程序、客户端都通用的 CMSS 规则。因此，受限于客户端的 CMSS 渲染能力，开发会有诸多限制，另一方面，当开发者只需要跨H5和小程序应用时，开发会变得很轻便。

通过下面的表格，展示 CMSS 跨端 能力差异：

CSS属性 H5 小程序 weex
布局 all all flexbox
盒模型 all all 只支持display:border-box
float浮动 ✅ ✅ ❌
display:inline-block|none ✅ ✅ ❌
ID选择器 ✅ ✅ ❌
类选择器 ✅ ✅ ✅
属性选择器 ✅ ✅ ❌
级联选择器、派生选择器(后代、子元素、相邻兄弟) ✅ ✅ ❌
选择器分组 ✅ ✅ ✅
伪类(:active|:focus) ✅ ✅ ✅
伪类(:hover|:link|:visited|:first-child|:lang) ✅ ✅ ❌
伪元素(:first-letter|:first-line|:before|:after) ✅ ✅ ❌
百分比定值 ✅ ✅ ❌
line-height:1 ✅ ✅ ❌
尺寸 px|rem|em|vw|vh px|rpx px
!important ✅ ✅ ❌

项目初始化与配置

CMSS

此时，CMSS 语法和可用属性，不再受限于客户端的渲染。CMSS 遵循 W3C 层叠样式表 (Cascading Style Sheets，缩写为 CSS）规范，在此基础上，小程序的标准样式会有一些限制。

一致性基础样式可选

如果你希望去除小程序、客户端的的一致性基础样式，修改项目根目录下的 chameleon.config.js，如下：

cml.config.merge({
  baseStyle: {
    wx: false,
    alipay: false,
    baidu: false,
    web: true,
    weex: false
  }
})

如果你希望更细粒度的去配置某一组件或者页面是否去除基本样式，可以在对应组件或者页面的json文件中配置baseStyle字段，baseStyle为false时表示该组件或页面不添加默认样式，不配置该字段时是默认添加默认样式的。示例如下：

<script cml-type="json">
{
  "base": {
    "baseStyle": true,
    "usingComponents": {
      "demo-com": "/components/demo-com/demo-com"
    }
  },
  "web": {
    "baseStyle": false
  },
  "wx": {
    "baseStyle": true,
    "navigationBarTitleText": "index",
    "backgroundTextStyle": "dark",
    "backgroundColor": "#E2E2E2"
  },
  "alipay": {
    "baseStyle": false,
    "defaultTitle": "index",
    "pullRefresh": false,
    "allowsBounceVertical": "YES",
    "titleBarColor": "#ffffff"
  }
}
</script>

results matching ""

    No results matching ""