目录

1. 开发工具
   • S3编译工具
   • Chrome浏览器
   • Android Debug版壳
   • 翻墙软件
   • 前端编码器
   • fidder抓包工具
   • 360手机助手
2. 应用包介绍和知识点讲解
   • 应用包分类
   • 应用包区别
   • 应用包manifest配置文件说明
   • 新增应用后台配置文件m3Apps.xml说明
   • 应用包关系隐射表
   • 应用包更新机制
3. 页面资源导入路径指南

开发工具

为高效开发M3应用，需要掌握以下常用开发工具：

S3编译工具

S3编译工具是CMP平台自行研发的一款用于将开发者的源码编译成可运行于M3端、微信端、钉钉端等的代码编译工具，同时集文件合并、打包、性能分析等功能。该工具宗旨开发一套代码，运行于各个端。 M3和V5应用开发的源码都是基于此工具进行编译的，并已成一套明文规则，其使用流程如下：

编写配置文件

配置文件是一个json格式的配置文件，S3编译工具根据此文件的配置字段进行编译输出（和grunt编译原理类似），常用字段如下：

1. version：应用模块版本号字段(字符串类型)
2. cordova：cordova导入路径字段（编译M3运行环境才添加此字段）（字符串类型）
3. mergelist：合并文件字段（数组类型）
4. modulepath：模块路径定义字段，以子父级路径进行的扩展（json格式）
5. dependencies：路径依赖关系字段（json格式）

以编写一个应用模块的为例(其中模块名为new_module,依赖模块包括other_module和cmp平台)：

文件名newModule_M3_commondata.data(运行于M3壳端的代码)

{
    "version":"1.0.0",
    "cordova":"<script src=\"${data:dependencies.cmp}\/js/cordova\/__CMPSHELL_PLATFORM__\/cordova.js\"></script>\r\n<script src=\"${data:dependencies.cmp}\/js/cordova\/cordova-plugins.js\"></script>",//页面导入和原生交互的cordova  js文件
    "mergelist":[
                    {
                       "out":"js\/all.js",//合并输出的js文件
                       "in":["js\/one.js","js\/two.js","js\/three.js"]//需要合并的js文件
                    }，
                    {
                       "out":"css\/all.css",//合并输出的css文件
                       "in":["css\/one.css","css\/two.css","css\/three.css"]//需要合并的css文件
                    }
                ],
    "modulepath":{
       "cmp":{"path":"http://cmp"},//cmp 平台资源路径
       "v5":{  //v5大模块定义
            "new_module":"http://new_module.v5.cmp",//newModule的资源路径
            "other_module":"http://other_module.v5.cmp"//other模块的资源路径
       }
    },
    "dependencies":{//依赖关系的定义解析
        "cmp":"${data:modulepath.cmp.path}/v",//把modulepath字段中定义的路径关系进行解析
        "new_module":"${data:modulepath.v5.new_module}/v",
        "other_module":"${data:modulepath.v5.other_module}/v"
    }
}

//编译前的html页面（源码）导入的地址路径对应配置单如下：
<link rel="stylesheet" href="${data:dependencies.cmp}/css/cmp.css">

<s3:data name='cordova' />

<script src="${data:dependencies.cmp}/js/cmp.js"></script>
<script src="${data:dependencies.new_module}/js/new_module.js"></script>
<script src="${data:dependencies.other_module}/js/other_module.js"></script>


//成功编译后的html对应的路径如下：
<link rel="stylesheet" href="http://cmp/v/css/cmp.css">

<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>
<script src="http://new_module.v5.cmp/v/js/new_module.js"></script>
<script src="http://other_module.v5.cmp/v/js/other_module.js"></script>

文件名newModule_wechat_commondata.data(运行于微信端的代码)

{
    "version":"1.0.0",
    "cordova":"",//微信端不需要导入与原生交互的js
    "mergelist":[
                    {
                       "out":"js\/all.js",//合并输出的js文件
                       "in":["js\/one.js","js\/two.js","js\/three.js"]//需要合并的js文件
                    }，
                    {
                       "out":"css\/all.css",//合并输出的css文件
                       "in":["css\/one.css","css\/two.css","css\/three.css"]//需要合并的css文件
                    }
                ],
    "modulepath":{
       "cmp":{"path":"/seeyon/m3/cmp"},//cmp 平台在seeyon的路径
       "v5":{  //v5大模块定义
            "new_module":"/seeyon/m3/apps/v5/new_module",//newModule在seeyon的路径
            "other_module":"/seeyon/m3/apps/v5/other_module"//other模块在seeyon的路径
       }
    },
    "dependencies":{//依赖关系的定义解析
        "cmp":"${data:modulepath.cmp.path}",//把modulepath字段中定义的路径关系进行解析
        "new_module":"${data:modulepath.v5.new_module}",
        "other_module":"${data:modulepath.v5.other_module}"
    }
}

