OpenHarmony鸿蒙原生应用开发,ArkTS、ArkUI学习踩坑学习笔记,持续更新中。

文章介绍了在AMD处理器Win10系统下,如何解决DevEcoStudio模拟器启动失败的问题,包括BIOS设置和组件导入导出方法。同时,详细讲解了Ohos框架中的页面路由、自定义组件使用、以及PersistentStorage的使用。最后提到Vue3的局部渲染与Ohos.router的整页渲染区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、AMD处理器win10系统下,DevEco Studio模拟器启动失败解决办法。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

结论:在BIOS里面将Hyper-V打开,DevEco Studio模拟器可以成功启动。

二、ArkTS自定义组件导出、引用实现。

如果在另外的文件中引用组件,需要使用export关键字导出,并在使用的页面import该自定义组件。

1.自定义组件(被导入组件)

// @ts-nocheck
@Component
struct header {
  build() {
    Flex({justifyContent:FlexAlign.Center}){
      Text('诸子百家').width('100%').height(70).backgroundColor(0x808080).fontColor(0x000000)
    }
  }
}
export default header

2.组合组件(引用自定义组件)

import router from '@ohos.router';
import header from './header';
let msg:String='index页面传递的消息'
@Entry
@Component
struct Index {
  @State message: string = '鸿蒙应用状态管理出现';
  @State isExpanded:boolean=false;
  build() {
    Row() {
      Column() {
        header()
        if (this.isExpanded){
          Text('鸿蒙应用状态管理消失')
            .fontSize(60)
            .fontWeight(FontWeight.Bold)
        } else {
          Text(this.message)
            .fontSize(60)
            .fontWeight(FontWeight.Bold)
        }
        Button('跳转')
          .onClick(()=>{
          this.isExpanded=!this.isExpanded;
          router.pushUrl({
            url:'pages/Page',
            params:{
              src:msg
            }
          })
        })
      }
      .width('100%').height('100%')
    }
    .height('100%')
  }
}

三、@ohos.router (页面路由)实现。

1、main_pages.json配置文件配置静态路由地址,配置文件路径:src/main/resources/base/profile/main_pages.json

{
  "src": [
    "pages/Index",
    "pages/Page",
    "pages/Twopage"
  ]
}

2、使用router.pushUrl方法进行应用内页面路由跳转以及传值

import router from '@ohos.router';
let msg:String='index页面传递的消息'
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Button('跳转')
          .onClick(()=>{
          router.pushUrl({
            url:'pages/Page',
            params:{
              src:msg
            }
          })
        })
      }
      .width('100%').height('100%')
    }
    .height('100%')
  }
}

3、使用router.getParams()方法进接收路由传值

import router from '@ohos.router';

@Entry
@Component
struct Page {
  @State message: string = '子页面2';
  @State src: string=router.getParams()?.['src'];
  build() {
    Row() {
      Column() {
        Text(this.message+this.src)
          .fontSize(50)
          .fontWeight(FontWeight.Bold);
    }
    .height('100%')
  }
}

四、@ohos.router (页面路由)无法实现类似Vue的router-view局部渲染方案

1、Vue3的router-view局部渲染方案

Vue3

2、@ohos.router (页面路由)是整页渲染,不能进行局部渲染。

在这里插入图片描述

五、PersistentStorage:持久化存储UI状态

PersistentStorage:持久化存储UI状态是除了@ohos.data.preferences (用户首选项)之外的,常用的、轻量化、简单化的键值对的数据存储方案。在这里插入图片描述

…未完待续…

本文原创,原创不易,如需转载,请联系作者授权。

### 鸿蒙原生应用开发 ArkTS 快速入门教程 #### 了解 ArkTS 编程语言 ArkTS 是一种专门为鸿蒙操作系统设计的编程语言,旨在简化应用程序开发过程并提高效率。该语言融合了许多现代编程特性,使得开发者能够更轻松地构建高性能的应用程序[^2]。 #### 设置开发环境 为了开始使用 ArkTS 进行开发,首先需要安装合适的 IDE 和工具链。推荐使用的集成开发环境是 DevEco Studio,它提供了完整的项目创建向导和支持 ArkTS 的插件。通过访问官方网站下载最新版本,并按照说明完成设置。 #### 创建第一个 ArkTS 应用程序 一旦开发环境准备好之后就可以着手建立首个基于 ArkTS 构建的小型 demo app 来熟悉其语法结构: 1. 打开 DevEco Studio 并新建一个 HarmonyOS 工程; 2. 在工程配置阶段选择支持 TypeScript 或 JavaScript 类型的语言选项; 3. 添加必要的依赖库来增强功能实现; 下面是一个简单的 "Hello World!" 实现例子: ```typescript // HelloWorld.ts 文件内容如下所示 import { Text, Column } from '@ohos/arkui'; export default function App() { return ( <Column> <Text>Hello World!</Text> </Column> ); } ``` 这段代码定义了一个名为 `App` 的组件,在其中含了用于显示文本消息 `<Text>` 组件以及布局容器 `<Column>` 。当运行此应用程序时将会看到屏幕上呈现 “Hello World!” 字样[^5]。 #### 学习更多高级特性和最佳实践 随着对基础概念掌握程度加深后还可以进一步探索诸如状态管理、路由导航等方面的知识点。此外,《鸿蒙之光HarmonyOS NEXT原生应用开发入门》这本书籍和技术文档也是很好的参考资料之一,书中不仅介绍了理论知识还涵盖了大量实际案例分析帮助读者更好地理解如何运用这些技巧到具体场景当中去[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值