如何引入第三方库

什么是库

库是指在设计页面时，需要依赖的库，若缺少相应的依赖库，则页面中无法实现某些功能。例如，页面需要具有地图选址功能，则系统需要先加载百度地图库，才能实现相应的功能。低代码平台中的库，分为系统预置库和自定义库。

系统预置库

系统预置库是系统已定义好的库，可在页面设计中直接进行加载并使用。如何查看系统预置的库，请参见管理库。

图1 系统预置的库

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

自定义库

当系统预置的库无法满足用户需求时，用户可以上传自定义库包，并加载到页面中进行使用。

下面以在标准页面中，通过单击按钮来获取并打印请求的参数，需要引入并使用fetch（第三方库）为例，向您介绍上传第三方库以及如何在组件中管理并使用库。

1. 制作第三方库文件压缩包。
   单击fetch.zip，下载示例库文件包，示例文件中包含需要引入的JS文件和一个元数据描述文件，如图2示例库文件所示。

   图2 示例库文件
   
   其中，packageinfo.json是元数据描述文件，上传的第三放库文件中都必须包含此文件，文件内的结构如下图3元数据文件所示。

   图3 元数据文件
   

2. 在租户级别下，上传第三方库。
   1. 参考登录经典应用设计器中操作，进入经典版应用设计器。
   2. 在左侧列表中，单击，选择“高级页面 > 库”。
   3. 单击“提交新库”，输入库的基本信息，单击“上传”选择刚创建的zip压缩包，单击“提交”。

      表1 上传新库参数说明

      参数	参数说明
      名字	自定义库的名称。
      上传图标	库的显示图标。
      上传源文件	单击“上传”，选择1中的库文件包。
      库ID	上传库的ID，由字母及数字组成，且必须以字母开头。
      分类	库所属的分类。
      库类型	上传库所属的类型。
      发行说明	发布描述信息。

      返回库页面，在“租户”页签，可查看到已上传的库文件。“全局”页签中的，为系统预置库，不可编辑和禁用系统预置库，只可下载。

3. 在标准页面组件中，引用库。
   1. 新建一个标准页面，页面标签和名称为“page01”，如图5新建标准页面。
      图4 新建标准页面
      
   2. 在“基本组件 > 基本”中，拖拽“按钮”组件到页面的设计视图中，并修改按钮属性，如图6配置按钮组件所示。
      图5 配置按钮组件
      
   3. 单击右侧面板的“库”中，新增库，如图7新增库所示。
      图6 新增库
      
   4. 在弹出的新增库页面中，搜索刚上传的库文件“fetch”，选择该库文件，单击“确定”，如图8选择库所示。
      图7 选择库
      
   5. 在组件的右侧面板中，可以看到已新增成功的库文件，如图9查看库所示。
      图8 查看库
      

4. 在标准页面加载并使用库。
   1. 选中“按钮”组件，在“事件”页签，单击“点击”后面的“+”号，进入添加动作页面。
   2. 输入自定义JS代码，调用库中的方法获取git仓库的地址。
      关于fetch的使用方法及介绍，请参考Fetch API。

      图9 自定义JS代码
      

      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. 返回标准页面开发界面，单击页面上方的，保存页面。
   4. 保存成功后，单击，预览页面。
   5. 单击获取参数按钮，在页面中按F12，打开浏览器的调试界面。
   6. 在Console页签下，可以查看到打印的参数，也就是请求的结果，如图11预览效果所示。
      图10 预览效果