Uchart-custom-widget NPM

uchart-custom-widget

图表类自定义组件。

目录说明

src: 自定义组件源码；
dist: uniapp构建后文件存放目录；
preview: 自定义组件web预览模块（发布NPM自定义组件需要）；
src/components: 存放跨端自定义组件源码（uniapp技术栈）；
src/components/uni-line-chart/uni-line-chart.vue: 跨端自定义组件内容文件；
src/h5components: 存放H5版自定义组件源码（vue3技术栈）；
src/h5components/uni-line-chart/uni-line-chart.vue: H5自定义组件内容文件；
src/pages: uniapp 应用页面，开发uniapp自定义组件时仅用于充当预览展示页；
src/main.ts: uniapp 应用入口文件；
src/manifest.ts: uniapp 配置文件（配置应用名称、appid、logo、版本等打包信息）；
src/pages.json: uniapp 页面配置（配置页面路由、导航条、选项卡等页面类信息）；
src/uni.css: uniapp 全局样式文件（这里是uni-app内置的常用样式变量）；
amis.config.js: amis-widget-cli配置文件；
index.html: uniapp 页面模板（本地预览需要）；
vite.config.ts: uniapp 构建配置文件（vite 构建模式）；
build: 存放打包&构建入口文件；
build/linkDebug.js: 用于本地「linkDebug」调试自定义组件；

开发 aipage-editor 自定义组件注意事项

开发跨端自定义组件（非H5自定义组件）时，请遵循easycom组件规范存放和组件命名（应用导出源码时需要）；
静态资源（img、css等）请和自定义组件渲染器放同一个目录，比如：components/info-card/assets 存放 info-card 自定义组件的静态资源。方便后续动态注入自定义组件源码。

开发说明

安装依赖

$ npm i 或者 yarn

preview: 小程序自定义组件预览模式（带热更新）
H5预览模式：用于本地预览小程序自定义组件内容。

$ npm run preview

preview:h5: H5自定义组件预览模式（带热更新）
H5预览模式：用于本地预览H5自定义组件内容。

$ npm run preview:h5

linkDebug: 外链调试（爱速搭平台预览小程序自定义组件）
linkDebug模式：用于在爱速搭平台中预览和调试小程序自定义组件。

$ npm run linkDebug

build2lib: 构建自定义组件web预览模块
build2lib模式：用于构建发布到 npm 中的文件，默认存放到当前 preview 目录中；

$ npm run build2lib

package.json添加自定义组件信息，导入组件扩展包时需要
package.json 中添加 aipage-widgets 字段，用于放置当前自定义组件信息，有这个 aipage-widgets 字段才能被识别为自定义组件扩展包。

  ...
    "aipage-widgets": [
    {
      "type": "uni-line-chart", // 自定义组件类型，必填项，同一应用下不允许有重复的自定义组件类型
      "framework": "vue3", // 技术栈类型，必填项
      "description": "折线图", // 自定义组件描述，在编辑器左侧组件面板作为描述信息展示，必填项
      "entry": "/web/renderer.umd", // 自定义组件入口文件路径，必填项
      "files": [  // 自定义组件依赖资源文件路径，非必填项
        "/web/style.css"
      ],
      "editorPlugin": {  // amis-editor自定义插件信息
        "pluginEntry": "/web/plugin.umd", // 自定义插件的入口文件，必填项
        "tag": [  // 自定义插件的分类，必填项
          "跨端组件"
        ],
        "sort": 100, // 自定义插件的排序，非必填项
        "device": [ // 自定义组件支持的设备类型，必填项
          "mobile",
          "app"
        ]
      }
    },
    {
      "framework": "uniapp", // 技术栈类型，必填项
      "type": "uni-line-chart", // 自定义组件类型，必填项，同一应用下不允许有重复的自定义组件类型
      "entry": "/src/components/uni-line-chart", // 自定义组件根目录
    },
    ... // 其他自定义组件
  ],
  ...