手把手教学:如何在鸿蒙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上正常打开,并且完成了相关的功能验证,如果您在验证过程中有任何问题可以随时与我们联系。