【2023最新】超详细图文保姆级教程：App开发新手入门(2)

news2024/9/27 15:27:44

上章节我们已经成功的创建了一个 App 项目，接下来我们讲述一下，如何导入项目、编辑代码和提交项目代码。

Let’s Go!

4. 项目导入

当用户创建一个新的应用时，YonStudio 开发工具会自动导入模板项目的默认代码，不需要手动进行代码导入。那么当我们不是创建应用，而是需要导入一个已经存在的旧的应用项目时，可以按以下教程内容进行操作执行。

启动 YonStudio 开发工具，点击顶部菜单的「项目」-> 「导入项目」

在这里插入图片描述

在弹出菜单上我们看到有2个选项，即「本地导入」和「云端检出」,如果用户是第一次导入项目，本地并不存在项目代码，或者想重写生成一个项目代码副本，可以选择云端检出；如果本地已存在项目，则选择本地导入即可。

在这里插入图片描述

本地导入：在弹出的对话框中先选中预导入项目所在文件夹，再点击底部的「打开」按钮即可完成项目的本地导入。
云端检出：在弹出的项目列表中，选择自己准备导入的项目名称->选择准备存储项目代码的本地文件夹->点击底部的「Select Repository Location」按钮即可完成项目的代码导入。

PS:以上两种导入方式,开发者根据自己的实际情况选择一种即可，如果选择「云端检出」方式，则需要当前开发工具处于为已登录状态

5. 代码管理

YonBuilder移动开发 虽然提供了云端检出的方式，不过这个并不是用来进行代码同步的，在新版的 YonBuilder移动开发 平台的产品定义上，平台是不负责维护开发者的项目代码的，需要开发者自行维护，比如自行创建 git 仓库进行代码同步和团队协作，因为 YonStudio 是基于 VSCode 内核的，所以具体项目的 git 操作与使用 VSCode 进行 git 操作一致。

下面以Gitee（码云）为例，简单示范一下具体的操作流程。

5.1 创建远程git仓库

5.1.1 登录Gitee的个人主页，点击右上角「新建仓库」准备创建git仓库（没有账号的先自行注册）

在这里插入图片描述

5.1.2 填写仓库项目信息后，点击底部的「创建」按钮，完成远程仓库的创建

在这里插入图片描述

5.2 clone远程git仓库到本地后，进行以下修改操作

移动 目录4 生成的 YonBuilder移动开发项目文件夹到当前的 git 根目录
重命名 YonBuilder移动开发 项目文件夹为 widget
编辑 .gitignore ,增加新的忽略文件 .yonstudio

最终修改完的目录结构如下：

在这里插入图片描述

PS: 在YonStudio进行代码开发时，会自动在当前项目的根路径生成一个.yonstudio 隐藏缓存文件，记得将此文件添加进 .gitignore, 避免提交git代码时，提交次隐藏文件。

5.3 重新使用YonStudio开发工具导入项目代码

打开YonStudio - 项目 - 导入项目 - 本地导入 - 选择上面重命名的 widget 项目文件夹

在这里插入图片描述

导入以后，就可以使用YonStudio开发工具自带的Git进行代码维护或者自行选用第三方的git工具进行代码维护。

在这里插入图片描述

PS：个人推荐安装 GitLens 插件进行 git 操作，比系统自带的更好用(非必须）

在这里插入图片描述

5.4 提交代码到YonBuilder移动开发平台

当我们需要编译生成应用安装包时，需要通过云平台的移动打包功能进行项目的编译打包。
因为编译过程是在云平台进行的，所以需要我们提前将我们的最终代码同步到YonBuilder移动开发平台。

代码上传页有2种上传方式，分别是 代码包 方式和 Git平台 方式。为了方便讲解，我们需要先访问 YonBuilder移动开发平台的代码上传页面。

5.4.1 登录账号并进入代码提交页面

页面访问路径：

登录用友开发者中心网站：developer.yonyou.com,并登录
点击左上角「大风车」图标，选择云平台-低代码开发平台-移动APP开发

在这里插入图片描述

选择对应应用项目卡片，点击进入

在这里插入图片描述

切换到代码上传面板，准备代码上传

在这里插入图片描述

PS: 代码上传页面的第三个选项 在线网址，是平台提供的一个可以将在线网站打包成套壳App的功能，即输入一个在线的网站URL地址，然后在移动打包页面进行编译，就可以生成一个套壳这个网站的App安装包文件。这里因为和 代码包 、 Git平台 并列，所以会容易错误理解为是提供一个可以下载项目代码zip压缩包的在线URL地址，特别强调这个理解是错误的，在这里特别说明一下。