更新时间:2025-07-24 GMT+08:00
分享

我的库

在我的库中,管理系统预置的和用户自定义的库,如添加库、查看库历史版本等。系统预置的库,只能执行查看详情、查看历史版本和下载操作。本章节的操作,均以自定义库为例。

新建自定义库

以某组件中需要使用Vue(系统预置库)以及MintUI(自定义库)为例,介绍如何上传自定义库并如何在组件中使用库。

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

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

    图1 MintUI库文件结构

    packageinfo.json包含所要引入的文件。例如,MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件,请在packageinfo.json中添加这两个文件的描述,如下所示。其中,“js”和“css”定义文件类型,“name”定义文件路径及名称。

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

  2. 上传自定义库。

    1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
    2. 在主菜单中,选中“我的资产”
    3. 在左侧导航栏中,选择“我的库”,单击“添加库”。
    4. 单击“+”,选择待上传的库,并设置库的基本信息。
      图2 上传MintUI自定义库
      • 库名字:库的名称。
      • 操作类型:当前操作的类型,如新增、更新等。
      • 库ID:上传库的ID,由字母及数字组成,且必须以字母开头。
      • 版本说明:发布描述信息。

  3. 在组件中引用库。

    以自定义组件(widget_demo_mintui)为例,在该组件中引用第三方库,单击widget_demo_mintui.zip获取该组件包。
    1. 在组件Widget包(widget_demo_mintui.zip)的“packageinfo.json”文件中增加requires节点,指定需要依赖库的库ID和版本号。

      其中,“name”为库ID、“version”为库版本号数字部分。

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

      "requires": [{
            "name": "global_Vue",
            "version": "100.7"
          },
          {
            "name": "ttenant1***3596957a5bc_MintUI",
            "version": "1.0.0"
          }
        ]

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

    2. 在Widget包(widget_demo_mintui.zip)的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>
    3. 在Widget包(widget_demo_mintui.zip)的widget_demo_mintui.js的render方法中新增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");
                          }
                      }
                  })
    4. 将修改后的组件Widget包,重新打包。

  4. 返回华为云Astro大屏应用界面,选择“我的资产 > 我的组件”,单击“添加组件”,将3.d中的组件包上传至组件库中。

    图3 上传widget_demo_mintui组件
    • 组件名称:组件名称,系统会根据组件包名称自动填充。
    • 操作类型:当前操作的类型,如新增、更新等。
    • 组件ID:资产ID,前缀不可编辑,上传组件包后会自动填写。
    • 目录名称:组件的存放目录。
    • 场景:该组件包的应用场景。勾选后,在相应类型页面开发中,才可使用该组件。
    • 版本说明:组件的描述信息。

  5. 在大屏页面中拖入该组件,预览组件效果。

    进入华为云Astro大屏应用界面,从大屏开发页面的“全部组件 > 自定义组件 > 其它”中,拖入widgetdemomintui组件到设计区域,调整组件大小,单击,预览效果。

    图4 拖入自定义组件

复制自定义库到其他工作空间

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 将鼠标放在待复制的库上,单击

    图5 复制库到其他工作空间

  5. 在弹出的页面,选择目标工作空间,单击“确定”

    库默认复制到目标工作空间的“我的库”下。复制自定义库到其他工作空间存在资产冲突时,会更新空间内原有的内容。

查看库详情

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 将鼠标放在对应的库上,单击

    图6 查看库详情

  5. 在库详情页面,查看库名称、开发者、版本、更新时间等。

更新库

更新组件前,请先获取锁,否则更新按钮置灰不可用。

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 将鼠标放在对应的库上,单击,获取锁。
  5. 将鼠标放在对应的库上,单击,进入更新库页面。

    图7 进入更新库页面

  6. 在库更新页面,上传新的库、设置库参数,单击“更新”。

    图8 设置库信息

  7. 将鼠标放在对应的库上,单击,可查看到新版本的库。

    • :单击该图标,可下载当前版本库。
    • :单击该图标,可在线编辑该版本库。

编辑库

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 将鼠标放在对应的库上,单击

    图9 编辑库

  5. 在库编辑页面,单击右上角的,获取锁。
  6. 按需在线修改库文件,单击
  7. 在弹出的提示框中,单击“确定”。
  8. 在库更新页面,按需设置库参数,单击“更新”
  9. 返回我的库页面,在组件上单击,可查看到新版本的库。

    图10 查看新版本的库

查看库历史版本

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 将鼠标放在对应的库上,单击,即可查看库的历史版本。

    图11 查看库历史版本

  5. 在历史版本中,单击对应版本后的,可下载库。

    如果为自定义库,还支持在线编辑对应版本的库。

    图12 查看对应库的历史版本

下载库

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 将鼠标放在对应的库上,单击

    默认下载最新版本的库。如果需要下载之前版本的库,可在库的历史版本中,单击对应版本后的

    图13 下载库

批量复制自定义库到工作空间

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 选中多个库,单击“复制到工作空间”

    您可以通过鼠标框选、“Ctrl+单击”“Ctrl+A”“Ctrl+Shift+框选”,来选择多个库。

    图14 复制多个库到目标工作空间

  5. 在弹出的页面,选择目标工作空间,单击“确定”

批量删除自定义库

  1. 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
  2. 在主菜单中,选择“我的资产”
  3. 在左侧导航栏中,单击“我的库”
  4. 在自定义库上,单击,获取锁。
  5. 选中已锁定的多个库,单击“删除”

    您可以通过鼠标框选、“Ctrl+单击”“Ctrl+A”“Ctrl+Shift+框选”,来选择多个库。

    图15 批量删除库

  6. 在弹出的确认框中,单击“确定”

相关文档