uniapp HarmonyOS项目实战

1. uniapp HarmonyOS项目实战

   Dcloud发布了uniapp兼容鸿蒙的文档:Uniapp开发鸿蒙应用

1.1. 说明

(1)鸿蒙开发只支持Vue3,不支持Vue2、不支持plus、但支持nvue

(2)nvue编译到鸿蒙后非原生渲染,而是与web一样渲染(自动注入一些默认样式进行兼容)

(3)Vue3也支持选项式代码风格,

  为了在鸿蒙手机运行应用。要么使用鸿蒙next的webview套H5(这里就涉及到h5怎么调用鸿蒙next系统的东西的问题,如文件,权限等等),要么使用uniapp-x开发。

1.1.1. uni-app x

  uni-app x,是下一代 uni-app,是一个跨平台应用开发引擎。

  uni-app x 是一个庞大的工程,它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。

  uts是一门类ts的、跨平台的、新语言。

  uts在iOS平台编译为swift、在Android平台编译为kotlin、在Web和小程序平台编译为js、在鸿蒙next平台上编译为ArkTS。

  在Android平台,uni-app x 的工程被整体编译为kotlin代码,本质上是换了vue写法的原生kotlin应用,在性能上与原生kotlin一致。

1.2. 准备工作

  windows电脑准备(家庭版不行,教育版、企业版、专业版也可以,不像uniapp说的只有专业版)

  Windows系统需要开启以下功能,打开控制面板 - 程序与功能 - 开启以下功能

  (1) Hyper-V

  (2)Windows 虚拟机监控程序平台

  (3)虚拟机平台

1.2.1. IDE下载和使用

  IDE下载:DevEco Studio官网下载

1.2.2. 创建虚拟机

  安装后,在创建模拟器时遇到了问题,我5月份测试时下载了sdk11,uniapp要求使用sdk12的虚拟机,抱着侥幸心理创建11的虚拟机并尝试,发现不行,无法运行。

  运行虚拟机申请或从DS的设备管理进行在线申请,8个小时能过。

1.2.3. 配置鸿蒙离线SDK(鸿蒙项目模板)

(1)下载 uni-app 鸿蒙离线SDK template-1.3.5.tgz 下载地址

(2)解压刚下载的压缩包,将解压后的模板工程在 DevEco-Studio 中打开

(3)等待 Sync 结束,再 启动鸿蒙模拟器 或 连接鸿蒙真机

(4)启动鸿蒙模拟器

1.2.4. 安装完模拟器后,点击启动按钮启动模拟器


1.3. 构建项目

  uniapp提供了一个文件template-1.3.2但没说明是做什么的,因此埋下了坑

用ds打开template-1.3.2的package后,配置签名可以直接运行。

1.3.1. 项目输出鸿蒙

  uniapp的文档中要求先配置Hbuilder的alpha版本,配置后显示

  而对于项目的配置,说的比较含糊,比如他们要求写在Manifest.json中称为'洪门离线SDK'的其实是前面下载的template-1.3.2,你需要把整个文件放到自己的项目目录下

  然后在manifest.json中设置

javascript 复制代码
	"app-harmony": {
	  "projectPath": "我的项目\\template-1.3.2\\package"
	},

  再次点击Hbuilder的运行到鸿蒙,使用DS运行'我的项目\template-1.3.2\package'

就成功了

1.3.2. 修改鸿蒙应用配置

  应用基本信息位于:\template-1.3.2\package\AppScope\app.json5
(1)app名

  sdk12开始有一些变更,如果引入国际化,

  其中value就是应用名

(2)app包名

javascript 复制代码
"app":{
    "bundleName":"com.example.test.template",  包名
    "vendor":"example",
    "versionCode":1000000,
    "versionName":"1.0.0",
    "icon":"$media:app_icon",  图标存储在 template-1.3.2\package\AppScope\resources\base\media
    "label":"$string:app_name" 
}

  报名修改后需要重新生成签名,才能运行,否则报错

(3)配置签名

  注意:配置签名需要先启动模拟器或连接真机后才能配置

  点击 DevEco-Studio 上方菜单 File - Project Structure.

  最后依次点击 Apply 和 OK 使签名生效

相关推荐
梦想不只是梦与想8 小时前
鸿蒙AGC设备管理:设备注册(一)
harmonyos·设备管理·appgallery
熊猫钓鱼>_>10 小时前
鸿蒙ArkUI全手势操作实战指南:6大基础手势从原理到落地避坑
人工智能·深度学习·华为·架构·harmonyos·arkui·tapgesture
小满zs12 小时前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app
2501_9197490312 小时前
华为鸿蒙记录怀孕APP—小羊怀孕
华为·harmonyos·鸿蒙
YM52e14 小时前
鸿蒙 ArkTS 实战|网络常用漫剧主角名称分类表:26 位主角 8 大分类 + 搜索筛选
学习·华为·harmonyos
小雨青年14 小时前
【HarmonyOS 7 悬浮页签深度实战】02 从普通底栏到第一个悬浮页签
华为·harmonyos
whyutianict_vv14 小时前
从零到上架6款APP:AI鸿蒙全栈智能体开发5个月实战复盘(ArkTS/DevEco/AGC全流程)
人工智能·个人开发·harmonyos
OH_TPC15 小时前
HarmonyOS APP开发---"启动秀"应用引导页App,需要用到这个库
harmonyos
见山是山-见水是水17 小时前
围绕HTTP 网络请求实战构建原生体验:设计取舍、实现与排错
网络·网络协议·http·华为·harmonyos
见山是山-见水是水17 小时前
拆解网络缓存策略设计:原生鸿蒙页面的实现路径与调试方法
http·缓存·华为·harmonyos