样式多态

cml文件中的style标签支持样式的多态，即可以针对不同的平台写不同的样式，格式如下：

  1. <style>
  2. @media cml-type (支持的平台) {
  4. }
  5. .common {
  6.   /**/
  7. }
  8. <style>

其中支持的平台为可以用逗号分隔多个平台，可选平台为web,weex,wx,alipay,baidu。demo示例，class1在各端的差异实现。

  1. <template>
  2.   <view><text class="class1">chameleon</text><view>
  3. </template>
  4. <script>
  5.   class DemoPage {
  7.   }
  8.   export default new DemoPage();
  9. </script>
  10. <style>
  11. @media cml-type (web) {
  12.   .class1 {
  13.     color: red;
  14.   }
  15. }
  16. @media cml-type (weex) {
  17.   .class1 {
  18.     color: green;
  19.   }
  20. }
  21. @media cml-type (wx,alipay,baidu) {
  22.   .class1 {
  23.     color: blue;
  24.   }
  25. }
  26. </style>
  27. <script cml-type="json">
  28. {}
  29. </script>

注意： 多态差异语法只能在cml文件中使用，不能在.css,.less等其他样式文件中使用，如果需要分文件实现，可以在多态内部分别引入文件。例如：

  1. <style lang="less">
  2. @media cml-type (web) {
  3.   @import "./style1.less";
  4. }
  5. @media cml-type (weex) {
  6.   @import "./style2.less";
  8. }
  9. @media cml-type (wx,alipay,baidu) {
  10.   @import "./style3.less";
  12. }
  13. </style>