当前位置：首页 > article >正文

实战16-RVP定义完成适配

article 2024/11/15 22:27:14

新增文件

//设计搞总宽度
const DRAFT_WIDTH = 360

//将元素的设计搞大小转化为真机中的大小
export default function rvp(val: number) {
  /*
  计算元素真正的大小；
  * 元素在设计稿的大小 / 设计搞总宽度 = x / 真机宽度 (保证元素在不同设备占比相同)
  x  = 元素在设计稿的大小 / 设计搞总宽度 * 真机宽度
   */
  return val / DRAFT_WIDTH * (AppStorage.get('windowWidth') as number)
}

EntryAbility中的方法

async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {

  // 3.为沉浸式窗口加载对应的目标页面。
  windowStage.loadContent("pages/Index", (err) => {
    if (err.code) {
      console.error('Failed to load the content. Cause:' + JSON.stringify(err));
      return;
    }
    console.info('Succeeded in loading the content.');
  });
  //1.设置全屏
  //应用窗口对象
  const windowClass = await windowStage.getMainWindow()
  //设置全屏
  windowClass.setWindowLayoutFullScreen(true)
  //获取状态栏高度
  const avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
  //单位是px
  const topHeight = avoidArea.topRect.height;
  //将状态高度存储起来
  AppStorage.setOrCreate('topHeight', px2vp(topHeight))
  //设置状态栏的颜色
  windowClass.setWindowSystemBarProperties({
    statusBarContentColor: '#FFFFFF',
    navigationBarContentColor: '#FFFFFF'
  })
  //3.获取屏幕宽度
  const props = windowClass.getWindowProperties()
  //单位是px
  const windowWidth = props.windowRect.width;
  //屏幕宽度存起来
  AppStorage.setOrCreate('windowWidth', px2vp(windowWidth))


}

代码中需要把所有的大小设置修改成rvp来将元素的设计搞大小转化为真机中的大小

有点闹了，85的太不受待见了，今天本来中软约了面试，可能一开始没注意到我年龄，后来发现我应该要40岁了😂果断取消了面试。👍🏻真机智。😔接下来只能继续撸自己的码，等待当别人的牛马。中年人真的不容易。