文档首页 > > 用户指南> 开发前端UI层> 开发高级页面>

管理并使用库

管理并使用库

分享
更新时间:2021/02/23 GMT+08:00

Widget的运行依赖库,若缺少相应的库,则Widget不能正常运行。平台默认会提供一些预置库,若不满足现有需求,需要制作并上传新的库。

背景信息

库分为系统预置库和自定义库。

  • 系统预置库

    系统预置库是系统已定义好的库,可在页面设计中直接进行加载并使用。系统提供了以下库。您可在App开发界面左侧列表单击,在“高级页面 > 库”选择“全局”页签查看预置库。

    表1 系统预置库列表

    Library名称

    Library ID

    功能说明

    GISMap

    global_GISMap

    地图组件依赖库。

    EchartsGISMap

    global_EchartsGISMap

    地图组件依赖库。

    echartsliquidfill

    global_echartsliquidfill

    液位图组件依赖库。

    更多使用说明请参考ECharts Liquid Fill Chart官网2.0.5版本使用说明。

    codeMirror

    global_codeMirror

    代码编辑器组件。

    更多使用说明请参考codeMirror相关资料5.49.2版本使用说明。

    echarts

    global_echarts

    百度开源图表控件。

    更多使用说明请参考echarts相关资料4.1.1版本使用说明。

    eruda

    global_eruda

    用于Mobile端调试所用,模拟浏览器的控制台。

    目前已废弃。

    Element

    global_Element

    基于Vue的一个组件库,CC管理员界面开发。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考Element相关资料2.6.2版本使用说明。

    JQueryUI

    global_jqueryui

    jQuery UI是建立在jQuery JavaScript库上的一组用户界面交互、特效、小部件及主题。

    目前已废弃。

    PromiseShim

    global_PromiseShim

    为较旧的浏览器或较旧的JavaScript引擎提供纯ES5代码转换。

    目前已废弃。

    Quasar

    global_Quasar

    基于Vue的一个组件库,CC前端Storefront界面开发。

    需要先加载Vue组件才可以使用该组件。

    目前已废弃。

    Sortable

    global_Sortable

    基于Vue开发的元素可拖拽组件。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考Sortable相关资料1.9.0版本使用说明。

    squel

    global_squel

    基于JavaScript的SQL查询构建器,通过一个面向对象的API轻松建立SQL查询字符串。

    目前已废弃。

    VeeValidate

    global_VeeValidate

    基于Vue的Vue表单校验组件。

    需要先加载Vue组件才可以使用该组件。

    目前已废弃。

    Vue

    global_Vue

    Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    更多使用说明请参考Vue相关资料2.6.11版本使用说明。

    VueAwesomeSwiper

    global_VueAwesomeSwiper

    基于Vue的轮播图组件。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考VueAwesomeSwiper相关资料4.1.1版本使用说明。

    VueColor

    global_VueColor

    基于Vue的颜色选择器组件。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考VueColor相关资料2.4.0版本使用说明。

    VueCropper

    global_VueCropper

    基于Vue的图片裁剪组件。

    需要先加载Vue组件才可以使用该组件。

    目前已废弃。

    VueDraggable

    global_VueDraggable

    基于Vue的拖拽事件组件。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考VueDraggable相关资料2.16.0版本使用说明。

    Vueform

    global_vueform

    基于Vue的Vue表单组件。

    需要先加载Vue组件才可以使用该组件。

    目前已废弃。

    VueI18n

    global_VueI18n

    基于Vue的多语言组件。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考VueI18n相关资料8.8.2版本使用说明。

    VueLazyload

    global_VueLazyload

    基于Vue的Vue图片懒加载组件。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考VueLazyload相关资料1.2.4版本使用说明。

    VueQuillEditor

    global_VueQuillEditor

    基于Vue的Vue富文本编辑器。

    需要先加载Vue组件才可以使用该组件。更多使用说明请参考VueQuillEditor相关资料3.0.6版本使用说明。

    xlsx

    global_xlsx

    支持excel导入导出功能。更多使用说明请参考SheetJS相关资料0.14.3版本使用说明。

    xss

    global_xss

    对用户输入的内容进行过滤,防止xss攻击。更多使用说明请参考xss相关资料1.0.6版本使用说明。

    ImageManagement

    global_ImageManagement

    图片上传组件,用来连接公有云实现图片上传。

    需要先依次加载Vue和VueI18n组件才可以使用该组件。

    RuntimeFramework

    global_RuntimeFramework

    支持在高级页面运行由标准页面发布的Widget,具体使用方法可参见将标准页面导出为高级页面Widget

    polyfill

    global_polyfill

    提供JavaScript Pollfill。更多使用说明请参考polyfill相关资料0.1.42版本使用说明。

    FilePreview

    global_FilePreview

    支持文件的在线预览,包括word、excel、ppt、pdf。

    VueRouter

    global_VueRouter

    Vue Router是Vue.js官方的路由管理器。更多使用说明请参考VueRouter相关资料3.0.5版本使用说明。

    MobileAppRuntimeFramework

    global_MobileAppRuntimeFramework

    AppCube应用发布到手机端运行时依赖的库。

    WidgetDataTrans

    global_WidgetDataTrans

    组件数据格式转换工具库,用于转换几种常见输入数据格式为平台预置组件需要的格式。

    平台的global库的版本号是在资源上传或者更新时平台赋予的版本管理号,和实际官网版本不存在对应关系。

  • 自定义库

    当系统预置的库无法满足用户需求时,用户可自定义库包进行上传,并加载到页面中进行使用。您可在App开发界面左侧列表单击,在“高级页面 > 库”选择“租户”页签查看自定义库。

