如何引入第三方库
使用说明
在高级页面组件开发过程中，低代码平台支持开发者直接引用第三方库，在降低组件开发复杂度的同时，丰富了组件的功能。库是支撑高级页面组件运行的第三方依赖，若缺少相应的库，则高级页面组件不能正常运行。
低代码平台提供了一些系统预置库，若不满足现有需求，支持开发者制作并上传新的库。
场景描述
本章节以某Widget中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库，并在Widget使用库。
操作步骤
- 将自定义库的相关文件打成Zip包。
例如，在MintUI官网下载组件库的代码，增加一个packageinfo.json元数据描述文件，在该文件中列出Library包含的js和css文件名，并打成Zip包，如图3。您也可以单击链接，获取该包。
packageinfo.json中必选要包含待引入的文件。例如，MintUI库需要引入文件“js/index.js”和“css/index.css”，请在packageinfo.json中添加这两个文件的描述。其中，“js”和“css”用于定义文件类型，“name”用于定义文件路径及名称。
{ "js": [ { "name": "js/index" } ], "css": [ { "name": "css/index" } ] } - 上传自定义库。
- 登录新版环境配置。
- 在主菜单中，选择“维护”。
- 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 库”。
- 单击“提交新库”，进入提交新库页面。
- 设置库的基本信息，上传1中的zip包后，单击“提交”。
表1 上传组件参数说明 参数
说明
名字
新建库的名称。
上传图标
库的显示图标。
上传源文件
库文件包。
库ID
上传库的ID，由字母及数字组成，且必须以字母开头。
分类
库所属的分类。
库类型
上传的库，所属的类型。
发行说明
上传库的发布描述信息。
上传成功后，在库的“租户”中，可查看到上传的库。
“全局”页签中的库，是系统预置的库，不可编辑和禁用，只能下载。
- （可选）查看该库的版本号和库ID。
单击已上传的组件，进入库的详情页面，即可查看到库ID。在详情页的“更改历史”中，可查看库的版本号（按照版本依次排序显示，最近版本号在最上面）。
图4 库详情页
库详情页面中的库ID和版本号，在高级页面组件中引用库时，会使用到。
- 在高级页面组件中，引用库。
以自定义组件（widget_demo_mintui）为例，在该组件引用第三方库，单击widget_demo_mintui.zip，获取该组件包。
- 在组件包的“packageinfo.json”文件中，增加requires节点，指定需要依赖库的库ID和版本号。
其中，“name”为库ID、“version”为库版本号数字部分。
例如，增加如下requires节点，库文件名称和版本号在库详情页面获取。"requires": [ { "name": "global_Vue", "version": "100.7" }, { "name": "t0000000000fcsfrfcaks_MintUI", "version": "1.0.0" } ]
在“requires”里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如“global_VueI18n”是基于“global_Vue”的，需要写在“global_Vue”之后。
- 在高级页面组件包的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>
- 在高级页面组件包的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"); } } }) - 将修改后的组件Widget包，重新打包。
- 在组件包的“packageinfo.json”文件中，增加requires节点，指定需要依赖库的库ID和版本号。
- 返回新版环境配置，选择“维护 > 全局元素 > 页面资产管理 > 组件”，单击“提交新组件”，将3.d中的组件包上传至组件库中。
图5 上传组件
表2 上传组件参数说明 参数
说明
名字
组件名称，系统会根据组件包名称自动填充。
上传图标
组件的显示图标，本示例不配置。
上传源文件
组件源文件包，即3.d中的widget_demo_mintui.zip包。
组件ID
资产ID，前缀不可编辑，上传组件包后会自动填写。
分类
组件所属分类，上传组件后，该组件将会在页面的该分类下进行展示。
本示例配置为其它。
领域
组件包应用的领域。
一般保持默认“通用”，在组件列表中可基于领域进行分类展示。
场景
该组件包的应用场景。勾选后，在相应类型页面开发中，才可使用该组件。
发行说明
组件的描述信息。
- 在高级页面中拖入该组件，预览组件效果。
图6 拖入自定义组件
图7 效果
