# 如何引入第三方库
如果您希望使用第三方库文件，而当前系统中不存在该库，您可以通过上传，新增该JS/CSS库，并在页面中设计并使用该库，实现引入第三方库的功能。本节将介绍如何引入并使用第三方库的具体操作步骤。
#### 什么是库
库是指在设计页面时，需要依赖的库，若缺少相应的依赖库，则页面中无法实现某些功能。例如，页面需要具有地图选址功能，则系统需要先加载百度地图库，才能实现相应的功能。低代码平台中的库，分为系统预置库和自定义库。
#### 系统预置库
系统预置库是系统已定义好的库，可在页面设计中直接进行加载并使用。如何查看系统预置的库，请参见[管理库](https://support.huaweicloud.com/usermanual-astrozero/astrozero_06_0071.html)。
图1系统预置的库   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048108.png "点击放大")
![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png)
系统预置库的版本号是在资源上传或更新时，平台赋予的版本管理号，和实际官网版本不存在对应关系。
#### 自定义库
当系统预置的库无法满足用户需求时，用户可以上传自定义库包，并加载到页面中进行使用。
下面以在标准页面中，通过单击按钮来获取并打印请求的参数，需要引入并使用fetch（第三方库）为例，向您介绍上传第三方库以及如何在组件中管理并使用库。
1. 制作第三方库文件压缩包。
   
   单击[fetch.zip](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/fetch.zip)，下载示例库文件包，示例文件中包含需要引入的JS文件和一个元数据描述文件，如[图2示例库文件]所示。
   图2示例库文件   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888668.png "点击放大")
   其中，packageinfo.json是元数据描述文件，上传的第三方库文件中都必须包含此文件，文件内的结构如下[图3元数据文件]所示。
   图3元数据文件   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127401.png)
   
   
2. 在租户级别下，上传第三方库。 
   1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，进入经典版应用设计器。
   
   2. 在左侧列表中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127409.png)，选择"高级页面 \> 库"。
   
   3. 单击"提交新库"，输入库的基本信息，单击"上传"选择刚创建的zip压缩包，单击"提交"。
      表1上传新库参数说明 
      | 参数    | 参数说明                                                      |
      |:---|:---|
      | 名字    | 自定义库的名称。                                                  |
      | 上传图标  | 库的显示图标。                                                   |
      | 上传源文件 | 单击"上传"，选择[1]中的库文件包。 |
      | 库ID   | 上传库的ID，由字母及数字组成，且必须以字母开头。                                 |
      | 分类    | 库所属的分类。                                                   |
      | 库类型   | 上传库所属的类型。                                                 |
      | 发行说明  | 发布描述信息。                                                   |
         
      返回库页面，在"租户"页签，可查看到已上传的库文件。"全局"页签中的，为系统预置库，不可编辑和禁用系统预置库，只可下载。
      
   
   
   
   
3. 在标准页面组件中，引用库。 
   1. 新建一个标准页面，页面标签和名称为"page01"，如[图5新建标准页面]。
      图4新建标准页面   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287209.png "点击放大") 
   
   2. 在"基本组件 \> 基本"中，拖拽"按钮"组件到页面的设计视图中，并修改按钮属性，如[图6配置按钮组件]所示。
      图5配置按钮组件   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127389.png "点击放大") 
   
   3. 单击右侧面板的"库"中，新增库，如[图7新增库]所示。
      图6新增库   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048104.png) 
   
   4. 在弹出的新增库页面中，搜索刚上传的库文件"fetch"，选择该库文件，单击"确定"，如[图8选择库]所示。
      图7选择库   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127397.png "点击放大") 
   
   5. 在组件的右侧面板中，可以看到已成功新增的库文件，如[图9查看库]所示。
      图8查看库   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048080.png) 
   
   
   
   
4. 在标准页面加载并使用库。 
   1. 选中"按钮"组件，在"事件"页签，单击"点击"后面的"+"号，进入添加动作页面。
   
   2. 输入自定义JS代码，调用库中的方法获取git仓库的地址。
      关于fetch的使用方法及介绍，请参考[Fetch API](https://developer.mozilla.org/zh-cn/docs/web/api/fetch_api)。
      图9自定义JS代码   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287205.png "点击放大")
      ```
      fetch('https://api.github.com/users/chriscoyier/repos')
      .then(function(response){
      return response.json();
      })
      .then(function(data){
      //data是请求的repos
      //console.log(data);
      for(var key in data){
                  console.log(data[key].archive_url)
      }
      });
      ```
      
   
   3. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127385.png)，保存页面。
   
   4. 保存成功后，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127417.png)，预览页面。
   
   5. 单击获取参数按钮，在页面中按F12，打开浏览器的调试界面。
   
   6. 在Console页签下，可以查看到打印的参数，也就是请求的结果，如[图11预览效果]所示。
      图10预览效果   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127405.png "点击放大")