使用

源码可以导入到任何react项目中,进行二次开发。

一、内核包说明

内核包放在 src/pages/home/h5ds 这个目录下面的,也可以放到另外的目录。这个没什么影响。内核包中包含了编辑器页面的全部代码和样式,以及方法。可以看做是一个react组件来使用。需要传入一些特定的参数。而内核默认提供了2个图层组件(图片,文本),其他的组件需要在外部载入。

内核是采用react + mobx + less 制作的一个react大型组件。

二、内核使用说明

import './h5ds/css/h5ds.4.0.0.css'; // 载入内核的样式
import './layers/plus'; // 载入插件的预览时候的方法
import * as layers from './layers'; // 载入插件模块
import React, { Component } from 'react';
import H5DS from './h5ds'; // 载入h5ds内核

// 自己的页面模块
export default class HomePage extends Component {

  // 保存当前页面
  savePage = (appid, cdata) => {
    console.log('保存当前页面', appid, cdata);
    return new Promise((resolve, reject) => {
      // ...
      resolve();
    });
  };

  // 保存 app
  saveApp = (appid, cdata) => {
    console.log('保存APP', appid, cdata);
    return new Promise((resolve, reject) => {
      // ...
      resolve();
    });
  };

  // 发布
  publishApp = (appid, cdata, shtml) => {
    console.log('发布应用', appid, cdata, shtml);
    return new Promise((resolve, reject) => {
      // ...
      resolve();
    });
  };

  render() {
    return (
      <H5DS
        uploadSet={{}}
        savePage={this.savePage}
        saveApp={this.saveApp}
        publishApp={this.publishApp}
        plugins={[
            layers.testLayer
        ]}
      />
    );
  }
}

三、参数说明

API 属性如下:

参数 说明 类型 默认值
plugins 图层扩展插件 Array []
data H5页面对应的json数据 Object read more
before H5DS执行前的回调函数 Function undefined
success H5DS执行成功的回调函数 Function undefined
fail H5DS执行失败的回调函数 Function undefined
savePage 点击保存当前选中页面的回调函数 Promise () => new Promise()
saveApp 点击保存当前H5的回调函数 Promise () => new Promise()
publishApp 点击发布当前H5的回调函数 Promise () => new Promise()
uploadSet 上传素材的配置 Object {action: '', headers: {}}
config 全部配置项 Object {appHost: '', appCDN: '/assets', backUrl: '/'}
uploadBase64 上传素材的base64接口 Promise () => new Promise()
music 音乐素材模块 Component null
template 单页模版素材模块 Component null

results matching ""

    No results matching ""