插件开发

开始插件开发前,先熟练插件的使用,插件主要用到技术栈:react,jquery

首先来看看插件的目录资源结构:

|-- test // 测试插件
    |-- didMount.js // 编辑器内,组件layer载入后执行
    |-- willMount.js // 编辑器内,组件layer载入前执行
    |-- willUnmount.js // 编辑器内,组件layer卸载前执行
    |-- Editor.jsx // 私有编辑模块
    |-- index.js // 入口
    |-- layerdom.jsx // layer的jsx代码,用于SSR
    |-- OriginData.js // layer对应的JSON数据
    |-- phone.js // layer在手机端执行的代码
    |-- phone.less // layer样式
    |-- style.less // 编辑器或者其他模块相关样式

插件中主要用到的两个类H5DSComponent, H5DSPlus

H5DSComponent

所有的phone.js里面的插件都必须继承该类。

import './phone.less';

import { H5DSComponent } from '../plusClasses.js';

// 手机端执行
export default class PhoneDom extends H5DSComponent {
    static type = 'atext';

    constructor(props) {
        super(props);
    }

    didMount() {
        console.log('开始执行', this.props.target);
    }

    oneDidMount() {
        console.log('插件渲染后执行,且只执行一次,下次进入不会再执行', this.props.target);
    }


    willUnmount() {
        console.log('被卸载前执行', this.props.target);
    }
}

H5DSPlus

该类用于合并插件方法


// plus会被载入到生成的页面中

import './svg/phone.js'; // 纯css
import './effectcss/phone.js'; // 纯css
import './input/phone.js'; // 纯 css
import './select/phone.js'; // 纯css

import { H5DSPlus } from './plusClasses.js';
import PhoneAtext from './atext/phone.js';
import PhoneCarousel from './carousel/phone.js';
import PhoneChart from './chart/phone.js';
import PhoneCountTime from './countTime/phone.js';
import PhoneDom from './dom/phone.js';
import PhoneFps from './fps/phone.js';
import PhoneMap from './map/phone.js';
import PhonePage2img from './page2img/phone.js';
import PhoneQrcode from './qrcode/phone.js';
import PhoneRadio from './radio/phone.js';
import PhoneRotaryTableLayer from './rotaryTable/phone.js';
import PhoneRuntext from './runtext/phone.js';
import PhoneSubmit from './submit/phone.js';
import PhoneVideo from './video/phone.js';
import Phonelightning from './lightning/phone.js';

// 装载插件
new H5DSPlus([
  PhonePage2img,
  PhoneAtext,
  PhoneRotaryTableLayer,
  PhoneSubmit,
  PhoneRuntext,
  PhoneVideo,
  PhoneRadio,
  PhoneCountTime,
  PhoneFps,
  PhoneDom,
  PhoneChart,
  PhoneMap,
  PhoneQrcode,
  PhoneCarousel,
  Phonelightning
]);

results matching ""

    No results matching ""