更新时间:2024-12-12 GMT+08:00
分享

管理库

AstroZero支持用户通过引用第三方库的方式,在降低组件开发复杂度的同时丰富组件的功能。因此,库是支撑高级页面组件运行的第三方依赖。若缺少相应的库,则页面组件不能正常运行。在AstroZero环境配置中,可管理当前环境中该账号下的库资产。

查看库详情

  1. 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
  2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
  3. 在顶部主菜单中,选择“维护”。
  4. 在左侧导航栏中,选择“全局元素 > 页面资产管理 > 库”,可查看到当前环境该账号下所有的库资产。

    • 系统预置库:AstroZero已定义好的库,可直接加载并使用。在“全局”页签中,可查看所有预置的库。
    • 自定义库:当系统预置库无法满足用户需求时,用户可自定义库包进行上传,并加载到页面中进行使用。在“租户”页面下可查看所有自定义库。

  5. 单击具体的库,进入库详情页,可查看该库的详细信息。

下载库

  1. 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
  2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
  3. 在顶部主菜单中,选择“维护”。
  4. 在左侧导航栏中,选择“全局元素> 页面资产管理 > 库”。
  5. 在库列表中,单击对应的库,进入库详情页面。
  6. 在库详情页单击“下载”,即可下载库到本地。

    您也可以在“更改历史”页签中,查看该库的历史版本(按照版本依次排序显示,最近版本号在最上面),选择不同版本的库进行下载。

禁用库

  1. 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
  2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
  3. 在顶部主菜单中,选择“维护”。
  4. 在左侧导航栏中,选择“全局元素> 页面资产管理 > 库”。
  5. 在库列表中,单击对应的库,进入库详情页面。
  6. 单击页面右上角的,锁定库。
  7. 库锁定后,单击“禁用”,在弹出的对话框中单击“确定”,即可禁用无用的库。

    当库未受保护时,“禁用”按钮才会显示。系统预置的库不可编辑和禁用,只可下载。

    库禁用后,在“全局元素 > 页面资产管理 > 禁用资产”中,可查看已禁用的库。库禁用后,在库详情页面,单击“删除”,输入待删除库的名称,单击“确定”,即可删除该库。若需解除禁用,可单击“启用”,在弹出的对话框中单击“确定”,即可重新启用该库。

自定义并上传新库

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

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

    例如,在MintUI官网下载组件库的代码,增加一个packageinfo.json元数据描述文件,在该文件中列出Library包含的js和css文件名,并打成Zip包,如图1。您也可以直接单击MintUI.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. 在AstroZero服务控制台的实例列表中,单击低代码应用开发实例中的“进入控制台”,进入AstroZero应用开发页面。
    2. 在页面左上方单击,选择环境管理 > 环境配置,进入环境配置。
    3. 在顶部主菜单中,选择“维护”。
    4. 在左侧导航栏中,选择“全局元素> 页面资产管理 > 库”,单击“提交新库”
    5. 输入库基本信息,单击“上传”,选择1中的zip包,单击“提交”。
      图2 提交新库
      表1 上传库参数说明

      参数

      说明

      名字

      新上传库的名称。

      上传图标

      库的显示图标。

      上传源文件

      库文件包,单击“上传”,选择1中的MintUI.zip包。

      库ID

      上传库的ID,由字母及数字组成,且必须以字母开头。

      分类

      库所属的分类,直接在下拉框中选择。

      库类型

      上传库所属的类型,当前均为主题库。

      发行说明

      库的描述信息,可以设置为库的功能。

  3. 在组件中引用库。

    1. 1中获取的组件Widget包(widget_demo_mintui.zip)的“packageinfo.json”文件中增加requires节点,指定需要依赖库的库ID和版本号。

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

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

      "requires": [{
            "name": "global_Vue",
            "version": "100.7"
          },
          {
            "name": "t0000000000qwwjxspaox_MintUI",
            "version": "1.0.0"
          }
        ]

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

    2. 1中获取的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. 1中获取的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. 返回AstroZero环境配置,选择“维护 > 全局元素 > 页面资产管理 > 组件”,单击“提交新组件”,将3中的组件包上传至组件库中。

    图3 上传组件
    表2 上传组件参数说明

    参数

    说明

    名字

    组件名称,系统会根据组件包名称自动填充。

    上传图标

    组件的显示图标,本示例不配置。

    上传源文件

    组件源文件包,即3中的widget_demo_mintui.zip包。

    组件ID

    资产ID,前缀不可编辑,上传组件包后会自动填写。

    分类

    组件所属分类,上传组件后,该组件将会在页面的该分类下进行展示。

    本示例配置为其它。

    领域

    组件包应用的领域。

    一般保持默认“通用”,在组件列表中可基于领域进行分类展示。

    场景

    该组件包的应用场景。勾选后,在相应类型页面开发中,才可使用该组件。

    发行说明

    组件的描述信息,可以设置为组件的功能。

相关文档