mPaaS介绍——针对Kylin部分介绍

移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。

mPaaS 小程序，源自于支付宝小程序框架，继承了支付宝小程序框架的易开发性、跨平台性以及 Native 性能，不仅帮助开发者实现面向自有 App 投放小程序，还可快速构建打包，覆盖支付宝、淘宝、钉钉等应用。

基于 mPaaS 小程序，开发者能够快速优化发布包大小，节省流量和存储。同时，服务迭代不再受发版限制，快速发布，快速迭代。甚至，基于统一的开发标准，小程序仅需开发一次，便可快速投放至多端。

Kylin 是 mPaaS H5 容器的无线前端解决方案，具有高效的运行时、一致的开发体验、丰富的研发支撑、完善的 UI 组件等诸多优点，解决移动 Hybrid 开发中遇到的前端打包、浏览器兼容性、Mock 接口等问题。

Kylin 仅提供基于 Vue 2.0 的视图层框架，以极小的 JS 加载开销实现高效的 DOM 更新。

Kylin 作为无线前端解决方案只提供 Safari、UC Webview 和 Chrome 浏览器兼容性保障。

由于mPaaS 已经提供了更新和更稳定的小程序组件作为今后主要维护和发展方向，并停止对 Kylin 的维护。相比于 Kylin 方案，小程序组件有着更高的易用性和稳定性，能够适配多种场景。因此建议新用户接入小程序组件，已经接入了 Kylin 框架的用户在遇到新增功能需求时，建议您也转用小程序组件。更多详情，请参见 小程序。

以下是Kylin项目的结构：

mock

该目录提供了一种数据 mock 方式，即使用 cnpm run dev:mock 启动时，会自动加载其中的 rpc 目录和 jsapi 目录的对应数据接口。

package.json

在 package.json 文件中的 kylinApp 字段包含了项目配置的元信息，主要有 pages、output、devPort、plugins、dirAlias。

简单举例如下：

{
  "kylinApp": {
    "output": "www",
    "pages": {
      "index": {...}
    },
    "devPort": 8090,
    "dirAlias": {
      "common": "./src/common/",
      "pages": "./src/pages/"
    },
    "plugins": [

    ]
  }
}

www

执行 cnpm run build 后，会自动将构建产物输出到 www 目录中。

src/common

用以放置项目中使用的 CSS、JS、IMG 文件。

src/layout

对应 ./src/pages/${pageName} 的各个页面，可以在 package.json 中配置对应页面使用的 HTML 模板路径。支持 Nunjucks 语法。

src/pages

此目录用于存放各个页面。页面存放于 ./src/pages/${pageName}/ 目录下，各页面分别包含 components , store 和 index.js 。

• components 目录中，每个组件都是 Vue 组件，具体编写规范请参考 组件规范。

• store 目录中，有一个 Vuex.Store 实例，具体使用请参考 状态注入。

• index.js 为当前 page 的主入口，这里的 page 页面最后会生成一个特定的 ${pageName}.html 页面。

常用参数

下表的常用参数是指 kylinApp 下一级中，除了 pages、plugins 之外的所有键值。pages、plugins 将在下文单独展开。

pages

此处列举 pages 键值对下的配置项，示例中的 home 表示以下配置均为对 pageName 为 home 的页面生效。

{
  "kylinApp": {
    "pages": {
      "home": {
        ... // 这里的字段
      }
    }
  }
}

plugins

kylinApp.plugins 字段，是一个数组，支持按需加载各个插件。

{
  kylinApp: {
    plugins: [
      "xxxx",
      ["yyyy",{ a: 1 }],
      "zzzz",
      ["6666",{ b: 1 }]
    ]
  }
}

• @ali/kylin-plugin-xxxx，以默认配置加载。

• @ali/kylin-plugin-yyyy，以 {a:1} 选项加载。

• @ali/kylin-plugin-zzzz，以默认配置加载。

• @ali/kylin-plugin-6666，以 {b:1} 选项加载

已有插件

目前，支持配置的插件有 mock、resource

1、Kylin-plugin-mock 插件是针对在桌面浏览器（Chrome）中调试 JSAPI 的需要而开发的数据 mock 插件。

开启插件：在脚手架工程中，执行如下语句即可，其等价于运行命令时添加 --mock：

cnpm run dev:mock

使用插件：在项目的 ./mock/mock.config.js 文件中，有如下配置项：

const config = {};

// 用户自定义mock
config.call = {
    // mock rpc 接口
    rpc: function (opts, callback) {
        var type = opts.operationType;
        var rpc = require('./rpc/' + type);
        var data = typeof rpc === 'function' ? rpc(opts) : rpc;
        // 防止在业务逻辑中对传入的对象进行了修改
        data = Object.assign({}, data);
        // 模拟服务端/网络接口延迟，此时会发现打了 2 次 log，一次是请求，一次包含返回结果
        setTimeout(() => {
            callback && callback(data);
        }, 2000);
    },
}

window.lunaMockConfig = config;

上述配置将 ./mock/rpc/*.js 中的接口进行数据映射。更多详细配置，可 获取代码示例 后查看。

在执行 cnpm run dev:mock 后，会进入 mock 模式。该模式下，在浏览器内执行 AlipayJSBridge.call('abc') ，会去 ./mock/jsapi/abc.js 寻找模拟接口数据。

2、Kylin-plugin-resource 插件是针对 mPaaS 平台下的全局离线资源包设计的一种资源拦截机制。

使用插件：在脚手架的 package.json 中，可以看到如下配置：

["resource", 
   {
    "map": {
      "vue": {
        "external": "Vue",
        "js": "https://gw.alipayobjects.com/as/g/h5-lib/vue/2.5.13/vue.min.js"
      },
      "fastclick": {
        "external": "FastClick",
        "js": "https://as.alipayobjects.com/g/luna-component/luna-fastclick/0.1.0/index.js"
      }
    }
  }
]

上述配置项表示当代码中出现如下的依赖语句，会进行一定处理：

import xxx from 'vue';
var xxx = require('vue');

上述对 vue 的依赖使用，会做如下处理：

1. 在生成的 HTML 模板中注入 <script src="https://gw.alipayobjects.com/as/g/h5-lib/vue/2.5.13/vue.min.js" ></script> 脚本资源。

2. 把上述 vue 依赖重定向为 window.Vue 的值。