375 规范

为了保证 pc 和无线转换后字体、间距等 size 大小一致， 无线页面设计/开发按 375 尺寸进行开发。目的是使 在 pc 上 16px 大小的标题，转换无线后 在 375 宽度手机上还是 16px 的大小(对应的 rem 值)。

如果觉得无线 16px 大小太小， 可以通过插件配置。进行调整

{
  "cone": {
    "pxtorem": {
	  "rootValue": 96 //默认rootValue是按100转换的，如果觉得字体不够可以通过rootValue进行调整，参考postcss-px-to-rem插件配置
	}
  },
}

rem 规范

为保证书写方便，cone 搭建以及一码多端都使用了 1rem = 100px 的规范。 即 375px 的屏幕宽度 = 3.75rem

rem 方案有一个自身的 bug，在低端机上会有 1px border 变粗的问题，目前在支持 0.5px 的浏览器上渲染正常。但对于中后台系统，border 变粗问题也不大，如真需要解决，可以自行搜搜 hack 方法

组件替换规范

主要替换规范如下：

• 默认 fusion 的基础组件会互转: @alifd/next <-> @alifd/meet-react
• 搭建的基础组件会互转: 搭建 pc(tc-fusion) <-> mobile(tc-meet)
• 搭建依赖的业务组件(cone 自定义组件流程开发的组件)会互转: @scope/name/lib/index <-> @scope/name/es/mobile/index

• 业务项目中 components 目录下的组件会互转： src/components/Button <-> src/components/Button/mobile

  • 也支持组件统一导出: src/components <-> src/components/mobile
• 其他情况需要在 build.json 中进行 pcToMobile 或者 mobileToPc 的自定义映射配置。

{
  "cone": {
	"coneCode": true,
	"pcToMobile": {
	  "@formily/next": "formily-meet-react-oc",
	  "@scope/name": "@scope/name/mobile"
	}
  }
}

组件 VM 解耦规范

复杂的跨端组件需要开发 pc 入口和 mobile 入口，相当于开发两个组件， 但是不管是 pc 组件还是无线组件，除了视图不一样外，逻辑处理基本是一致的。于是可以将逻辑抽离到 model 层，分别开发 pc 和无线的视图，实现 VM 解耦，提高开发效率。申通可以参考: http://gitlab.sto.cn/sui/sui-pm-tag