场景描述

本章节以某Widget中需要使用Vue(系统预置库)以及MintUI(自定义库)为例,演示如何将自定义库进行上传以及如何在Widget使用库。

操作步骤

  1. 将自定义库MintUI的相关文件打成Zip包。

    到MintUI官网下载该组件库的代码,增加一个packageinfo.json元数据描述文件,在该文件中列出Library包含的js和css文件名。并打成Zip包。该场景中Zip包为“MintUI.zip”,单击链接获取该包。

    packageinfo.json中包含了需要引入的文件,内容如下:

    {
      "js": [
        {
          "name": "js/index"
        }
      ],
      "css": [
        {
          "name": "css/index"
        }
      ] 
    }

  2. 租户级别下上传自定义库包。

    1. 在App开发界面左侧列表单击,选择“高级页面 > 库”。
    2. 单击“提交新库”,新建库。
    3. 输入库基本信息,单击“上传”选择zip包,单击“提交”上传库。
      图1 库基本信息
      表2 上传组件参数说明

      参数

      说明

      名字

      库名称。

      上传图标

      库的显示图标。

      上传源文件

      库文件包,单击“上传”可选择源文件上传。

      插件标识

      资产ID。

      分类

      库所属分类,非必填。

      示例链接

      展示库Demo的链接地址,非必填。

      截图

      库截图,非必填。

      发行说明

      发布描述信息。

      文档

      帮助文档,非必填。

      上传完成后,在租户库下可以看到该库。

      图2 上传完成

      “全局”中为系统预置库,不可编辑和禁用系统预置库,只可下载。

    4. (可选)您可单击自定义库,进入该库详情页面,可查看到该库的版本号和库ID。还可进行编辑基本信息、编辑库文件、下载或者禁用操作。

      若禁用库后,可在“高级页面> 禁用资产”中看到已禁用的库。禁用后您可在库详细页面单击“删除”,弹出确认框,您可填入该库名称后单击“确定”,删除该库。

      在“概况”页签下看查看该库的描述信息;在“更改历史”可查看该库的历史版本(按照版本依次排序显示,最近版本号在最上面),可下载、在线预览代码和发布上传不同版本的库。
      图3 该库详情页面
    5. 在Widget包中的“packageinfo.json”文件中增加requires节点,指定需要依赖的库。

      例如增加如下requires节点,其中库文件名称和版本号在库详情页面获取。

      "requires": [{
            "name": "global_Vue",
            "version": "100.7"
          },
          {
            "name": "bingobingotesthuaweicom_mintui",
            "version": "1.0"
          }
        ]

      在“requires”里增加库文件时,需要注意某些库文件之间有依赖关系,增加库文件需要有先后顺序,例如“global_VueI18n”是基于“global_Vue”的,需要写在“global_Vue”之后。具体的依赖关系可参考库说明

    6. 在Widget包中的widget_demo_mintui.ftl中写一个简单的表单DOM。
      <div id="widget_demo_mintui">
        <mt-field label="username" placeholder="Input username" v-model="username"></mt-field>
        <mt-field label="email" placeholder="Input email" type="email" v-model="email"></mt-field>
        <mt-field label="password" placeholder="Input password" type="password" v-modal="password"></mt-field>
        <mt-button type="primary" @click="submit">Register</mt-button>
      </div>
    7. 在Widget包中的widget_demo_mintui.js的render方法中新增Vue实例。Vue的使用可参考Vue官网。
                  Vue.use(MINT);
                  var vm = new Vue({
                      el: $("#widget_demo_mintui", elem)[0],
                      data:{
                          username: "",
                          email: "",
                          password: ""
                      },
                      methods:{
                          submit: function(){
                              console.log(this.username + " registers");
                          }
                      }
                  })
    8. 参考上传Widget将Widget包上传至组件库中,在页面上中添加该Widget,配置后保存发布页面。

      页面效果如下所示。

      图4 页面效果
    9. 可选,当该方式上传的Library有新版本时,需要执行该操作。
      1. 在该Library详情页面单击“更新”。
      2. 选择新的Library包单击“上传”,再单击“更新”,更新资产库中的Library。
      3. 进入App开发界面,在左侧菜单栏下方选择“页面设置”。
      4. 选择“资源”页签,在该Library所在行的操作列单击,更新站点内的Library。
      5. 在用到该Library的页面中重新保存发布即可更新。

  3. 若没有在Widget的packageinfo.json文件中指定所需的库,需要在页面添加该Widget之前,在站点内引用库。

    1. 在App开发界面左侧菜单栏下方选择“页面设置”。
    2. 选择“资源”页签,单击“新建资源”。
      图5 在站点内引用库
    3. 在“新建资源”页面选择“资源库”,选择Library单击“新增”。
      作用域表示如下。
      • 全局:表示该Library可应用于该站点所有高级页面。
      • View Level:该Library仅应用于web或者mobile视图中。
      • Page Level:可应用于具体哪些高级页面。

      您可选择“本地文件”或者“文件链接”上传js或者css资源文件。

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区论坛频道来与我们联系探讨

智能客服提问云社区提问