# 一、开发规范

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

# 1、基本原则

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

# 2、页面开发规范

页面使用UTF-8编码
页面首屏数据量大小在1M以内，多余的部分需要使用异步导入的方式；
禁止ajax同步请求；
尽可能减少 div 嵌套；
样式代码不能使用CSS表达式；
dom选择尽量使用ID选择；
所有的标签名必须小写；
所有的标签属性名必须小写；
z-index的最高使用层级为49；
不要随意的使用position定位；
link标签写在head标签内；
script标签写在body标签结尾处；
国际化资源以中文简体资源为首选资源；
业务逻辑入口需放在cmp.ready回调里，如：cmp.ready(function(){业务逻辑})：

http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js
http://cmp/v1.0.0/js/cordova/cordova-plugins.js

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

//======== 代码运行在M3  app上
 <link href="http://cmp/v/css/cmp.css" rel="stylesheet" type="text/css" />
 <script  src="http://cmp/v/js/cmp-i18n.js"></script>
 <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-i18n.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>

页面采用自适应屏幕宽度设置：

<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">

# 3、代码结构

html文件放到html文件夹；
css文件放到css文件夹；
js文件放到js文件夹；
图片文件放到img文件夹；
国际化资源文件放到i18n文件夹。

# 4、命名

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设置文件-->

# 三、cmp.ready里面应该做什么

首先要知道在运行cmp.ready时内部做了什么东西：

function CMPReady() {
        var _this = this;
        _ready.setDeviceClass();
        this.CMPISReady = $.platform.CMPShell ? false : true;
        this.handles = [];
        //M3中的cordova ready
        try {
            !window.parent.CMPREADYMARK && _ready.deviceReadyListener();
        } catch (error) {
            console.log(error);
        }
        //文档ready
        _ready.documentReadyTask();
        //第三方sdk
        _ready.loadJSSDKTask();
        //调试JS任务
        _ready.loadDebugJsTask();
        //除debugJS任务外，其余任务完成后的操作
        pool.free(function() {
            //CMPREADYMARK这个变量业务层在用，没搞懂为啥要开放这个
            window.CMPREADYMARK = _this.CMPISReady = true;
            _ready.setTheme();
            _ready.releaseHandles(_this);
        });
    }

可以看见里面做了加载设备类名、加载第三方SDK、加载主题、等一系列操作，所以只能在cmp.ready里面才能做很多操作，比如注册返回事件cmp.backbutton、比如ready里面获取body元素上的类名等，其实归根结底就是类似jquery的ready，在完成一系列加载之后，才能在ready里面使用api或者一些方法等等。

# 四、js、css在cmp平台下导入的顺序规范以及微协同和M3上导入的差异性

M3平台文件路径

CSS导入参考：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta http-equiv="Content-Security-Policy" />
    <meta name="author" content="Clyne" />
    <title></title>
    <meta name = "cmp-screen-orientation" content = "all">
    <!--cmp样式-->
    <link rel="stylesheet" href="http://cmp/v/css/cmp.css" />
    <link rel="stylesheet" href="http://cmp/v/css/cmp-sliders.css" />
    <!--基础样式-->
    <link rel="stylesheet" href="http://commons.m3.cmp/v/css/base.css" />
    <!--图标样式-->
    <link rel="stylesheet" href="http://commons.m3.cmp/v/fonts/iconfont.css" />
    <!--业务样式-->
    <link rel="stylesheet"  href="http://application.m3.cmp/v/css/app_application.css" />
</head>

JS导入参考:

