使用预览器实现多端预览

通过对代码进行编译混淆,生成闭源HAP。在不共享源码的情况下,通过闭源HAR对外提供组件、资源等,可以实现多个模块或者多个工程共享组件、资源等。

HarmonyOS
2024-05-28 21:54:32
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
hkdavis

使用的核心API       

1. 参考文档:查看多端设备预览效果

核心代码解释

1.代码文件:

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 
import { hilog } from '@kit.PerformanceAnalysisKit'; 
import { window } from '@kit.ArkUI'; 
import display from '@ohos.display' 
 
export default class EntryAbility extends UIAbility { 
 
  private windowObj?: window.Window 
  private curBp: string = '' 
  //... 
  // 根据当前窗口尺寸更新断点 
  private updateBreakpoint(windowWidth: number) :void{ 
    // 将长度的单位由px换算为vp 
    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels 
    console.log('windowWidthVp = '+windowWidthVp) 
    let newBp: string = '' 
    if (windowWidthVp < 320) { 
      newBp = 'xs' 
    } else if (windowWidthVp < 600) { 
      newBp = 'sm' 
    } else if (windowWidthVp < 840) { 
      newBp = 'md' 
    } else { 
      newBp = 'lg' 
    } 
    if (this.curBp !== newBp) { 
      this.curBp = newBp 
      // 使用状态变量记录当前断点值 
      AppStorage.setOrCreate('currentBreakpoint', this.curBp) 
    } 
  } 
 
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 
  } 
 
  onDestroy(): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 
  } 
 
  onWindowStageCreate(windowStage: window.WindowStage): void { 
    // Main window is created, set main page for this ability 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
 
    windowStage.loadContent('pages/MediaQuerySample', (err, data) => { 
      if (err.code) { 
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 
        return; 
      } 
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 
    }); 
 
    windowStage.getMainWindow().then((windowObj) => { 
      this.windowObj = windowObj 
      // 获取应用启动时的窗口尺寸 
      this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width) 
      // 注册回调函数,监听窗口尺寸变化 
      windowObj.on('windowSizeChange', (windowSize)=>{ 
        this.updateBreakpoint(windowSize.width) 
      }) 
    }); 
  } 
 
  onWindowStageDestroy(): void { 
    // Main window is destroyed, release UI related resources 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 
 
    try { 
      if (this.windowObj) { 
        this.windowObj.off('windowSizeChange') 
      } 
    } catch (err) { 
      console.log('show windowObj errMsg' + JSON.stringify(err)) 
    } 
  } 
 
  onForeground(): void { 
    // Ability has brought to foreground 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 
  } 
 
  onBackground(): void { 
    // Ability has back to background 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 
  } 
} 
// common/breakpointsystem.ets 
import mediaQuery from '@ohos.mediaquery' 
 
declare interface BreakPointTypeOption<T> { 
  xs?: T 
  sm?: T 
  md?: T 
  lg?: T 
  xl?: T 
  xxl?: T 
} 
 
export class BreakPointType<T> { 
  options: BreakPointTypeOption<T> 
 
  constructor(option: BreakPointTypeOption<T>) { 
    this.options = option 
  } 
 
  getValue(currentBreakPoint: string) { 
    if (currentBreakPoint === 'xs') { 
      return this.options.xs 
    } else if (currentBreakPoint === 'sm') { 
      return this.options.sm 
    } else if (currentBreakPoint === 'md') { 
      return this.options.md 
    } else if (currentBreakPoint === 'lg') { 
      return this.options.lg 
    } else if (currentBreakPoint === 'xl') { 
      return this.options.xl 
    } else if (currentBreakPoint === 'xxl') { 
      return this.options.xxl 
    } else { 
      return undefined 
    } 
  } 
} 
 
interface Breakpoint { 
  name: string 
  size: number 
  mediaQueryListener?: mediaQuery.MediaQueryListener 
} 
 
export class BreakpointSystem { 
  private currentBreakpoint: string = 'md' 
  private breakpoints: Breakpoint[] = [ 
    { name: 'xs', size: 0 }, { name: 'sm', size: 320 }, 
    { name: 'md', size: 600 }, { name: 'lg', size: 840 } 
  ] 
 
