提交 4af7ab6d 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊

docs: 更新 mp-harmony 文档

上级 2a806589
......@@ -122,6 +122,11 @@ export const navbar = [
type: 'link',
link: 'https://weexapp.com/zh/'
},
{
text: '鸿蒙元服务',
type: 'link',
link: 'https://developer.huawei.com/consumer/cn/doc/atomic-guides-V5/atomic-service-V5'
}
]
},
{
......
......@@ -29,11 +29,13 @@ pageClass: custom-page-class
<b style="font-size: 14px;">需使用已升级到鸿蒙Next</b>
<b style="font-size: 14px;">的手机扫码体验</b>
</a>
<a href="https://hellouniapp.dcloud.net.cn/" target="_blank" class="clear-style barcode-view">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view" style="pointer-events: none;">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/uni-h5-hosting-qr.png" width="160" />
<img src="https://web-ext-storage.dcloud.net.cn/doc/harmony-os-next/tongyi-applinking-as.png" width="160" />
</div>
<b>Web版</b>
<b>鸿蒙元服务</b>
<b style="font-size: 14px;">需使用已升级到鸿蒙Next</b>
<b style="font-size: 14px;">的手机扫码体验</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" width="160" /></div>
......@@ -41,6 +43,12 @@ pageClass: custom-page-class
</a>
</div>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="https://hellouniapp.dcloud.net.cn/" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/uni-h5-hosting-qr.png" width="160" />
</div>
<b>Web版</b>
</a>
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png" width="160" />
......@@ -57,12 +65,12 @@ pageClass: custom-page-class
<div class="barcode-img-box"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/alipay1.png" width="160" /></div>
<b>支付宝小程序版</b>
</a>
</div>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/baidu-uniapp.png" width="160" /></div>
<b>百度小程序版</b>
</a>
</div>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/mp-toutiao.png" width="160" />
......@@ -81,12 +89,12 @@ pageClass: custom-page-class
</div>
<b>360小程序</b>
</a>
</div>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/mp-kuaishou-new.png" width="160" /></div>
<b>快手小程序版</b>
</a>
</div>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/lark-qr-code.png" width="160" /></div>
<b>飞书小程序版</b>
......@@ -103,14 +111,14 @@ pageClass: custom-page-class
</div>
<b>京东小程序版</b>
</a>
</div>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/mp-xhs-qrcode.png" width="160" />
</div>
<b>小红书小程序版</b>
</a>
</div>
<div class="flex-img-group-view" style="margin-top: 20px;">
<a href="//m3w.cn/uniapp" target="_blank" class="clear-style barcode-view">
<div class="barcode-img-box">
<img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hello-uni-qa-union.png" width="160" />
......@@ -119,13 +127,12 @@ pageClass: custom-page-class
</a>
<div style="width:160px"></div>
<div style="width:160px"></div>
<div style="width:160px"></div>
</div>
<p>注:<br/>
<em>- 某些平台不能提交简单demo,故补充了一些其他功能;hello uni-app示例代码可从[github](https://github.com/dcloudio/hello-uniapp)获取</em></br>
<em>- 某些平台不能提交简单demo,故补充了一些其他功能;hello uni-app示例代码可从 <a href="https://github.com/dcloudio/hello-uniapp">github</a> 获取</em></br>
<em>- 快应用仅支持 vivo 、oppo、华为</em></br>
<em>- 360小程序仅 windows平台支持,需要在360浏览器中打开</em></br>
<em>- uni-app 已支持纯血鸿蒙开发,详见[鸿蒙开发专题](https://uniapp.dcloud.net.cn/tutorial/harmony/dev.html)。</em></br>
<em>- uni-app 已支持纯血鸿蒙开发,详见 <a href="https://uniapp.dcloud.net.cn/tutorial/harmony/dev.html">鸿蒙开发专题</a>。</em></br>
</p>
</div>
......
......@@ -9,7 +9,7 @@
::: warning 注意
- 目前仅支持 Vue3 项目编译到鸿蒙元服务平台,Vue2 项目升级 Vue3 项目请参考:[Vue2 项目迁移到 Vue3](../migration-to-vue3.md)
- 目前仅支持鸿蒙真机,鸿蒙模拟器暂不支持,后续鸿蒙模拟器支持后会更新文档。
- 目前仅支持鸿蒙真机,鸿蒙模拟器暂不支持,后续鸿蒙模拟器支持后会更新文档。[点击链接]((https://consumer.huawei.com/cn/support/harmonyos/models-next/)) 查看支持鸿蒙 Next 的机型清单。
:::
## 前置准备
......@@ -33,7 +33,7 @@
签名证书分成两类:
- 面向一台鸿蒙设备的自动签名证书。比较简单,不能用于上架。
- 面向一台鸿蒙设备的自动签名证书。签名过程比较简单,可用于调试,不能用于上架。
- 面向企业级协作的调试、发行证书。统一管理设备注册、权限管理等,调试证书可以用于开发,发行证书可以用于上架。
接下来文档会面向新手,详细介绍如何使用自动签名证书。发行证书会在文档下方的 **发行与上架** 部分进行介绍。
......@@ -54,7 +54,7 @@
注意:
- 也可以通过 `File - Project Stucture...` 打开。
- 也可以通过 `File - Project Structure...` 打开。
- 这种自动签名的方式只能用于运行与调试,需要发行上架时候请参考 **发行与上架** 章节修改签名文件。
- 签名操作需要连接鸿蒙真机设备。
......@@ -62,14 +62,14 @@
到这里前置工作就准备完成了。因为元服务还在开发迭代,下面补充相关注意事项。
### 补充:签名文件、权限配置文件位置
### 签名文件、权限配置文件位置
请留意原生工程的两个文件比较特殊,后续 HBuilderX 编译运行需要这些文件:
1. 根目录 `build-profile.json5` - 证书签名参数等。后续元服务的开发运行、发布上架依赖此文件。
2. `entry/src/main/module.json5` - 项目权限配置、metadata 信息配置,元服务设置权限,比如访问网络、位置定位、手机震动等功能依赖此文件。
### 补充:主动安装元服务依赖
### 主动安装元服务依赖
元服务在编译过程中,依赖鸿蒙提供的 `@atomicservice/ascf-toolkit` npm 包,请确保已全局安装成功,安装命令如下:
......@@ -79,7 +79,7 @@ npm install -g @atomicservice/ascf-toolkit --registry=https://registry.npmmirror
这一步骤是为了规避下载 npm 失败,导致编译失败。
### 补充:DevEco-Studio 5.0.5.200 临时修复错误
### DevEco-Studio 5.0.5.200 临时修复错误
在 DevEco-Studio 5.0.5.200 版本中,运行元服务需要手动修改两个文件,后续等待 DevEco-Studio 修复此问题,在升级之前,目前需要手动修复。后续文档也会持续跟踪此问题。
......@@ -122,17 +122,19 @@ npm install -g @atomicservice/ascf-toolkit --registry=https://registry.npmmirror
### 2. 配置 `build-profile.json5`
需要配置签名证书,这里依赖 [准备签名证书](#准备签名证书) 部分。项目根目录创建 `harmony-mp-configs/build-profile.json5` 文件,将元服务原生项目中的 `build-profile.json5` 文件内容复制。
需要配置签名证书,这里依赖 [准备签名证书](#准备签名证书) 部分。项目根目录创建 `harmony-mp-configs/build-profile.json5` 文件,将上文提到的原生空白项目中的 `build-profile.json5` 文件内容复制。
![配置签名证书](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/6991974b-52d2-4bdc-85fa-d93887b887e8.png)
在文件中搜索 `useNormalizedOHMUrl` 将值设置为 false。
![配置签名证书](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/116bc7de-00e0-4250-ac78-508b2dfa803f.png)
### 3. 配置 `module.json5`
鸿蒙元服务需要获取使用特定的能力,比如元服务登录、震动、获取网络状态等原生提供的能力,需要配置权限模版。
项目根目录创建 `harmony-mp-configs/entry/src/main/module.json5` 文件。将元服务原生项目中的 `entry/src/main/module.json5` 的内容复制填充。HBuilderX 在构建时候会识别替换相关文件。
项目根目录创建 `harmony-mp-configs/entry/src/main/module.json5` 文件。将上文提到的原生空白项目中的 `entry/src/main/module.json5` 的内容复制填充。HBuilderX 在构建时候会识别替换相关文件。
![](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/1206d3f5-5789-4856-b1e3-3928e6c01995.png)
![](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/62fbd174-5276-4a76-9ef7-26562e611533.png)
### 4. 运行鸿蒙元服务
......@@ -144,7 +146,6 @@ npm install -g @atomicservice/ascf-toolkit --registry=https://registry.npmmirror
构建流程完成后,控制台提示:
> 安装成功
>
> 在鸿蒙设备上启动运行 .hap ...
......@@ -203,13 +204,11 @@ npm install -g @atomicservice/ascf-toolkit --registry=https://registry.npmmirror
开发调试期间的证书不可用于应用上架。元服务发布证书的申请流程和鸿蒙应用开发类似,访问 [鸿蒙发布元服务文档](https://developer.huawei.com/consumer/cn/doc/app/agc-help-harmonyos-releaseservice-0000001946273965) 进行发布证书的获取。
调整 `harmony-mp-configs/build-profile.json5`
注意:目前发布上架暂不支持多产物,意思是手动调整 `harmony-mp-configs/build-profile.json5`
定位到 `app.signingConfigs[0]` 字段,修改 `material` 为发行证书路径。
1. 补充 `app.signingConfigs` 字段,添加发布证书相关信息
2. 补充 `app.products` 字段,添加 name 为 `release` 的字段
3. 调整 `modules[0].targets[0].applyToProducts` 添加 `release` 字段
![](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/2e8f1326-8b1a-49af-ba8e-6b9db3b7b212.png)
### 3. 应用打包
......@@ -231,6 +230,25 @@ npm install -g @atomicservice/ascf-toolkit --registry=https://registry.npmmirror
## 注意事项
### 如何修改元服务默认标题、图标?
通过文件配置。在项目 `harmony-mp-configs` 目录创建 `AppScope/resources/base/element/string.json` 填写
```json
{
"string": [
{
"name": "app_name",
"value": "helloUniApp" // 修改为元服务名称
}
]
}
```
元服务图标必须在华为提供的标准图标底板上设计,参考 [生成元服务图标](https://developer.huawei.com/consumer/cn/doc/atomic-guides-V5/atomic-service-icon-generation-V5) 生成图标,否则会上架审核不通过。最终得到 216x216 的图标放置在 `harmony-mp-configs/AppScope/resources/base/media/app_icon.png` 路径内。
上架时候,这个图标文件也需要在 DCloud 管理后台进行配置。
### 发布报错 `hvigor ERROR: Invalid storeFile value. Make sure it is not null or empty. The file must be included`
如果发生在应用运行、发行阶段。可能是构建时候证书缺少或者配置不对。参考 [鸿蒙发布元服务](https://developer.huawei.com/consumer/cn/doc/app/agc-help-harmonyos-releaseservice-0000001946273965) 进行证书申请。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册