Web SDK

销氪 APP 现有架构

现在销氪 APP 采用的是原生+hybrid 的方式架构，原生与离线 H5 包桥接规范采用自定义的 mapi 标准。

多端方案

考虑到销氪现状,现有的移动端内嵌 H5 需要可以快速迭代出小程序和企微版本，因此需要对现有的 mapi 等公共 lib 进行抽离。目前已经累积的 API 数量达到近 80 个。

旧版 mapi 文档（待迁移）

为了提升代码可维护性，我们 Q3 完成对 app 内嵌 H5 部分的关键组件(mapi-core、wrouter-hybrid、components-hybrid)进行抽离，对原生客户端容器抽离出mapi-webviewsdk，以及增加了mapi-adapter-wxwork的适配器插件的开发，适配了部分核心接口（11 个）。

使用方法

安装依赖

yarn add mapi-core # 安装mapi核心方法

调整 webpack 配置

const webpack = require('webpack')

module.exports = {
    ...,
    plugins: [
        new webpack.DefinePlugin({
            'process.env.MAPI_ENV': process.argv[2], // 注入环境变量，用于业务代码判断，wxwork,app等
        }),
        ...,
    ],
}

在入口文件 index.js 注册 mapi 配置信息，初始化方法init内首先会从 adapter 中判断所属环境，然后加载对应的端适配器

//mapi-core
//@mapi/adapter-wxwork
//@mapi/adapter-weapp
//@mapi/wrouter
//@mapi/components

import mapi from 'mapi-core'

mapi.init({
  service: 'xk', // oa，不传默认为xk，用于业务定制
  environment: 'ol', //qa/ol
}) //返回promise对象，通知是否完成初始化

其中适配器主要用于支持在这个端内 mapi 的register功能，mapi-core会按顺序加载适配器插件，直到某个插件可以成功匹配当前的宿主环境，如果都不能成功拿到对应的环境变量，就会 fallback 为客户端注册。

使用统一 SDK 调用，以设置剪贴板数据为例

import mapi from 'mapi-core'

mapi.actions('native-pasteboard',
{
    data: {
        "action":"1",
        "value":"244"
    },
    success: function (res) {
        console.log(res);
    },
    fail: function (e) {
        console.log(e);
    },
    complete: function () {
    }
}

在需要区分环境时

if (process.env.MAPI_ENV === 'wxwork') {
  //做企微下的特殊处理
}

进一步优化

为了提升性能，我们基于mapi-core提供了路由框架wrouter-hybrid和组件库框架components-hybrid，以优化传统给 H5 在各客户端的表现。

wrouter-hybrid

仅支持 react 框架，类似react-router，增加了：

1. 支持界面切换动画；iOS 支持手势右滑
2. 模拟原生路由栈（界面跳转不销毁）
3. 支持更多的启动模式：SingleTask、Standard、SingTop
4. 争对原生客户端，新增两个生命周期 onResume & onPause

components-hybrid

主要是基于 mapi 提供了尽可能接近原生体验的组件库，如拖拽组件、日期滚动组件等。

端裁剪

mapi 为了尽可能方便接入，因此采用通过判断宿主环境动态加载代码的方案，因此打包出的代码会包含各端的冗余代码。对包体积大小敏感的端可能会导致包变大，因此需要支持端裁剪。

使用 webpack 的代码剔除能力

提前注入环境到 process.env，支持 webpack 静态裁剪

删除不需要的依赖

提供端 webpack 插件，依赖前一个 process.env，支持使用行内 loader，剔除不需要的文件的引入

优势

• 框架无关，大部分流行的前端框架都能够在这个解决方案上运行，比如 Vue、React、Preact 等。
• 支持更为完整的前端框架特性，因为 mapi 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
• 因为 mapi 的注册是在端上完成的，可以一套 H5 代码，通过安装不同的适配器的方案快速打包出 android、iOS、小程序、企微内的项目

限制

业内和公司内其实已经出现了很多关于同构的解决方案了，每个方案都有自己的优劣，不存在能够完美解决所有问题的方案。mapi 也一样，它的优势在上面提到过，而它的不足也是它的实现原理带来的。

• 小程序的解决方案依赖 kbone，因为无法支持支付宝小程序、抖音小程序等，如果后期要支持可能考虑 Remax 解决方案，但是也会带来新的限制