//编译前的html页面（源码）导入的地址路径对应配置单如下：
<link rel="stylesheet" href="${data:dependencies.cmp}/css/cmp.css">

<script src="${data:dependencies.cmp}/js/cmp.js"></script>
<script src="${data:dependencies.new_module}/js/new_module.js"></script>
<script src="${data:dependencies.other_module}/js/other_module.js"></script>


//成功编译后的html对应的路径如下：
<link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp.css">

<script src="/seeyon/m3/cmp/js/cmp.js"></script>
<script src="/seeyon/m3/apps/v5/new_module/js/new_module.js"></script>
<script src="/seeyon/m3/apps/v5/other_module/js/other_module.js"></script>

builderversion(版本编译号)

在微信端由于有缓存的存在（服务器缓存了js，html，css，图片等资源，避免页面每次向服务器请求同样的资源，增加流 量消耗和页面性能展现），当有文件修改后，虽然替换了服务器端的文件，但是在微信端不能看到效果，需要用户清空微信的 缓存才能生效，此时S3编译工具引入了buildversion的概念，即让服务器重新请求更改的文件，在页面引用时，路径需要增加 如下操作：

• 引用路径增加buildversion字段

<script src="${data:dependencies.new_module}/js/new_module.js${data:buildversion}"></script>

//成功编译后对应的路径如下：
<script src="/seeyon/m3/apps/v5/new_module/js/new_module.js?buildversion=1772963623"></script>

• 修改生成好的批处理文件的代码（即：.cmd文件）

操作步骤

配置S3的编译批处理文件，先鼠标右键点击下载S3工具解压到C盘，解压完成按照以下6个步骤操作，即可生成编译的批处理（cmd）文件

Chrome浏览器

开发者可以通过Chrome浏览器调试运行在M3端、微信端、钉钉端等平台的应用，开发者可按F12键进入到Chrome的调试面板。

Android Debug版壳

目前CMP平台提供了可用于调试的app壳，文档下载目录去下载；

翻墙软件

由于Chrome浏览器Android调试功能需要从Google下载调试服务功能，而国内由于墙的原因，只有通过翻墙软件才能访问 Google服务。开发者可以根据自己的开发资源，进行翻墙。

前端编码器

• Sublime Text

Subline Text2是比较流行的免费前端编译器（下载地址http://www.sublimetext.com/2）

• Visual Studio Code

Visual Studio Code是完全免费的一款编译器（下载地址https://code.visualstudio.com/Download）

• WebStorm

前端开发神器WebStorm11，但是正版是需要付费的。

fidder抓包工具

Fiddler是位于客户端和服务器端的HTTP代理，也是目前最常用的http抓包工具之一 。 它能够记录客户端和服务器之间的 所有 HTTP请求，可以针对特定的HTTP请求，分析请求数据、设置断点、调试web应用、修改请求的数据，甚至可以修改服务器 返回的数据，功能非常强大。利用Fiddler开发者可以调试移动设备的请求，还可以直接调试客户线上环境。（下载地 址https://www.telerik.com/download/fiddler）

360手机助手

某些android手机不能被chrome检测到，可以尝试在手机端安装360手机助手以达到调试检测目的。

应用包介绍和知识点讲解

M3的所有应用都是以应用包的形式存在于M3 app壳中的，要开发新的应用或者在原有应用上进行修改，需要了解应用包的 原理、机制，这样才能规范、方便、有效地开发出所需应用。

应用包分类

目前M3中已有的应用包有34个，可以按照类型和业务进行区分。

• 按类型区分

• 按业务区分

应用包区别

相同点和不同点如下：

• 相同点

  1、源代码相同

  2、目录结构相同（介绍目录结构js、css、html目录）

• 不同点

  1、js、cs、img等资源文件引用方式不同

  2、可用组件不同：M3 Zip包应用可用使用CMP平台所有组件，H5 Url只能使用H5组件+部分原生组件（打开附件）

  3、部署方式不同：M3的应用打包成zip，存放到V5 upload目录，热部署，然后M3客户端下载使用（可以演示）； H5 Url替换对应的修改文件，浏览器刷新，（注意点缓存，buildversion）

  4、运行的环境：H5 zip M3客户端， H5 Url是微信、钉钉、第三方App；

应用包manifest配置文件说明

每个应用包，都必须有manifest.json配置文件，这是应用包被M3 app壳识别的配置，包括接收消息、消息穿透、待办穿透 等信息，现根据例子以注释的方式讲解其中的关键字段，由于ios系统的原因urlSchemes必须全部是小写（newModule.V5.CMP这种是不行的）。

