手把手教学：如何在鸿蒙App中上架小程序？

陈熙 -

自鸿蒙操作系统问世以来，凡泰极客作为HarmonyOS开发服务商，已经利用自身技术创新实力，推动旗下产品FinClip 全面适配鸿蒙OS（HarmonyOS NEXT）。通过FinClip的技术支持，无论是企业还是个人开发者，都能够迅速将其现有的小程序转换成鸿蒙App，同时也可以将小程序场景无缝集成到鸿蒙App中。

FinClip 鸿蒙SDK 发布进入倒计时，现在报名即可抢先体验：鸿蒙SDK体验预约

目前，FinClip 已为开发者提供了一个鸿蒙版App，开发者可以通过凡泰小程序开放平台立即体验小程序集成到鸿蒙App当中的开发过程，希望通过我们提供的技术可以帮您完成相关功能的验证，以下为手把手的操作指引：👇

一、接入前准备

资源链接

FinClip Studio小程序开发工具

1、开发者工具FinClip Studio——下载地址：https://www.finclip.com/downloads/?activeTab=ide

2、开发者工具FinClip Studio——操作指引：https://www.finclip.com/mop/document/develop/developer/fide-guide.html

管理后台

登录地址：https://eco.finclip.com/dev#/

安装包

https://ribqhgop1kk.feishu.cn/drive/folder/AwMzf1VqwlwvU9dNkXmcdokUnXf?from=from_copylink

支持的运行环境

模拟器

HarmonyOS Emulator (API11 Beta版本)，仅支持 MAC Arm 平台运行

真机

HarmonyOS Next Developer Preview1 以上版本的华为设备

⚠️ 温馨提示：模拟器可以直接安装运行此 demo，真机运行需要提交工程机 UUID 给 FinClip 工作人员，由工作人员进行配置后才能运行。如需FinClip 技术支持添加以下社群。

二、体验流程

  1. 登录管理后台，注册账号，并升级为企业账号。
  2. 创建小程序。
  3. 下载FinClip Studio小程序开发工具，编译小程序demo，并通过FinClip Studio将小程序上传到管理后台。
  4. 通过管理后台提交审核/上架/回退等版本验证。
  5. 配置 hdc 环境变量。
  6. 获取工程机 UUID，并提交给 FinClip 工作人员 （模拟器运行不需要此步骤）。
  7. 运行脚本，安装 demo 到模拟器或者真机。
  8. 运行 demo 集成的本地小程序，或者扫码体验远程小程序。

三、详细步骤

3.1 注册 FinClip开发中心账号账号注册

登录地址：https://eco.finclip.com/dev#/自行注册，使用短信验证码注册账号

变更为企业团队：变更企业账号，按要求填写认证信息

3.2 创建小程序

  1. 登录开发中心管理界面
  2. 创建小程序，并上传小程序代码：创建小程序，填写小程序信息，创建成功后可编写小程序图标，上传小程序代码

3.3 开发小程序

1.登录Studio：配置FinClip Studio连接环境（https://eco.finclip.com），并使用企业端帐号登录。

  1. 选择小程序：使用FinClip Studio 打开小程序demo，上传代码小程序代码FinClip Studio 编译后上传代码：选择刚才创建小程序appId,输入版本号（如1.0.0）和版本说明，上传成功后可在开发中心管理后台「小程序-详情-其他-历史代码包」中查看。

3.4 小程序提交审核及上架

  1. 完成隐私设置：新增审核（第一次提交审核会提示配置隐私请先配置小程序隐私协议）
  1. 提交审核：在配置域名、上传代码包并完成隐私设置后，可在「小程序-详情-版本管理」中新增审核并提交，填写审核补充信息后，并等待数字中心通过或驳回，审核结果会通过「通知中心」告知您。

路径：小程序-详情-详细信息-版本管理-配置审核版本

  1. 小程序上下架：将小程序配置为线上版本

方式一：可直接在提交小程序为审核版本时，勾选“审核通过后自动上架”，则小程序在通过审核后会自动发布为线上版本。

方式二：点击配置线上版本，点击「发布至线上版本」，选择全量发布即可。

路径：小程序-详情-版本管理

3.5 APP打开小程序

  3.5.1 添加鸿蒙 sdk tools 到环境变量

   一般位于 ~/home 目录下的 .bash_profile / .zshrc 文件中，打开文件后，增加如下变量：

export PATH="/Users/yourUserName/Library/Huawei/Sdk/HarmonyOS-NEXT-DP1/base/toolchains:$PATH"

  3.5.2 获取工程机 UUID （模拟器运行不需要此步骤）

   确保工程机和开发机 HDC 已经连接，然后运行以下命令获取工程机 UUID，将获取到的 UUID 提交给 FinClip 工作人员，获取重新签名的 demo 安装包。

hdc shell bm get --udid

  3.5.3 运行脚本，安装 demo 到模拟器或者真机

sh install.sh

  3.5.4 体验小程序运行效果

  • 运行Demo App，点击首页小程序的入口，即可体验小程序的运行效果，注意，该小程序默认的环境是凡泰极客SAAS环境。
  • 体验私有化环境的小程序：① 点击页面上的添加服务器按钮，将私有化服务器输入到输入框，格式为http://ip:port或是https:// example.com。
  • 输入完成后，通过FinClip Studio生成小程序预览二维码或者是在开发中心获取小程序二维码，点击App内的扫码按钮，扫描小程序二维码，即可预览私有化环境的小程序运行效果

四、接入要点

  1. FinClip Studio: 开发者能够通过FinClip Studio进行小程序开发、调试，上传代码等操作。
  2. 小程序创建及上下架: 在 FinClip开发中心管理后台中，能够完成审核小程序流程，小程序审核后可以进行上架，在App 中可以通过appId打开已上架的小程序，未上架的小程序将提示小程序未上架。
  3. 组件兼容度: 能够将微信小程序官方Demo上架平台，并成在鸿蒙APP正常打开，各组件显示正常，无异常界面。
  4. 运行环境：FinClip 小程序运行时基于鸿蒙的 next （API 11）进行开发，目前仅支持鸿蒙 next 版本的开发者使用，鸿蒙 next 版本（不兼容安卓的纯血版鸿蒙）当前处于内测状态，仅受邀用户拥有开发和运行权限。
  5. 服务地址；二维码的获取需要在 [FinClip Studio]小程序开发工具中获取，扫码体验远程小程序需保持环境一致。

五、结束语

通过上述的操作步骤，您的小程序可在鸿蒙App上正常打开，并且完成了相关的功能验证，如果您在验证过程中有任何问题可以随时与我们联系。