鸿蒙应用开发(二)环境搭建

开发流程

IDE下载

首先下载HUAWEI DevEco Studio,介绍首次启动DevEco Studio的配置向导:

  • 运行已安装的DevEco Studio,首次使用,请选择Do not import settings,单击OK。
  • 安装Node.js与ohpm。node.js 是基于 V8 引擎构建的开源运行时环境,用于运行JavaScript代码。 ohpm 是OpenHarmony的包管理器,用于管理鸿蒙操作系统的软件包。可以指定本地已安装的Node.js或ohpm(Node.js版本要求为v14.19.1及以上,且低于v17.0.0;对应的npm版本要求为6.14.16及以上)路径位置;我本地下载的node版本为v20.2.0,所以要使用在线下载。即在安装时选择Install按钮,选择下载源和存储路径后,进行在线下载,单击Next进入下一步。
    在这里插入图片描述
    然后一路next,这个地方要同意协议:
    在这里插入图片描述
    等待下载完成,我这边下载的时候,ohpm 下载异常,这时候选择在线下载
    在这里插入图片描述在这里插入图片描述

配置环境变量

1- 打开终端工具,执行以下命令,根据输出结果分别执行不同命令。

echo $SHELL 
  • 如果输出结果为/bin/bash,则执行以下命令,打开.bash_profile文件。
vi ~/.bash_profile
  • 如果输出结果为/bin/zsh,则执行以下命令,打开.zshrc文件。
vi ~/.zshrc
  • 单击字母“i”,进入Insert模式。
  • 配置环境变量,添加HDC_SERVER_PORT端口信息、ohpm、node
export HDC_SERVER_PORT=7035
export OHPM_HOME=/Users/yangcong/Library/Huawei/ohpm //替换wield自己的ohpm地址
export PATH=${OHPM_HOME}/bin:${PATH}

export NODE_HOME=/Users/yangcong/nodejs   //替换为自己下载的地址
export PATH=${NODE_HOME}/bin:${PATH}

如果忘记自己把node或者ohpm下载到哪了,可以到编辑器页面进行查看
在这里插入图片描述
在这里插入图片描述

  • 编辑完成后,单击Esc键,退出编辑模式,然后输入“:wq”,单击Enter键保存。
  • 如果不习惯使用vi命令修改,可以使用
open ~/.bash_profile
// zshrc 模式时使用下面命名
open ~/.zshrc

这样可以直接以文本的形式打开文件,添加到环境变量末尾后关闭即可

  • 执行以下命令,使配置的环境变量生效。
    source ~/.bash_profile
    // zshrc 模式时使用下面命名
    source ~/.zshrc
    查看当前配置是否生效:
    在这里插入图片描述
  • 环境变量配置完成后,关闭并重启DevEco Studio。

诊断开发环境

在欢迎界面单击Help > Diagnose Development Environment进行诊断。如果您已经打开了工程开发界面,也可以在菜单栏单击Help > Diagnostic Tools > Diagnose Development Environment进行诊断。
在这里插入图片描述
DevEco Studio开发环境诊断项包括电脑的配置、网络的连通情况、依赖的工具或SDK等。如果检测结果为未通过,请根据检查项的描述和修复建议进行处理。
在这里插入图片描述

工程介绍

APP包结构

应用/服务发布形态为APP Pack(Application Package,简称APP),它是由一个或多个HAP(Harmony Ability Package)包以及描述APP Pack属性的pack.info文件组成。
一个HAP在工程目录中对应一个Module,它是由代码、资源、第三方库及应用/服务配置文件组成,HAP可以分为Entry和Feature两种类型。

  • Entry:应用/服务的主模块,可独立安装运行。一个APP中,对于同一类型的设备,可以包含一个或多个Entry类型的HAP,如果同一类型的设备包含多个Entry模块,需要配置distroFilter分发规则,使得应用市场在做应用的云端分发时,对该设备类型下不同规格的设备进行分发。
  • Feature:应用/服务的动态特性模块。一个APP可以包含零到多个Feature类型的HAP。只有包含Ability的HAP才能够独立运行。
    基于Stage模型和FA模型开发的应用,应用程序包结构并不相同:
    在这里插入图片描述
