鸿蒙 ArkTS 应用快速上手手册
鸿蒙 ArkTS 应用快速上手手册
  1. 构建第一个ArkTS应用（Stage模型）
  2. Stage模型应用程序包结构
  3. 多HAP构建视图
  4. 多HAP的开发调试与发布部署流程
  5. 多HAP使用规则
  6. 多HAP运行机制及数据通信方式
  7. 应用程序包安装和卸载流程
  8. 应用程序包更新流程
  9. 共享包概述
  10. HAR
  11. 应用内HSP开发指导
  12. 快速修复概述
  13. 快速修复命令行调试开发指导
  14. 应用配置文件概述（Stage模型）
  15. app.json5配置文件
  16. module.json5配置文件
  17. 资源分类与访问
  18. 学习ArkTS语言
    1. 初识ArkTS语言
    2. 基本语法概述
    3. 声明式UI描述
    4. @Builder装饰器：自定义构建函数
    5. @BuilderParam装饰器：引用@Builder函数
    6. @Styles装饰器：定义组件重用样式
    7. @Extend装饰器：定义扩展组件样式
    8. stateStyles：多态样式
    9. @State装饰器：组件内状态
    10. @Prop装饰器：父子单向同步
    11. @Link装饰器：父子双向同步
    12. @Provide装饰器和@Consume装饰器：与后代组件双向同步
    13. @Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化
    14. LocalStorage：页面级UI状态存储
    15. AppStorage：应用全局的UI状态存储
    16. PersistentStorage：持久化存储UI状态
    17. Environment：设备环境查询
    18. @Watch装饰器：状态变量更改通知
    19. $$语法：内置组件双向同步
    20. if/else：条件渲染
    21. ForEach：循环渲染
    22. LazyForEach：数据懒加载
  19. 开发
    1. 应用模型的构成要素
    2. 应用模型解读
    3. Stage模型开发概述
    4. 应用/组件级配置
    5. UIAbility组件概述
    6. UIAbility组件生命周期
    7. UIAbility组件启动模式
    8. UIAbility组件基本用法
    9. UIAbility组件与UI的数据同步
    10. UIAbility组件间交互（设备内）
    11. ExtensionAbility组件
    12. ArkTS卡片运行机制
    13. ArkTS卡片相关模块
    14. 创建一个ArkTS卡片
    15. 配置卡片的配置文件
    16. 卡片生命周期管理
    17. 卡片页面能力说明
    18. 卡片使用动效能力
    19. 卡片使用自定义绘制能力
    20. 卡片事件能力说明
    21. 使用router事件跳转到指定UIAbility
    22. 使用call事件拉起指定UIAbility到后台
    23. 通过message事件刷新卡片内容
    24. 通过router或call事件刷新卡片内容
    25. 卡片数据交互说明
    26. 定时刷新和定点刷新
    27. 刷新本地图片和网络图片
    28. 根据卡片状态刷新不同内容
    29. 使用方刷新卡片内容（仅对系统应用开放）
    30. AbilityStage组件容器
    31. 应用上下文Context
    32. Want概述
    33. 显式Want与隐式Want匹配规则
    34. 常见action与entities
    35. 使用显式Want启动Ability
    36. 使用隐式Want打开网址
    37. 应用间使用Want分享数据
    38. 公共事件简介
    39. 动态订阅公共事件
    40. 静态订阅公共事件（仅对系统应用开放）
    41. 取消动态订阅公共事件
    42. 公共事件发布
    43. 线程模型概述
    44. 使用Emitter进行线程间通信
    45. 使用Worker进行线程间通信
  20. UI开发
    1. 方舟开发框架（ArkUI）概述
    2. UI开发（ArkTS声明式开发范式）概述
    3. 线性布局（Row/Column）
    4. 层叠布局（Stack）
    5. 弹性布局（Flex）
    6. 相对布局（RelativeContainer）
    7. 栅格布局（GridRow/GridCol）
    8. 媒体查询（mediaquery）
    9. 创建列表（List）
    10. 创建网格（Grid/GridItem）
    11. 创建轮播（Swiper）
    12. 改善布局性能
    13. 按钮（Button）
    14. 单选框（Radio）
    15. 切换按钮（Toggle）
    16. 进度条（Progress）
    17. 文本显示（Text/Span）
    18. 文本输入（TextInput/TextArea）
    19. 自定义弹窗（CustomDialog）
    20. 视频播放（Video）
    21. XComponent（绘制）
    22. 气泡提示（Popup）
    23. 菜单（Menu）
    24. 页面路由（router）
    25. Navigation（页面的根容器）
    26. Tabs（页面导航）
    27. 显示图片（Image）
    28. 绘制几何图形（Shape）
    29. 使用画布绘制自定义图形（Canvas）
    30. 布局更新动画
    31. 组件内转场动画
    32. 弹簧曲线动画
    33. 放大缩小视图
    34. 页面转场动画
    35. 触屏事件
    36. 键鼠事件
    37. 焦点事件
    38. 绑定手势方法
    39. 单一手势
    40. 组合手势
    41. 性能提升的推荐方法
  21. Web
    1. 使用Web组件加载页面
    2. 设置深色模式
    3. 上传文件
    4. 在新窗口中打开页面
    5. 管理位置权限
    6. 应用侧调用前端页面函数
    7. 前端页面调用应用侧函数
    8. 建立应用侧与前端页面数据通道
    9. 管理页面跳转及浏览记录导航
    10. 管理Cookie及数据存储
    11. 自定义页面请求响应
    12. 使用Devtools工具调试前端页面
  22. 基础类库
    1. 异步并发概述
    2. 单次I/O任务开发指导
    3. 多线程并发概述
    4. TaskPool和Worker的对比
    5. @Concurrent装饰器：校验并发函数
    6. CPU密集型任务开发指导
    7. I/O密集型任务开发指导
    8. 同步任务开发指导
    9. 线性容器
    10. 非线性容器
    11. XML生成
    12. XML解析
    13. XML转换
  23. 通知
    1. 发布基础类型通知
    2. 发布进度条类型通知
    3. 为通知添加行为意图
  24. 媒体
    1. 使用AVPlayer开发音频播放功能
    2. 使用AudioRenderer开发音频播放功能
    3. 使用OpenSL ES开发音频播放功能
    4. 多音频播放的并发策略
    5. 播放音量管理
    6. 音频播放流管理
    7. 音频输出设备管理
    8. 使用AVRecorder开发音频录制功能
    9. 使用AudioCapturer开发音频录制功能
    10. 使用OpenSL ES开发音频录制功能
    11. 管理麦克风
    12. 音频录制流管理
    13. 音频输入设备管理
    14. 开发音频通话功能
    15. 视频播放
    16. 图片解码
    17. 图像变换
    18. 位图操作
    19. 图片编码
    20. 图片工具
阅读(478) 书签 赞(0) 我要纠错

上传文件

2024-02-16 13:38 更新

Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。

下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。

  • 应用侧代码。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. @Entry
    4. @Component
    5. struct WebComponent {
    6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
    7.   build() {
    8.     Column() {
    9.       // 加载本地local.html页面
    10.       Web({ src: $rawfile('local.html'), controller: this.controller })
    11.         .onShowFileSelector((event) => {
    12.             // 开发者设置要上传的文件路径
    13.            let fileList: Array<string> = [
    14.               'xxx/test.png',
    15.            ]
    16.            if(event){
    17.               event.result.handleFileList(fileList)
    18.            }
    19.            return true;
    20.         })
    21.     }
    22.   }
    23. }
  • local.html页面代码。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>Document</title>
    6. </head>
    7. 

    8. <body>
    9. // 点击文件上传按钮
    10. <input type="file" value="file"></br>
    11. </body>
    12. </html>
以上内容是否对您有帮助：
← 设置深色模式
在新窗口中打开页面 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号