uniapp HarmonyOS项目实战

news2024/11/23 12:16:31

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中设置

	"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包名

"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" 
}