开发模拟器扩展

要扩展API和组件时，了解模拟器的一些实现和提供的功能会对更容易理解下面的内容。
可以参考文档内的示例代码，开发一个模拟器扩展

一个简单的模拟器扩展目录结构

1
2
3
4
5
6
7
8

├── README.md
├── package.json
└── src 
    ├── assets                        // 静态资源
    ├── webview.js                    // webview中注入的主入口文件
    ├── master.js                    // master中注入的主入口文件
    ├── slave.js                    // slave中注入的主入口文件
    └── form.js                      // 渲染进程的主入口文件

如何添加extensionjs

当开发新的 native 能力时，需要加载对应的框架代码，在 vendor 目录下，创建${host}-program-extension/1.0.0/目录，将自己实现的 extension.js 放入即可

如何实现模拟器扩展功能

开发者需要定义一个package.json文件用来描述入口文件位置。模拟器扩展提供了四个入口，其中form入口运行在electron的渲染进程中，另外三个入口（master、slave、web-view组件）运行在electron的webview进程中，开发者可根据需要实现其中的一个或多个入口，每个入口需要导出一个对象，以下为详细说明：

package.json

package.json声明了各个入口文件。

{
  "name": "demo-api"，
  "version": "1.0.0"，
  "description": "swan demo api"，
  "main": "./src"，
  "entry": {
    "form": {
      "main": "./src/index.js"，
      "styles": [
        "./src/components/login/index.css"
      ]
    }，
    "master": {
      "main": "./src/webview/master/index.js"
    }，
    "slave": {
      "main": "./src/webview/slave.js"
    }，
    "webview": {
      "main": "./src/webview/master/webview.js"
    }
  }
}

渲染进程入口form

1
2
3
4

module.exports = {
    onReady(context) {}，
    onRefresh(context) {}
}

渲染进程入口可以使用二个生命周期:

onReady onRefresh

• onReady会在模拟器启动完成时被调用；
• onRefresh会在模拟器刷新时被调用；

它们都会提供一个对象context

webview进程入口（包括master、slave、web-view组件）

1
2
3
4
5
6
7
8

module.exports = {
    schemeHandlers: {}，
    middleWares: []，
    syncMiddleWares: []，
    async onReady(context) {}，
    onRefresh(context) {}，
    onDestroy(context) {}
}

webview进程入口包含两个生命周期以及一些属性：

onReady

onReady会在模拟器启动完成时被调用；onReady提供了runtimeContext对象

schemeHandlers

schemeHandlers用于实现相应的swan-api，
schemeHandlers的函数签名如下：

(context: Context) => (schemeInfo: SchemeInfo) => any

其中Context和onReady中的context相同，schemeInfo包含以下属性：


• raw - 原始的scheme字符串
• action - scheme中的action名称
• boxType - scheme协议头
• schemeName - scheme调起来源
• query - scheme携带的query
  • params - query中的参数
• ver - scheme版本信息

middleWares和syncMiddleWares

middleWare和syncMiddleWares都用来声明中间件

middleWares会在异步的schemeHandlers中增加中间件，而syncMiddleWares会在同步的schemeHandlers中增加中间件，通过action可以区分一个scheme是同步处理还是异步处理，同步处理的scheme中action一定包含Sync。

它们的函数签名为：

(context: Context) => (schemeInfo: SchemeInfo) => (next: Handler) => any

其中Context和SchemeInfo和上文schemeHandlers中的相同，Handler为处理schemeInfo的函数。

下面是一个简单的中间件例子，会打印所有异步schemeHandler处理前的scheme信息：

1
2
3
4

exports.logger = context => next => async scheme => {
    console.debug('【scheme before】'， scheme.action， scheme);
    return next(scheme);
};

• 开发一个API扩展
• 开发一个组件扩展