工程目录结构

应用/服务支持API Version 4~9。API Version 4~7和API Version 8~9的构建工具和构建插件不同。其中,API Version 4~7构建体系是由Gradle构建工具和构建插件组成;API Version 8~9构建体系是由Hvigor构建工具和构建插件组成。所以API Version 4~7和API Version 8~9的工程目录结构存在差异。下面按照不同开发语言分别介绍API Version 4~7和API Version 8~9的工程目录结构。
ArkTS工程目录结构(Stage模型)
在这里插入图片描述

  • AppScope > app.json5:应用的全局配置信息。
  • entry:应用/服务模块,编译构建生成一个HAP。
    • src > main > ets:用于存放ArkTS源码。
    • src > main > ets > entryability:应用/服务的入口。
    • src > main > ets > pages:应用/服务包含的页面。
    • src > main > resources:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件的详细说明请参考资源文件的分类。
    • src > main > module.json5:Stage模型模块配置文件,主要包含HAP的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。
    • oh_modules:用于存放三方库依赖信息。关于原npm工程适配OHPM包管理器操作,请参考OHPM包管理器。
    • build-profile.json5:当前的模块信息、编译信息配置项,包括buildOption、targets配置等。
    • hvigorfile.ts:模块级编译构建任务脚本。
    • oh-package.json5:配置三方包声明文件的入口及包名。
      其他工程目录,例如FA模型,Gradle旧版目录等可查看工程介绍
开发第一个程序

针对不同的应用场景及技术背景,方舟开发框架提供了两种开发范式,分别是基于ArkTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。

  • 声明式开发范式:采用基于TypeScript声明式UI语法扩展而来的ArkTS语言,从组件、动画和状态管理三个维度提供UI绘制能力。
  • 类Web开发范式:采用经典的HML、CSS、JavaScript三段式开发方式,即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯,便于快速将已有的Web应用改造成方舟开发框架应用。
    在开发一款新应用时,推荐采用声明式开发范式来构建UI,主要基于以下几点考虑:
  • 开发效率:声明式开发范式更接近自然语义的编程方式,开发者可以直观地描述UI,无需关心如何实现UI绘制和渲染,开发高效简洁。
  • 应用性能:如下图所示,两种开发范式的UI后端引擎和语言运行时是共用的,但是相比类Web开发范式,声明式开发范式无需JS框架进行页面DOM管理,渲染更新链路更为精简,占用内存更少,应用性能更佳。
  • 发展趋势:声明式开发范式后续会作为主推的开发范式持续演进,为开发者提供更丰富、更强大的能力。
    具体说明见 ArkUI框架 ,因此我们选择使用官方推荐的声明式开发规范。
Hello World
  1. 点击Create Project,创建一个新工程
  2. 选择Application —> Empty Abilty
    在这里插入图片描述
  3. 填写工程相关信息,保持默认值即可,单击Finish。
    在这里插入图片描述
  • Project name:工程的名称,可以自定义,由大小写字母、数字和下划线组成。
    如果是创建的元服务,则:
    • 调试、运行时,在设备桌面上没有应用图标,请使用DevEco Studio的调试和运行功能,来启动元服务。
    • 编译构建APP时,每个HAP大小不能超过10MB。
  • Bundle name:标识应用的包名,用于标识应用的唯一性。
  • Save location:工程文件本地存储路径,由大小写字母、数字和下划线等组成,不能包含中文字符。
  • Compile SDK:应用/服务的目标API Version,在编译构建时,DevEco Studio会根据指定的Compile API版本进行编译打包。
  • Model:应用支持的模式,API Version 4~8只支持FA模式。
  • Enable Super Visual:支持低代码开发模式,部分模板支持低代码开发,可选择打开该开关。
  • Language:开发语言。
  • Compatible SDK:兼容的最低API Version。
  • Device type:该工程模板支持的设备类型。
  1. 创建模拟器
  • 单击DevEco Studio > Preferences > SDK,下拉框选择HarmonyOS,勾选并下载Platforms下的System-image和Tools下的Emulator资源。虚拟机支持Phone、TV和Wearable设备,下载System-image时,请选择对应设备的System-image。
    在这里插入图片描述
    在这里插入图片描述