<!-- 基础模块 -->
<script src="http://cmp/v/js/cmp-i18n.js"></script>
<script src="http://cmp/v/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
<script src="http://cmp/v/js/cordova/cordova-plugins.js"></script>
<script src="http://cmp/v/js/cmp.js"></script>
<!-- cmp组件(按需引入) -->
<script src="http://cmp/v/js/cmp-asyncLoad.js"></script>
<script src="http://cmp/v/js/cmp-webviewListener.js"></script>
<!-- 针对M3应用的公共文件(V5应用可忽略) -->
<script src="http://commons.m3.cmp/v/js/m3-path.s3js"></script>
<script src="http://commons.m3.cmp/v/lib/seajs-2.2.1.js"></script>
<script src="http://commons.m3.cmp/v/config.js"></script>
<!-- 自己业务的模块入口文件 -->
<script async src="http://application.m3.cmp/v/js/sea-app-workbench.js"></script>
</body><!--！！！js的导入必须到body页签的结尾处！！！-->

微协同平台路径

CSS导入参考：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta http-equiv="Content-Security-Policy" />
    <meta name="author" content="Clyne" />
    <title></title>
    <meta name = "cmp-screen-orientation" content = "all">
    <!--cmp样式-->
    <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp.css" />
    <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-sliders.css" />
    <!--业务样式-->
    <link rel="stylesheet"  href="/seeyon/m3/apps/v5/bulletin/css/bulletinIndex.css" />
</head>

JS导入参考:

<!-- 基础模块 -->
<script src="/seeyon/m3/cmp/js/cmp-i18n.js"></script>
<script src="/seeyon/m3/cmp/js/cmp.js"></script>
<!-- cmp组件(按需引入) -->
<script src="/seeyon/m3/cmp/js/cmp-asyncLoad.js"></script>
<script src="/seeyon/m3/cmp/js/cmp-webviewListener.js"></script>
<!-- 自己业务的模块入口文件 -->
<script async src="/seeyon/m3/apps/v5/bulletin/js/bulletinIndex.js"></script>
</body><!--！！！js的导入必须到body页签的结尾处！！！-->

注：导入的顺序需要严格按照规范执行，不然会有报错和找不到方法或者变量的情况。

# 五、国际化资源使用properties开发以及在页面中导入的规范

# 1、文件命名:应用模块名+下横线+通用语言标识

国际化文件命名

# 2、国际化资源，必须以fI18nData JS对象进行扩展

<script>
if(typeof fI18nData == "undefined"){
     fI18nData  = {};
}
fI18nData["mobileWork.label.back"] = "返回";
fI18nData["mobileWork.label.submit"] = "提交";
</script>

# 3、国际化资源调用使用规则

<html>
    <div><i18n key="mobileWork.label.back"></i18n></div> <!-- 使用国际化标签，key为国际化字符串 -->
</html>
<script>
    var backStr = cmp.i18n("mobileWork.label.back"); //返回国际化字符串"返回";
</script>

# 4、国际化资源版本差异

版本	国际化代码开发规范
7.1以下的版本（不包含7.1）	开发源码按照第1点的规范直接用js文件写国际化资源
7.1及以上的版本（包含7.1）	1、源码使用properties文件进行开发
2、需使用S3工具编辑后生成如第1点中的js文件

# 六、ajax调用规范

cmp.ajax({
             url:cmp.seeyonbasepath + "/rest/.....",  //seeyon的rest接口，cmp.seeyonbasepath是seeyon服务器路径，兼容M3和微协同
             type:"GET",
             headers:{   //请求headers，异步seeyon的rest接口设置如下headers字段
                   'Accept' : 'application/json; charset=utf-8',
                   'Accept-Language' : cmp.language,
                   'Content-Type': 'application/json; charset=utf-8',
                   'token' : cmp.token,//微协同请求必带上token
                   'option.n_a_s' : '1'
             },
             success:function(result){
                   //请求成功的业务逻辑
             },
             error:function(error){
                 if(cmp.errorHandle(error) == false){  //请求错误时，先使用cmp的错误处理组件，如果cmp的错误处理组件为false，说明cmp组件处理不了这个错误，需要业务自己处理（cmp处理的错误包括被迫下线、网络断开、session失效、更新密码等）
                     cmp.notification.alert("请求数据失败")
                 }
             }
       });