{
  "buildVersion":"1.0.0",
  "iconFiles":{"default":"","multi":[]},
  "appName":"new_Module",//应用名称
  "splashscreen":["img/spashscreen1.png","img/splashscreen2.png"],
  "update":{"checkUpdateUrl":""},
  "bundleIdentifier":"",
  "serviceProvidear":"seeyon",
  "team":"v5", //开发组
  "cmpShellVersion":{"ios":"1.0.0","android":"1.0.0"},//应用对应的ios端和Android端的版本号
  "packageType":"APP",
  "version":"1.0.0",
  "entry":{  //应用入口的相关配置
        "phone": "html/new_Module_index.html",//在M3 app中的入口页面地址
        "jsapi":"newModule_m_api.s3js"//接口文件名，如消息穿透，跨应用穿透，门户穿透
        "openAppMethod":"newModuleAPI.openApp"//在M3 app中打开app的js函数
        },
  "compatibleVersion":["1.0.0","1.0.1","2.0.0"],
  "appType":"default",//应用类型  default：app类型；app：app类型；lib：平台、库类型
  "appId":"52",//应用id
  "urlSchemes":"new_module.v5.cmp",//映射该应用本地的资源路径地址，如S3编译后的运行于M3 app壳中的路径，必须是小写
  "bundleName":"new_module",
  "supportedPlatforms":["iOS_6.0","android_4.0"],//最低支持的手机系统的版本号
  "desc":""
}

m3Apps.xml配置文件介绍

新增应用需要配置服务器的m3Apps.xml文件，配置成功后，M3 app才能展示新应用的图标入口；此文件的路径： {ip}/seeyon/WEB-INF/cfgHome/plugin/m3/m3Apps.xml；以下例讲解配置参数的意义

<m3>
    <v5Apps>
        <app>                          <!---新应用-->
            <appName>新应用名称</appName>
            <appId>99</appId>          <!--新应用id  保证唯一-->
            <privilege>1</privilege>   <!--0,不受权限控制 1,正常权限控制 2,只做插件权限控制-->
            <sortNum>13</sortNum>      <!--应用的展示排序-->
            <plugin>newApp</plugin>    <!--以插件的方式-->
            <menus></menus>            <!--此属性是和pc端的菜单保持一致的，如果新应用是以插件的方式配置的，不需要配此属性-->
        </app>
    </v5Apps>
</m3>

manifest.json和m3App.xml配置文件的逻辑图

应用包关系隐射表

应用包关系映射表，是M3 app端运行的zip包名和微信、钉钉运行于服务端的对应地址

• M3 app端zip包映射,其中路径中"\seeyon\m3files"的路径是A8环境还没有 启动前的路径，一旦A8服务器启动后，此路径下的zip包文件会被全部剪切到"备份分区目录中/2007/01/01/apps/",请注意查找不同的路径

• 应用A8路径映射（运用于微信端、钉钉端的路径，其中M3的门户没有对应路径，M3门户的包只能运行在M3 app中）

应用包更新机制

M3 app应用包是以校验zip包的md5码进行更新的，有以下几点：

1. 强制与非强制更新，其中强制更新是无法兼容低版本，非强制更新可以兼容版本；
2. 一旦应用包有变动，壳自动下载更新应用包；
3. 打开app,服务器切换,编辑,添加几个事件点进行更新触发动作（设置服务器地址，切换地址，保存地址，打开app等几个事件点）

页面资源导入路径指南

  开发M3应用包源码的原则是：开发者只需要写一套源码，编译成多个环境使用的生产代码（一码多用）。
  当我们使用S3编译工具编译出的代码时，我们可以看见运行于M3 app壳的路径是http://newModule.v5.cmp； 而运行于微信端/钉钉端的路径是/seeyon/m3/apps/v5/newModule，这是为了避免相对路径造成应用模块间访问路径错乱而必须 采用绝对路径的原因。通过编译后生成的路径观察，其实就是编写的S3编译文件配置文件对应的路径。
  一般/seeyon/m3/**/* 这样的路径就是放到A8服务器端的资源路径，开发者可以使用浏览器直接访问这样的路径资源（常常在 应用开发初期使用这样的资源地址进行浏览器调试）；而http://newModule.v5.cmp 这样的格式，是运行于M3 app壳中的， M3 app原生代码根据manifest.json文件中路径进行解析后，再加载存放于手机端的资源。

运行在M3 app中的必须的资源路径

<link rel="stylesheet" href="http://cmp/v/css/cmp.css">

<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>
<script src="http://new_module.v5.cmp/v/js/new_module.js"></script><!--开发者应用模块的资源-->

运行在微信、钉钉、工作微信及第三方App接入的微协同的资源路径

<link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp.css">

<script src="/seeyon/m3/cmp/js/cmp.js"></script>
<script src="/seeyon/m3/apps/v5/new_module/js/new_module.js"></script>
<script src="/seeyon/m3/apps/v5/other_module/js/other_module.js"></script>