uniapp 编译鸿蒙元服务（手把手包保姆级教学）
目录一：预备开辟情况
二：元服务的 appid 注册
2-1：点击我的应用
2-2：选择 HarmonyOS 点击新建发布
2-3：点击新增应用名称
2-4：点击新增后会跳到APP ID
2-5：点击选择一个所属项目
2-6：创建乐成
三：预备证书（真机运行的时间需要用到署名证书，不然会报错--没有署名无法安装）
3-1：此时就需要用到 DevEco-Studio
3-2：Bundle name
3-3：点击 DevEco-Studio 顶部菜单栏中的 Build 选择 Generate Key and CSR
3-4：一样平常走到此处的都是第一次创建，那么我们就点击 New 新建一个文件
编辑
3-5：此处的 CSR 文件的保存和操作方法同 p12 文件相同
3-6：获取 cer 文件
3-7：获取 profile 文件
四：预备署名
4-1: 打开 DevEco-studio
五：运行
如果看过文档的朋友应该知道，uniapp编译到鸿蒙元服务需要几个须要的条件：
[*]目前仅支持 Vue3 项目编译到鸿蒙元服务平台，Vue2 项目升级 Vue3 项目请参考：Vue2 项目迁移到 Vue3。
[*]目前仅支持鸿蒙 Next 真机，鸿蒙 ARM 模仿器开始内测，点击链接相识怎样申请。
[*]目前支持鸿蒙5.0，鸿蒙 Next 的机型清单如下，查看 支持清单。
所以：当你预备开辟的时间首先你需要预备好 uniapp Vue3 的项目源码，一部支持 鸿蒙5.0 的华为手机，因为目前鸿蒙元服务并不支持使用 DevEco-studio 调试； 但是 DevEco-studio 还是需要先下载的，因为后续的开辟中需要用到。
一：预备开辟情况
[*]HBuilderX 4.34+ 下载地点
[*]DevEco-Studio 5.0.5.200+ 下载地点
二：元服务的 appid 注册
在 华为 AppGallery Connect 完成元服务应用的注册，得到相关包名。
操作步骤如下：
2-1：点击我的应用
https://i-blog.csdnimg.cn/direct/d9a9b8d39dcd469085493ce3cdf89dcd.png
2-2：选择 HarmonyOS 点击新建发布
https://i-blog.csdnimg.cn/direct/74c2d681c06e4b4c9ca6d4c57016dbc7.png
2-3：点击新增应用名称
https://i-blog.csdnimg.cn/direct/0ca671a4c61c45ff86415d7327fc565a.png
2-4：点击新增后会跳到APP ID
选择元服务，填入应用名称，点击下一步
https://i-blog.csdnimg.cn/direct/1751ee125d6049b198d6072e85e82cfe.png
2-5：点击选择一个所属项目
然后确认，将会得到2-6
https://i-blog.csdnimg.cn/direct/db4dfea1bd8f4f7bb88330dcaef80980.png
2-6：创建乐成
后续所需要的 APP ID 和 包名，从此处复制即可
https://i-blog.csdnimg.cn/direct/853d35cde8fc4e1db611ebd13ca487a1.png
三：预备证书（真机运行的时间需要用到署名证书，不然会报错--没有署名无法安装）
3-1：此时就需要用到 DevEco-Studio
进入 DevEco-Studio 后，点击 Create Project
选择第一个
点击 NEXT，到 3-2 页面
https://i-blog.csdnimg.cn/direct/349e8705cc19489dbac4f0b5114e6c36.png
3-2：Bundle name
留意：Bundle name 这一栏需要删除掉默认的，填写 步骤2-7 生成的包名
然后点击 Finish
https://i-blog.csdnimg.cn/direct/a619c64e89614e95a8ae6c5f2aefcf2b.png
此时就打开了你新创建的项目
3-3：点击 DevEco-Studio 顶部菜单栏中的 Build 选择 Generate Key and CSR
https://i-blog.csdnimg.cn/direct/0e84d9b490f946ee8c7789e34940e89a.png
此步骤用于生成 p12 文件 和 CSR 文件
3-4：一样平常走到此处的都是第一次创建，那么我们就点击 New 新建一个文件
https://i-blog.csdnimg.cn/direct/de5ba16953db4d4dab35b897a6ceccd3.png
点击新建后到这个窗口
https://i-blog.csdnimg.cn/direct/222ebd2b1c684296a7db89ff9a33b16e.pngKey stor file：需要你选择当前生成的 p12 文件存放的地点
password：设置一个密码（此密码需要记牢，后面需要用到）
Confierm password：确认你的密码
留意：选择 p12 文件的保存路径时默认给你的文件是没有 .p12 后缀，保存的时间你需要把 .p12 的后缀加上
https://i-blog.csdnimg.cn/direct/bad0b6dd131e4f12a938ab629e1c27e4.png
点击 Save 后会自动回到 3-4 的页面，此时里面信息已经大致填写完成，只有 Alias 未填写，那么此处你可以填写你项目名称的缩写或是其他字符
https://i-blog.csdnimg.cn/direct/2a0f701226204e5e904c1df59b6595e4.png
然后点击 NEXT
3-5：此处的 CSR 文件的保存和操作方法同 p12 文件相同
然后点击 Finish
https://i-blog.csdnimg.cn/direct/271d0a46b2c14ddcb3255775c880c445.png
弹出这个窗口就ok了！
https://i-blog.csdnimg.cn/direct/961a507c2ef44f56b17beb23ab399e33.png
此时你本地在你刚选择的目录就已经得到了 p12 和 csr 文件
3-6：获取 cer 文件
再次打开 AppGallery Connect
点击 证书、APP ID 和 Profile
https://i-blog.csdnimg.cn/direct/f7c21a0f7bc6458e9ccf8d24749196b9.png
点击证书、新增证书
https://i-blog.csdnimg.cn/direct/1322c5c99b3849d6af01ad5a90270539.png
https://i-blog.csdnimg.cn/direct/b12e63ed1d704dd2bf1cb46cb058af0e.png
证书名称：填写没有要求，但是留意区分每个元服务的证书名称，以及调试和发布证书，不要搞混，定名的时间区分一下
证书类型：此处有两个一个调试证书，一个发布证书，调试的时间选调试证书就可以；
选取证书请求文件（CSR）：选择你在 步骤3-5 保存的 CSR 文件即可
然后点击提交
生成完成后，点击下载，下载完成是一个 cer 文件，保存后面需要用到
3-7：获取 profile 文件
点击 Profile ，点击 添加
https://i-blog.csdnimg.cn/direct/ebb24d0f50444cc4a58c1c560c197577.png
https://i-blog.csdnimg.cn/direct/440d0bcba1e5405881f68944069b6ba5.png
应用名称：点击勾选你创建的应用名称
包名：勾选应用名称后包名会对应的自动填写
类型：在证书那一项你选择的是调试证书，那么此处对应就勾选调试
https://i-blog.csdnimg.cn/direct/4839800be6d347aba043496e10fd08da.png勾选证书类型后，选择证书处点击选择对应的证书
选择设备：此时就需要用到你预备的 鸿蒙5.0 的华为手机，需要先使用数据线连接到你的开辟设备上，在 Hauilber X 菜单栏中都选运行到小程序，选择 鸿蒙元服务（此时会提示你--没有署名无法安装）；继续往下走流程；
注：可以下载 Hauilber X - Alpha 版本，这个虽然不是正式版，但是开辟元服务的话用这个版本会比力好，因为元服务是新出的，问题可能会比力多，修复好的 bug 会先上到这个版本上。
以上全部填写完成后点击右上角的添加
填写完成后同样点击下载，下载饿完成后是一个 p7b 文件，保存到本地
https://i-blog.csdnimg.cn/direct/2410a9066f9146018cf787677b5612b2.png
四：预备署名
4-1: 打开 DevEco-studio
点击顶部菜单栏的 File 然后 点击 Project Structure...
https://i-blog.csdnimg.cn/direct/eeca2f2fe52c4787a6cd73f2a67fd9f9.png
点开后弹出这个窗口
https://i-blog.csdnimg.cn/direct/f98ce41437a2425fa1d4846cbd88dc9d.png
点击 Project，选择 Signing Configs
点击 sign in 登陆你的华为 AGC 后台账号
登陆后到这个页面
https://i-blog.csdnimg.cn/direct/8c3713c648204f3fbb7c84a3bd0df4ac.png
对应的文件选择上传上去，点击ok
然后在你的 Hbuilder X 里的 Vue3 项目根目录下建立一个名为 harmony-mp-configs 文件夹，然后建立一个名为 build-profile.json5 的文件，把我下面的代码复制进去
{
"app": {
"signingConfigs": [
{
"name": "default",
"type": "HarmonyOS",
"material": {
"storeFile": "...",
"certpath": "...",
"profile": "...",
"keyAlias": "...",
"storePassword": "...",
"keyPassword": "...",
"signAlg": "SHA256withECDSA"
}
},
{
"name": "release",
"type": "HarmonyOS",
"material": {
"storeFile": "...",
"certpath": "...",
"profile": "...",
"keyAlias": "...",
"storePassword": "...",
"keyPassword": "...",
"signAlg": "SHA256withECDSA"
}
}
],
"products": [
{
"name": "default",
"signingConfig": "default",
"compatibleSdkVersion": "5.0.0(12)",
"runtimeOS": "HarmonyOS",
"buildOption": {
"strictMode": {
"caseSensitiveCheck": true,
"useNormalizedOHMUrl": false
}
}
}
],
"buildModeSet": [
{
"name": "debug"
},
{
"name": "release"
}
]
},
"modules": [
{
"name": "entry",
"srcPath": "./entry",
"targets": [
{
"name": "default",
"applyToProducts": [
"default"
]
}
]
}
]
} 同时在 DevEco-studio 左侧找到 build-oprofile.json5 的文件，复制 4-16 行，替换掉上边 signingConfigs 里边的内容
https://i-blog.csdnimg.cn/direct/5efd6cf8e9884b359117a7a94c3abfbb.png
然后在你刚才新建的 harmony-mp-configs 目录下，按照 entry/src/main/module.json5 次序新建文件夹和 module.json5 文件，把下图 DevEco-studio 中的 module.json5 文件复制过去，同样的 resources 文件和 module.json5 文件平级复制过去，AppScope 文件和上面 entry 文件平级复制过去。
https://i-blog.csdnimg.cn/direct/1baac9efeebb46afb31fa26944f73fff.png
将这段代码复制替换掉 modules.json5 里边的代码
{
"module": {
"srcEntry": "./ets/abilitystage/AbilityStage.ets", // 此时页面有两个 srcEntry
"metadata": [
{
"name": "appgallery_privacy_hosted",
"value": "1" // 默认开启系统隐私弹窗，建议开启无需编写页面
},
{
"name": "app_id",
"value": "" // 填写实际应用的 app_id，在 华为AGC 后台查看
},
{
"name": "client_id",
"value": "" // 填写实际应用的 client_id,在 华为AGC 后台查看
}
],
"requestPermissions": [
{
"name": "ohos.permission.INTERNET",
"reason": "$string:app_name",
"usedScene": {
"abilities": ["FromAbility"],
"when": "inuse"
}
}
],
"dependencies": [
{
"bundleName": "com.huawei.hms.ascf",
"moduleName": "ascf",
"versionCode": 100000
}
],
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone",
"tablet"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:layered_image",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
]
}
],
}
} 其中的 app_id 和 client_id 从华为 AGC 后台可以查看到
查看步骤如下
进入华为 AGC 后台，点击 我的项目 ，选择你的元服务项目，找到 应用
https://i-blog.csdnimg.cn/direct/a94a26bf2d6548568c90593e28638170.png
选择这两项，对应的复制进 app_id 和 client_id
https://i-blog.csdnimg.cn/direct/b835b87628bd406a898fc4e8dfdde5c2.png
同时此处需要添加一个 公钥指纹
https://i-blog.csdnimg.cn/direct/5022c6ddfe8d4acba356d4d8316f8889.png
点击后在弹窗选择你对应的证书即可自动生成
五：运行
到此处基本预备工作就已经全部完成
拿出数据线连接你的开辟电脑和测试手机，在 Hbuilder X 里边点击 运行 ➡️ 运行到小程序 ➡️ 鸿蒙元服务，然后革新一下找到你的测试手机勾选，然后运行就可以。
（博主也是首次开辟，如流程有问题请见谅，提出问题，我会及时更正；首次操作流程确实稍微贫苦些，但是耐烦走通一遍后基本你就可以记清所有的操作流程了）
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]