  private updateCurrentBreakpoint(breakpoint: string) { 
    if (this.currentBreakpoint !== breakpoint) { 
      this.currentBreakpoint = breakpoint 
      AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint) 
      console.log('on current breakpoint: ' + this.currentBreakpoint) 
    } 
  } 
 
  public register() { 
    this.breakpoints.forEach((breakpoint: Breakpoint, index) => { 
      let condition:string 
      if (index === this.breakpoints.length - 1) { 
        condition = '(' + breakpoint.size + 'vp<=width' + ')' 
      } else { 
        condition = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)' 
      } 
      console.log(condition) 
      breakpoint.mediaQueryListener = mediaQuery.matchMediaSync(condition) 
      breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => { 
        if (mediaQueryResult.matches) { 
          this.updateCurrentBreakpoint(breakpoint.name) 
        } 
      }) 
    }) 
  } 
 
  public unregister() { 
    this.breakpoints.forEach((breakpoint: Breakpoint) => { 
      if(breakpoint.mediaQueryListener){ 
        breakpoint.mediaQueryListener.off('change') 
      } 
    }) 
  } 
} 
// MediaQuerySample.ets 
import { BreakpointSystem, BreakPointType } from './breakpointsystem' 
import { display } from '@kit.ArkUI'; 
 
@Entry 
@Component 
struct MediaQuerySample { 
  @StorageLink('currentBreakpoint') private currentBreakpoint: string = "md"; 
  @State private icon: Resource = $r('app.media.images2') 
  private breakpointSystem: BreakpointSystem = new BreakpointSystem() 
 
  aboutToAppear() { 
    this.breakpointSystem.register() 
  } 
 
  aboutToDisappear() { 
    this.breakpointSystem.unregister() 
  } 
  onPageShow(): void { 
    console.log('width='+JSON.stringify(display.getDefaultDisplaySync().width)) 
    console.log('height='+JSON.stringify(display.getDefaultDisplaySync().height)) 
    console.log('densityDPI='+JSON.stringify(display.getDefaultDisplaySync().densityDPI)) 
  } 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Image(new BreakPointType({sm:$r('app.media.images2'), md:$r('app.media.images3'), lg:$r('app.media.images4')}).getValue(this.currentBreakpoint)!) 
        .height(100) 
        .width(100) 
        .objectFit(ImageFit.Contain) 
 
      Text(this.currentBreakpoint) 
        .fontSize(24) 
        .margin(10) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}

2.打开预览器,在Previewer窗口中,打开Profile Manager中的Multi-profile preview开关,同时查看多设备上的应用/服务运行效果。

实现效果

适配的版本信息

IDE:DevEco Studio 4.1.3.500

SDK:HarmoneyOS NEXT Developer Preview1

分享
微博
QQ
微信
回复
2024-05-29 23:11:42
相关问题
卡片能否通过预览进行预览
250浏览 • 1回复 待解决
DevEco Studio预览支持实时预览吗?
4701浏览 • 1回复 待解决
如何使用预览查看服务效果
943浏览 • 1回复 待解决
无法使用DevEco Studio的预览
4905浏览 • 1回复 待解决
使用DevEco Studio时Java预览提示错误
8039浏览 • 1回复 待解决
使用web组件实现预览沙箱中pdf
646浏览 • 1回复 待解决
使用预览报这个错的原因是?
2815浏览 • 1回复 待解决
DevEco Device无法使用Previewer预览
31464浏览 • 3回复 待解决
预览上WEB组件无法显示HTML内容
1006浏览 • 1回复 待解决
如何实现拍照预览onPreviewFrame回调
183浏览 • 1回复 待解决
camera_lite预览功能如何实现
1107浏览 • 0回复 待解决
如何实现双路预览+录制功能
473浏览 • 1回复 待解决
应用开发中的预览换成手表模式
8625浏览 • 2回复 待解决
问 鸿蒙JS 怎么实现PDF预览,求教。
5838浏览 • 1回复 已解决
如何实现图片的大图预览效果
523浏览 • 1回复 待解决
怎么使用pdfjs三方库预览pdf文档
758浏览 • 1回复 待解决
camera 获取预览数据
457浏览 • 1回复 待解决
如何通过web组件预览PDF
179浏览 • 1回复 待解决