[学习日记:Day 2] OpenHarmony--基于Flutter环境的HelloWorld多页面跳转实操

写在前面

        今日特别鸣谢: 同营大佬[沐风-嵌入式!! (其实专业是土木)], 昨日主要的Hmos Sdk Not Found.问题已被大佬连线解决, 在此特别感谢!!
        

        昨日已经做好开发环境的配置, 但由于主包本人尝试消极搁置导致昨天并没有做到Hello World仪式就先封心自顾了, 事后反思时觉得这样子真的要避免, 程序开发不是开玩笑, 在明确问题所在的时候就该寻求方式解决, 以免等后续出问题的时候会想不清楚问题所在!!

        言尽于此, 今天的任务就是完成昨天欠下的账: 你好世界

一、熟悉文件属性

        首先,在官方指导文档中又解释项目子路径中各个文件夹部署,功能和初始状态等等,以下为文本引用 ↓↓↓    传送门:构建第一个HarmonyOS应用

• AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。
• entry：HarmonyOS工程模块，编译构建生成一个HAP包。
  • src > main > ets：用于存放ArkTS源码。
  • src > main > ets > entryability：应用/服务的入口。
  • src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
  • src > main > ets > pages：应用/服务包含的页面。
  • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
  • src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
  • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
  • hvigorfile.ts：模块级编译构建任务脚本。
  • obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
  • oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
• oh_modules：用于存放三方库依赖信息。

• build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。

• hvigorfile.ts：工程级编译构建任务脚本。

• oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

        我们了解到项目的核心基本是照Entry>src>main>est路径走的, 也就是说, OpenHarmony软件的前端开发主要就是在一块工作了!

二、找到Index.ets

        了解完一个程序的基本架构之后, 我们来尝试以下创建第一个程序----<Hello World> !!

像昨天一样, 在欢迎页面点击New Project--Empty Ability--Next 就来到了图示的页面, 编辑完项目名称和保存路径之后我们点[ Finish ] 准备开始今天的实战

        进来之后我们找到第一节说到的src > main > ets > pages下的 Index.ets, 同时打开虚拟机准备随时测试应用程序

        到这才算是进了OpenHarmony应用开发的门了, 让我们坚持下去好吗 !!!

三、实战中学

    Index页

        按照官方文段的指导,我们第一步要做的就是Hello World 的下面添加一个Button, 为后面要做的.onClick相应做准备, 我们在Index.ets示例代码中:

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

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

在 Column() { } 里的最后一行插入一个Button(){ }    ↓↓↓

  // 添加按钮，以响应用户onClick事件
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')

此时在虚拟机中显示的Hello world程序就编程以下这样:

    第二页

        我们第一个页面完成后, 现在再做一个可以点击Button后跳转的页面, 点击左侧中同一路径下找到Pages文件夹--右键后点击New--ArkTs File

将文件命名为<Second>后我们点击Enter 创建新的页面

同时我们还要配置第二个页面的路由。在Project窗口，打开entry > src > main > resources > base > profile，在main_pages.json文件中的"src"下配置第二个页面的路由"pages/Second"。示例如下

接下来我们回到Second.ets页面进行前端的编写,参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式,大体上和Index.ets相似,可直接复制过来用,这里就不展示了。但要修改以下这两块字符串

//第一块
@State message: string = 'Hi there';
//第二块
Button(){             //按钮
          Text('Back')
          .
          .
          .
          .
          .
          .
}

    实现页面间的跳转 (响应式.on***lick配置)

        在官方文档里指导我们要页面间的导航可以通过页面路由router来实现页面跳转。 因为页面间是由路由router根据页面url找到目标页面，从而实现跳转, 另外如果追求转场效果的话,可以考虑添加Navigation语句。

        我们依然在前面的代码中找到Button(){ } 里的最后一行,插入以下代码

 .onClick(() => {
          console.info(`Su***eeded in clicking the 'Next' button.`)
          // 获取UIContext
          let uiContext: UIContext = this.getUIContext();
          let router = uiContext.getRouter();

          // 跳转到第二页  在Second.ets中则是在下一行整行 置换成
          //router.back()  //以下注释同理, 在Second中操作好

          router.pushUrl({ url: 'pages/Second' }).then(() => {

          //console.info('Su***eeded in returning to the first page.')
            console.info('Su***eeded in jumping to the second page.')

          }).catch((err: BusinessError) => {
          //console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })

        完善操作后即可实现页面跳转功能 !!

四、出现的问题

        以上流程看着流程是主包先把成功的结果排好了,这样日记看起来才有可读性, 但操作过程中其实还有不少坎坷, 比如说主包一开始为了抄明白代码就选择了手打复刻, 但是一顿操作完就出现了12处报错, 一处错别字, 哈哈哈哈。

        每个单词都看得懂, 但是连在一起我没有丝毫犹豫点击Add to Chat去找内置ai 自动修了

好好好, 交给DeepSeek蝶柿老师看看呢

蝶柿老师在思考部分就直接指出了问题所在, 一句话说完就是主包手抄代码的时候抄错行了, 但不是什么大问题, 以后注意找清楚花括号的开闭位置就好, 既然抄明白代码的目的已经达成, 那我就直接去文档里把代码原封不动复制下来, 运行正常。

五、总结

        今天的任务不是很难, 实操时长大概在50分钟不到, 包含找bug和debug。

收获是: 

1.熟悉了Dart语言的语法大概与HTML和Aspx有很大的互通性

2. 注释符为 //  (Ctrl + /)

3.页面跳转通过页面路由实现, 具体代码为

//在Button(){ } 里

router.pushUrl({ url: '具体的Url' }).then(() => {
            console.info('成功跳转的日志.')

          }).catch((err: BusinessError) => {
            console.error(`跳转失败的日志. Code is ${err.code}, message is ${err.message}`)
          })

4. 要找对正确的花括号闭弧