页面导入与导出

本文介绍了魔笔应用搭建平台的导入导出功能,以及通过详细的步骤说明为用户使用此功能提供指引。

概述

导入导出功能是魔笔应用搭建平台中的核心功能之一,它允许用户将页面、布局模板和 Widget 进行打包导出和导入,从而实现代码的复用、迁移和分享。通过这一功能,用户可以:

  • 快速复制和迁移现有页面、布局模板、Widget

  • 在不同项目间复用已开发的功能模块

  • 备份重要页面和组件

  • 团队间共享已开发的页面和组件资源

  • 提高开发效率,避免重复开发类似功能

导入导出功能不仅支持页面、布局模板和 Widget 的导出,还能够处理它们之间的关联关系,如全局代码、关联布局模板和关联 Widget 等,确保导入后能够正常运行。

通过导入导出功能,用户可以高效地在不同应用间共享和复用资源,提高开发效率。

导出功能

导出功能允许用户将当前应用中的页面、布局模板或 Widget 打包为.mobienc格式的文件,以便后续在其他应用中导入使用。

操作步骤

1、点击导出页面入口

入口

  • 点击“页面管理”面板右上角的更多图标

  • 选择“导出页面”选项

2、选择导出类型

image

在弹出的导出类型选择界面中,选择要导出的类型:

  • 页面:导出应用中的页面

  • 布局模板:导出应用中的布局模板

  • Widget:导出应用中的 Widget

3、导出页面

image

选择要导出的页面

  • 根据所选类型(页面/布局模板/Widget),从列表中选择一个或多个要导出的资源

  • 可以通过文件夹分类查看和选择资源

关联设置选项

  • 根据所选类型,配置关联项导出选项:

    • 导出关联全局代码:选择是否导出与所选资源相关的全局代码(变量、动作、计算属性等)

    • 导出关联布局模板(仅页面类型):选择是否导出页面关联的布局模板

    • 导出关联 Widget(仅页面类型):选择是否导出页面中关联的 Widget

应用配置

检测到导出页面的应用配置了三方库、图标库、预加载JS等,可根据使用情况(被导出资源依赖或者目标应用有意愿做同样的配置)选择是否一并导出。

4、导出信息确认

image

  • 在最后一步,系统会展示导出的资源结构,包括:

    • 全局代码(全局变量、动作、函数、计算属性等)

    • 页面/布局模板/Widget

    • 关联的资源项

  • 确认无误后,点击"确定"完成导出

5、导出文件

image

导出的文件将以.mobienc格式下载到本地。

导入功能

导入功能允许用户将.mobienc格式的文件导入到当前应用中,恢复页面、布局模板或 Widget 及其相关资源。

操作步骤

1、点击导入页面入口

入口

  • 点击“页面管理”面板右上角的更多图标

  • 选择“导入页面”选项

2、上传导入文件

image

  • 点击上传区域,选择要导入的.mobienc文件,或者直接将.mobienc文件拖拽到上传区域

  • 文件上传后会显示在下方,支持删除重新上传

3、查看导入信息

image

  • 系统会解析上传的文件并展示其中包含的资源

  • 可以预览将要导入的页面、布局模板、Widget 和全局代码等资源

  • 确认导入的资源是否符合预期

3、解决导入冲突

说明

导入冲突是指当用户尝试导入一个.mobienc文件时,文件中包含的资源与当前应用中已存在的资源具有相同的唯一标识符(ID)的情况。

冲突类型及范围见下表:

冲突类型

范围

名称

页面、布局模板、Widget、分组

路由

页面

ID

变量、函数、计算属性、集成操作、定时器、插件

ID冲突有多种冲突场景,根据不同场景解决的策略也有所不同。

ID 冲突场景及处理方式见下表:


导入全局 ID

导入区域 ID

宿主全局 ID

可以对导入全局 ID 进行更名,相同类型也可以放弃导入全局 ID 使用宿主全局 ID

系统对区域 ID 进行自动更名

宿主区域 ID

对导入全局进行更名


系统会自动解决所有冲突,分配不重复的名称、路由、ID,用户可以根据实际需要手动更改。

冲突全局ID导入差异示意图:

image

冲突示例:

image

4、导入报告

image

这一步会完成版本提交、导入内容更新、实际导入信息展示、集成资源有效性报告。导入前的提交版本是必要的安全策略,确保应用可安全回滚到导入之前的版本。集成资源有效性报告则是对导入页面依赖的集成资源是否有效进行检查并提供不可用报告,用户可根据报告手动添加对应的集成资源。