点击ok等待下载完成
5. 单击菜单栏的Tools > Device Manager,在Local Emulator页签,可以单击Edit设置本地模拟器的存储路径Local emulator location,点击+New Emulator 创建一个本地模拟器。可以修改设备的名称、尺寸、分辨率、内存等参数。和Android Studio 非常相似。
在这里插入图片描述

  1. 回到项目中点击run,编译完成后 hello world 就能跑起来了
    在这里插入图片描述

  2. 打开“Index.ets”文件,可以看到页面由Text组件组成。“Index.ets”文件的示例如下:

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“Index.ets”文件的示例如下:

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮,以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}
  1. 构建第二个页面
  • 在“Project”窗口,打开“entry > src > main > ets ”,右键点击“pages”文件夹,选择“New > ArkTS File”,命名为“Second”,点击“Finish”。可以看到文件目录结构如下:
    在这里插入图片描述

  • 配置第二个页面的路由。在“Project”窗口,打开“entry > src > main > resources > base > profile”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下:

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

这一步也可以在右键点击“pages”文件夹时,选择“New > Page”,则无需手动配置相关页面路由。
9. 添加文本及按钮。
参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“Second.ets”文件的示例如下:

// Second.ets
@Entry
@Component
struct Second {
  @State message: string = '我是第二个页面'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“Index.ets”文件的示例如下:

//Index.ets

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        // 添加按钮,以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          console.info(`按钮被点击了~~`)
          //跳转
          router.pushUrl({url:'pages/Second'}).then(() => {
            console.info('成功跳转到了新的页面')
          }).catch((err) => {
            console.error(`跳转失败,错误码: ${err.code}, 错误信息: ${err.message}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“Second.ets”文件的示例如下:

// Second.ets
import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State message: string = '我是第二个页面'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          console.info(`返回按钮被点击了~~`)
          try {
            // 返回第一页
            router.back()
            console.info('成功返回第一页~')
          } catch (err) {
            console.error(`返回失败,错误码: ${err.code}, 错误信息: ${err.message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

问题记录:

当我创建完模拟器之后,IDE并没有识别出来,
解决方法:重启IDE
在这里插入图片描述

UI开发
方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。
基本概念

  • UI:即用户界面。开发者可以将应用的用户界面设计为多个功能页面,每个页面进行单独的文件管理,并通过页面路由API完成页面间的调度管理如跳转、回退等操作,以实现应用内的功能解耦。
  • 组件:UI构建与显示的最小单位,如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。
    基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供了构建HarmonyOS应用UI所必需的能力,主要包括:
  • ArkTS
    • ArkTS是UI开发语言,基于TypeScript(简称TS)语言扩展而来,是TS的超集。扩展能力包含各种装饰器、自定义组件、UI描述机制。状态数据管理作为基于ArkTS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考学习ArkTS语言。
  • 布局
    • 布局是UI的必要元素,它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式,除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外,也提供了相对复杂的列表、宫格、轮播。
  • 组件
    • 组件是UI的必要元素,形成了在界面中的样子,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件,通过这种方式将页面组件化为一个个独立的UI单元,实现页面不同单元的独立创建、开发和复用,具有更强的工程性。
  • 页面路由和组件导航
    • 应用可能包含多个页面,可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏,可通过导航组件实现组件间的导航。
  • 图形
    • 方舟开发框架提供了多种类型图片的显示能力和多种自定义绘制的能力,以满足开发者的自定义绘图需求,支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。
  • 动画
    • 动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验,框架提供了丰富的动画能力,除了组件内置动画效果外,还包括属性动画、显式动画、自定义转场动画以及动画API等,开发者可以通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹。
  • 交互事件
    • 交互事件是UI和用户交互的必要元素。方舟开发框架提供了多种交互事件,除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外,还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势,以及通过单一手势事件进行组合的组合手势事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/243418.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

云渲染怎么提升效果图的画质?云渲染对效果图未来影响

在当今高速发展的视觉设计行业中,高质量的效果图不仅是展示设计成果的重要手段,也是设计沟通和营销的关键。无论是建筑设计、室内设计还是工业样品的视觉化,效果图的精细程度与渲染速度对项目的成功至关重要。对于许多追求卓越和效率的设计师…

数据库是否部署在 Docker 容器里,在这里你能找到答案

前言 近2年Docker非常的火热,各位开发者恨不得把所有的应用、软件都部署在Docker容器中,但是您确定也要把数据库也部署的容器中吗? 这个问题不是子虚乌有,因为在网上能够找到很多各种操作手册和视频教程,小编整理了一…

Antv/G2 折线图 DataSet 数据处理过滤指定字段

DataSet 文档 G2 3.2 DataSet 文档 Demo&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><m…

【力扣】2.两数相加

2.两数相加 这是第二题&#xff0c;还行豁~。 题解&#xff1a; 首先就是对题目的理解。这里你要知道两链表中数字的排列都是逆序的&#xff0c;也就是说示例一中2-4-3他原本的数字应该是342。同理可得下面链表的意思&#xff0c;二者相加所得到的结果也是逆序的&#xff0c;…

springcloud微服务篇--3.注册中心Eureka

一、注册中心Eureka 1.RestTemplate通过注册中心调用 通过springcloud微服务篇--2&#xff0c;RestTemplate的http调用方式引出问题&#xff1a; 服务消费者该如何获取服务提供者的地址信息&#xff1f; 如果有多个服务提供者&#xff0c;消费者该如何选择&#xff1f; 消费者…

HAAS 哈斯机床 读写刀补数据

哈斯机床不管是串口机床还是网口机床 都提供了Q命令 可以使用Q命令 进行刀具补偿的读取和写入 最多支持200把刀的 读取和写入

stu06-VSCode里的常用快捷键

Alt Z&#xff1a;文字自动换行。当一行的文字太长时&#xff0c;可以使用。或者查看→自动换行Alt Shift ↓ &#xff1a;快速复制当前行到下一行Alt Shift ↑ &#xff1a;快速复制当前行到上一行Alt B&#xff1a;在默认浏览器中打开当前.html文件Ctrl Enter&#xf…

云计算在计算机领域的应用与发展

云计算在计算机领域的应用与发展 一、引言 随着科技的不断发展&#xff0c;计算机领域已经成为当今社会最为活跃和创新的领域之一。云计算作为一种新兴的计算模式&#xff0c;已经在计算机领域中得到了广泛的应用&#xff0c;并且正在不断地推动着计算机领域的发展。本文将探…

用友时空 KSOA 多处SQL注入漏洞复现

0x01 产品简介 用友时空 KSOA 是建立在 SOA 理念指导下研发的新一代产品,是根据流通企业前沿的 IT 需求推出的统一的IT基础架构,它可以让流通企业各个时期建立的 IT 系统之间彼此轻松对话。 0x02 漏洞概述 用友时空 KSOA 系统 PayBill、QueryService、linkadd.jsp等接口处…

六:Day05_Spring Security01

一、Spring Security引入 Spring Security 是一个功能强大且高度可定制的身份验证和访问控制&#xff08;认证和授权&#xff09;框架。它是保护基于 Spring 应用程序的事实标准。 2. 认证授权 认证授权实现平台所有用户的身份认证与用户授权功能。 2.1 什么是用户认证 认证…

HarmonyOS、ArkTS 备忘录(持续更新中)

Component 、Builder Component封装大的组件Builder自定义构建函数&#xff0c;可以理解为 构建页面的函数&#xff1b;Builder插槽多点&#xff0c;封装一些小的模块 组件状态管理 像素单位 export default 和 export之间的区别

Github 2023-12-14 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2023-12-14统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量非开发语言项目5TypeScript项目2JavaScript项目1Jupyter Notebook项目1PHP项目1 基于项目的学习 创建周期&a…

企业计算机服务器中了halo勒索病毒怎么解密,勒索病毒解密数据恢复

在网络技术飞速发展的今天&#xff0c;越来越多的企业开始意识到企业数据安全的重要性&#xff0c;很多企业都会依赖数字化办公系统软件&#xff0c;并且通过系统软件将企业的重要数据存储在数据库中&#xff0c;为企业的生产运营提供了极大便利&#xff0c;但网络威胁一直存在…

探索云测试的方法:优化软件质量的新趋势

随着云计算技术的不断发展&#xff0c;云测试成为提高软件质量和效率的关键方法之一。本文将介绍一些云测试的方法&#xff0c;以帮助团队更好地应对不同的测试需求和挑战。 1. 云测试环境搭建 传统测试中&#xff0c;搭建测试环境可能需要大量的时间和资源。云测试通过提供可扩…

消息中间件比较

那都有哪些中间件可供选择呢。其实现在主流的消息中间件就4种&#xff1a;kafka、ActiveMQ、RocketMQ、RabbitMQ 下面我们来看一下&#xff0c;他们之间有什么区别&#xff0c;他们分别应该用于什么场景 ActiveMQ 我们先看ActiveMQ。其实一般早些的项目需要引入消息中间件&…

VS Code串口监视插件Serial Monitor

文章目录 初步使用参数设置VS Code插件 初步使用 Serial Monitor&#xff0c;即串行监视器&#xff0c;提供串口和TCP协议的通信监控功能。在插件栏搜索安装之后&#xff0c;按下Ctrl打开终端&#xff0c;终端界面会多出一个串行监视器选项卡&#xff0c;进入之后&#xff0c;…

linux中的od命令与hexdump命令

初步解读两个命令 在Linux中&#xff0c;"od"和"hexdump"命令都用于以十六进制和其他格式显示文件的内容。它们提供了对文件进行二进制查看和分析的功能。以下是它们的简要说明&#xff1a; od命令&#xff1a; “od”&#xff08;octal dump&#xff09;…

嵌入式开发板qt gdb调试

1&#xff09; 启动 gdbserver ssh 或者 telnet 登陆扬创平板 192.168.0.253&#xff0c; 进入命令行执行如下&#xff1a; chmod 777 /home/HelloWorld &#xff08;2&#xff09; 打 开 QTcreator->Debug->StartDebugging->Attach to Running Debug Server 进行…

web前端项目-影视网站开发

影视网站 本项目主要使用到了 HTML&#xff1b;CSS&#xff1b;JavaScript脚本技术&#xff1b;AJAX无刷新技术&#xff1b;jQuery等技术实现了动态影视网页 运行效果&#xff1a; 一&#xff1a;index.html <!DOCTYPE> <html lang"en"> <head>…

【图像分类】【深度学习】【Pytorch版本】 ResNeXt模型算法详解

【图像分类】【深度学习】【Pytorch版本】 ResNeXt模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】 ResNeXt模型算法详解前言ResNeXt讲解分组卷积(Group Converlution)分割-变换-合并策略(split-transform-merge)ResNeXt模型结构 ResNeXt Pytorch代码完整代码总…