目录

  1. 开发规范
  2. 项目结构规范

开发规范

开发人员需遵照开发规范执行

基本原则

  1. 由于jquery在移动端的开发存在性能问题，页面不允许导入jquery库，如果已经习惯了jquery开发的，可以导入zepto库进行代替；
  2. 样式需进行兼容处理；
  3. UE交互保持一致性、UI风格保持一致性、代码风格保持一致性；
  4. 谨慎引入第三方前端库，引入时需要充分考虑性能、稳定性、可维护性和技能要求。

页面开发规范

  1. 页面使用UTF-8编码
  2. 页面首屏数据量大小在1M以内，多余的部分需要使用异步导入的方式；
  3. 禁止ajax同步请求；
  4. 尽可能减少 div 嵌套；
  5. 样式代码不能使用CSS表达式；
  6. dom选择尽量使用ID选择；
  7. 所有的标签名必须小写；
  8. 所有的标签属性名必须小写；
  9. z-index的最高使用层级为49；
  10. 不要随意的使用position定位；
  11. link标签写在head标签内；
  12. script标签写在body标签结尾处；
  13. 国际化资源以中文简体资源为首选资源；
  14. 业务逻辑入口需放在cmp.ready回调里，如：cmp.ready(function(){业务逻辑})；
  15. 如果开发的代码是运行在M3 app里 页面需要导入cordova js库
    http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js
    http://cmp/v1.0.0/js/cordova/cordova-plugins.js

  16. 必须导入cmp平台的js，导入文件规则

     //======== 代码运行在M3  app上
 <link href="http://cmp/v/css/cmp.css" rel="stylesheet" type="text/css" />
 <script  src="http://cmp/v/js/cmp.js"></script>

 //=======代码运行在微信、钉钉等或者第三方app以url的方式接入oa的H5页面时
 <link href="/seeyon/m3/cmp/css/cmp.css" rel="stylesheet" type="text/css" />
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
  17. 页面采用自适应屏幕宽度设置。

Example

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

代码结构

  1. html文件放到html文件夹；
  2. css文件放到css文件夹；
  3. js文件放到js文件夹；
  4. 图片文件放到img文件夹；
  5. 国际化资源文件放到i18n文件夹。

命名

camel命名风格

项目结构规范

project
      |----html                                  <!--html文件夹-->
            -- index.html
      |----js                                    <!--js文件夹-->
           -- index.js
      |----css                                   <!--css文件夹-->
           -- index.css
      |----img                                   <!--图片文件夹-->
      |----i18n                                  <!--国际化文件夹-->
           -- project_en.js
           -- project_zh_CN.js
           -- project_zh_TW.js
      |----s3scriptjspdata                       <!--S3编译文件夹-->
           -- project_m3_commandata.data
           -- project_wechat_commandata.data
           -- project_dingding_commandata.data

      -- manifest.json                            <!--模块配置文件-->
      -- newModule_m_api.s3js                     <!--模块消息穿透、门户待办穿透api设置文件-->