AI运动小程序鸿蒙平台适配指南

鸿蒙5的首版发布距现在已快满一年了,同时伴随着华为终端芯片制造的突破,搭载有HarmonyOS5的终端及用户的保有量在不断的上升,各大厂商的APP也在逐渐适配鸿蒙生态,微信小程序生态也在逐渐适配成熟,移动端适配HarmonyOS生态已势在必行。今天我们就结合我们一段时间以来「Ai乐运动」用户的反馈、实测验证,来聊聊AI运动小程序在鸿蒙端的适配。 注:本文主要介绍适配鸿蒙5以及后的HarmonyOS Next纯血版鸿蒙版本,HarmonyOS 4及以前的版本因为还兼容Android生态、微信小程序运行时也与Android版本无差异,所以无需特别适配。

一、AI运动识别插件在鸿蒙5的实测表现

使用版v8.0.11微信分别在Harmony5.0.1Harmony5.1.0的实际测试结果如下:

功能 功能表现 备注
识别引擎ve1 正常 但精度不佳 ,与MTK芯片问题一致,开启增强模式即可解决
识别引擎ve1,增强模式 正常 Harmony5+建议识别模式
识别引擎ve1 正常
骨骼图绘制 正常
资态识别 正常
运动识别检测 正常
运动自定义扩展 正常

测试使用时的插件版本为当前最新版本1.5.8,从结果看AI运动识别插件的功能在鸿蒙5的表现不存在兼容性问题,可以正常使用。

二、AI运动小程序在鸿蒙5的兼容性问题

使用微信版本v8.0.11分别在Harmony5.0.1Harmony5.1.0测试兼容问题主要表现在小程序的Camera组件,问题为Camera的非原生事件,即Web渲染层事件如taptouch___相关事件完全不触发或偶尔触发但是没有冒泡向上传播,代码如下:

html 复制代码
<template>
	<view class="human-detection" style="videoStyles" @tap="onWrapperClick">
		<!--原生initdone、error事件能正常触发,但是渲染层事件tap不触发,或者偶尔触发但不冒泡-->
		<camera id="preview" class="preview" :style="videoStyles" flash="off" :device-position="deviceKey"
			resolution="medium" frame-size="small" @initdone="onCameraReady" @error="onCameraError" @tap="onCameraClick">
		</camera>
	</view>
</template>

如果您的AI运动小程序依赖Camera组件的非原生事件来交互,如全屏模式下点击组件打开操作菜单等,在小程序运行时彻底修复上述问题之前,可以考虑先采用在Camera组件覆盖一个一样大小、透明的非原生组件如view来解决此问题,代码如何下:

html 复制代码
<template>
	<view class="human-detection" style="videoStyles" @tap="onWrapperClick">
		<camera id="preview" class="preview" :style="videoStyles" flash="off" :device-position="deviceKey"
			resolution="medium" frame-size="small" @initdone="onCameraReady" @error="onCameraError" @tap="onCameraClick">
		</camera>
		<!--增加一个遮罩层来承担交互,保证非原生事件能正常触发-->
		<view class="hramony-fix" :style="videoStyles"></view>
	</view>
</template>
<script>
export default{
	data(){
		return {};
	},
	methods:{
		onCameraClick(e){
			//不会触发
		},
		onWrapperClick(e){
			//修补可以正常触发
		}
	}
}
</script>

三、在纯血鸿蒙下的适配指引

  • 3.1、将AI运动识别插件升级到最新版本,并为纯血鸿蒙版本的用户开启增强模式
  • 3.2、提示或调用API引导用户升级到最新版本的微信。
  • 3.3、若存在依赖Camera组件非原生事件交互的问题,可使用上述临时方案修复交互。

AI运动小程序在纯血鸿蒙下的适配就为您介绍到这,若有其它的适配场景我们继续为您分享,欢迎关注...

相关推荐
To_OC3 小时前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode
小林ixn5 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
窝子面7 小时前
手搓最简前后端协作-node
javascript·数据库
kyriewen8 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距,比我想的大得多
前端·javascript·ai编程
এ慕ོ冬℘゜9 小时前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
sugar__salt10 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
SmartBoyW10 小时前
CSS弹性布局(Flexbox)学习笔记:从零开始搞懂弹性布局
前端·javascript
用户9385156350710 小时前
写了这么久 useState,你真的知道它在干什么吗?
前端·javascript
烬羽11 小时前
递归老写崩?一个"退回"公式,把回溯题变成填空题
javascript·深度学习·算法
浮江雾12 小时前
Flutter第十七节-----路由管理(3)
android·开发语言·前端·javascript·flutter·入门