【HarmonyOS Next】ArkUI-X休闲益智接水果【进阶】

// ArkTS核心实现
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({
        src: $rawfile('game.html'), 
        controller: this.controller
      })
      .onMemoryWarning(e => {
        console.error(`内存告警: Lv${e.level}`);
        this.controller.clearCache();
      })
      .width('100%')
      .height('100%')
    }
  }
}

// H5中的网络图片加载
const IMAGES = {
  apple: 'https://example.com/apple.png',
  bomb: 'https://example.com/bomb.png'
};

function loadImage(url) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.src = url;
  });
}

<!-- 根据DPR动态选择资源 -->
<img id="fruit" 
     src="apple@1x.png"
     srcset="apple@2x.png 2x, apple@3x.png 3x">

// 设备自适应格式选择
function getOptimalFormat() {
  const isIOS = /iPhone|iPad/.test(navigator.userAgent);
  return isIOS ? 'webp' : 'avif'; // iOS优先WebP，华为用AVIF
}

const format = getOptimalFormat();
const imgUrl = `https://cdn.com/fruit.${format}`;

/* 抗锯齿优化 */
.fruit-img {
  image-rendering: -webkit-optimize-contrast; /* iOS */
  image-rendering: crisp-edges; /* HarmonyOS */
}

/* 触摸补偿 */
canvas.addEventListener('touchmove', (e) => {
  if (navigator.userAgent.includes('HarmonyOS')) {
    e.touches[0].clientY -= 8; // Y轴补偿
  }
});

#gameContainer {
  padding: 
    env(safe-area-inset-top) 
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

// ArkTS中预加载关键资源
import image from '@ohos.multimedia.image';

function preloadAssets() {
  const assets = [
    'https://cdn.com/apple.avif',
    'https://cdn.com/bomb.webp'
  ];
  
  assets.forEach(url => {
    image.createImageSource(url)
      .createPixelImage()
      .then(img => console.log(`预加载完成: ${url}`));
  });
}

Web({
  onMemoryWarning(e) {
    if (e.level >= 2) {
      this.controller.clearCache();
      
      // 动态降低画质
      const jsCode = `window.reduceRenderQuality()`;
      this.controller.runJavaScript(jsCode);
    }
  }
})

// 运行时设备检测
const deviceProfile = {
  isHarmonyOS: navigator.userAgent.includes('HarmonyOS'),
  isHighEnd: window.devicePixelRatio > 2
};

if (deviceProfile.isHarmonyOS) {
  applyHarmonyOSTextureOptimization();
}

// 帧率监控系统
let frameCount = 0;
setInterval(() => {
  if (frameCount < 45) console.warn("低帧率警告!");
  frameCount = 0;
}, 1000);

function renderLoop() {
  frameCount++;
  requestAnimationFrame(renderLoop);
}
renderLoop();