# 七、应用包之间穿透API设计规范

# 1、文件命名：应用模块名+下划线+api.s3js（文件命名必须和manifest.json中的entry下的jsapi字段保持一致）

API文件名一致

# 2、穿透函数命名规范（openApp对应manifest.json的entry里的openAppMethod的值）

穿透函数命名规范

# 3、穿透函数开发例子(已在初始化应用包里自带)

var mobileWorkApi = (function(){  //api定义的名字和manifest中的openAppMethod字段相对应
    var mobileWorkApi = function(){
        this.basePath = "${data:dependencies.mobilework}";//编辑本模块的路径
    }
    mobileWorkApi.prototype.openApp = function(type,backUrl,option,obj) {
        if(!option) {
            return false;
        }
        var params = {};
        var penetrateUrl = "";//数据穿透页面地址
        if(type=="message") {   //如果数据来自消息
            params.from = "message";
        }
        if("todo" == type){  //如果数据来自待办
            params.from = "todo";
        }
        var params.dataId = option.id;
        var params.xxId = option.xxId;
        if(option.dataType == "chooseCustomer"){//如果数据类型是打开选择客户页面
             penetrateUrl = this.basePath + "/html/chooseCustomer.html";
        }else if(option.dataType == "register"){//如果数据是打开外勤签到记录页面
             penetrateUrl = this.basePath + "/html/register.html";
        }
        cmp.href.next(penetrateUrl,params);
    }
    return new mobileWorkApi();

# 七、UE样式规范

<!-- 以W3C标准的页面布局为例 -->
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta http-equiv="Content-Security-Policy" />
    <meta name="author" content="Clyne" />
    <title></title>
    <meta name = "cmp-screen-orientation" content = "all">
    <!--cmp样式-->
    <link rel="stylesheet" href="http://cmp/v/css/cmp.css" />
    <link rel="stylesheet" href="http://cmp/v/css/cmp-sliders.css" />
    <!--基础样式-->
    <link rel="stylesheet" href="http://commons.m3.cmp/v/css/base.css" />
    <!--图标样式-->
    <link rel="stylesheet" href="http://commons.m3.cmp/v/fonts/iconfont.css" />
    <!--业务样式-->
    <link rel="stylesheet"  href="http://application.m3.cmp/v/css/app_application.css" />
    <style>
       .red{color:red;}
    </style>
</head>
<body>
<header class="cmp-bar cmp-bar-nav cmp-flex-header">
    <div class="cmp-header-left">
        <span class="cmp-icon see-icon-v5-common-arrow-back"></span>
    </div>
    <div class="cmp-title">
        <span>header布局</span>
    </div>
    <div class="cmp-header-right cmp-flex2">
        <span class="cmp-icon see-icon-add-round"></span>
        <span class="cmp-icon see-icon-add-round"></span>
    </div>
</header>
<div class="cmp-content">
  //主容器
</div>
<footer class="cmp-bar cmp-bar-footer">底部按钮</footer>
<script src="/seeyon/m3/cmp/js/cmp-i18n.js"></script>
<script src="/seeyon/m3/cmp/js/cmp.js"></script>
<!-- cmp组件(按需引入) -->
<script src="/seeyon/m3/cmp/js/cmp-asyncLoad.js"></script>
<script src="/seeyon/m3/cmp/js/cmp-webviewListener.js"></script>
<!-- 自己业务的模块入口文件 -->
<script async src="/seeyon/m3/apps/v5/bulletin/js/bulletinIndex.js"></script>
</body>
</html>

编撰人：admin

快速跳转

一、开发规范
二、项目结构规范
三、cmp.ready里面应该做什么
四、js、css在cmp平台下导入的顺序规范以及微协同和M3上导入的差异性
五、国际化资源使用properties开发以及在页面中导入的规范
六、ajax调用规范
七、应用包之间穿透API设计规范
七、UE样式规范

← 如何开发 CMP组件调用方式 →