Skip to content

galacean/miniprogram-adapter

Repository files navigation

miniprogram-adapter

帮助互动框架适配到阿里系小程序。抹平 dom api 和小程序 api 的差异,目前适配对象:

  • 'window',
  • 'atob',
  • 'devicePixelRatio',
  • 'document',
  • 'Element',
  • 'Event',
  • 'EventTarget',
  • 'HTMLCanvasElement',
  • 'HTMLElement',
  • 'HTMLMediaElement',
  • 'HTMLVideoElement',
  • 'Image',
  • 'navigator',
  • 'Node',
  • 'requestAnimationFrame',
  • 'cancelAnimationFrame',
  • 'screen',
  • 'XMLHttpRequest',
  • 'performance',

适配用法

以 rollup 为例,使用 webpack 方案找到对应的方法即可:

  1. 安装 @rollup/plugin-inject 。

  2. 利用 @rollup/plugin-inject 在打包的过程中注入适配对象到代码中。

  3. (可选) 若使用的 monorepo 仓库,可使用 @rollup/plugin-modify 替换引用模块。l

下面是小程序 rollup.miniprogram.plugin.js 示例可以供参考:

import inject from 'rollup-plugin-inject';
import modify from 'rollup-plugin-modify';

const module = '@galacean/engine-miniprogram-adapter';

function register(name) {
  return [module, name];
}

const adapterArray = [
  'window',
  'atob',
  'devicePixelRatio',
  'document',
  'Element',
  'Event',
  'EventTarget',
  'HTMLCanvasElement',
  'HTMLElement',
  'HTMLMediaElement',
  'HTMLVideoElement',
  'Image',
  'navigator',
  'Node',
  'requestAnimationFrame',
  'cancelAnimationFrame',
  'screen',
  'XMLHttpRequest',
  'performance',
];
const adapterVars = {};

adapterArray.forEach(name => {
  adapterVars[name] = register(name);
});

export default [
  inject(adapterVars),
  modify({
    find: /@galacean\/([\w-]*)/g,
    replace: (match, moduleName) => `@galacean/${moduleName}/dist/miniprogram`
  }),
];

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published