hippy开发经验记录

hippy终端demo运行

hippy 调试demo运行联调-mac环境准备篇

开发说明：

环境

node=16.x 例如：16.20.2；先切换后安装;

安装依赖

npm install

前端页面本地调试

• 开发大量工作且不熟悉时，可使用本地打包扫码"hippy:generate-hippy-app-qrcode验证可能认为不支持的功能，打包注册报错方便定位问题

// npm run hippy:generate-hippy-app-qrcode命令包含执行步骤：
hippy-publish superqqshow_gamearea
npm run hippy:vendor -> npm run hippy:vendor-ios;npm run hippy:vendor-android
npm run hippy:build -> npm run hippy:build-ios;npm run hippy:build-android
android zip; ios zip
// 

调试常用命令：

# 查看连机设备，如果设备offline需要重新连接USB联调模式
adb devices -l
# 将设备端口号指向运行端口，有时候重连会需要重置指向端口才能正常交流数据，‘QKXUT2xxx’ 改为你上一步查看到的设备号
adb -s QKXUT2xxx reverse tcp:38989 tcp:38989

关于UI

适配rem、vm/vh、calc单位

HippyVue 提供了 beforeLoadStyle 的 Vue options 勾子函数，供开发者做定制化修改 CSS 样式
可参考 main-native.js 的配置，如下：

beforeLoadStyle(decl) {
  var value = decl.value;
  // 支持vh/vw/rem单位
  if (typeof value === 'string') {
    if (/v[wh]$/.test(value)) {
      decl.value = vwh2pt(value, 750);
    }
    if (/rem$/.test(value)) {
      decl.value = rem2pt(value, 750);
    }
    if (/^calc\(.+\)$/.test(value)) {
      decl.value = calc2pt(value, 750)
    }
  }
  return decl;
},

// 兼容接口页

export function rem2pt(value, baseWidth) {
  if (typeof value === 'string' && /rem$/.test(value)) {
    const num = parseFloat(value.slice(0, -3), 10);
    if (!Number.isNaN(num)) {
      const remRatio = windowWidth / baseWidth;
      return Math.round(num * 100 * remRatio);
    }
  }
  return value;
}

export function vwh2pt(value) {
  if (typeof value === 'string' && /v[wh]$/.test(value)) {
    const num = parseFloat(value.slice(0, -2), 10);
    if (!Number.isNaN(num)) {
      const viewSize = /vw$/.test(value) ? windowWidth : windowHeight;
      return Math.round(num / 100 * viewSize);
    }
  }
  return value;
}

export function px2pt(value) {
  if (typeof value === 'string' && /px$/.test(value)) {
    const num = parseFloat(value.slice(0, -2), 10);
    if (!Number.isNaN(num)) {
      return num;
    }
  }
  return value;
}

export function calc2pt(value, baseWidth) {
  if (typeof value === 'string' && /^calc\(.+\)$/.test(value)) {
    const num = calc(value.slice(5, -1), (value) => {
      /* eslint-disable no-param-reassign */
      value = px2pt(value);
      value = vwh2pt(value);
      value = rem2pt(value, baseWidth);
      return value;
      /* eslint-enable no-param-reassign */
    });
    if (!Number.isNaN(num)) {
      return Math.round(num);
    }
  }
  return value;
}

一些常见功能css写法注意

• span p包裹才显示文件内容，注意查看文档常见组件
• 显示省略号，一定要使用p标签，并配置属性 :numberOfLines="1" ellipsizeMode="tail" 文档传送门
• swiper暂不支持自动滚动，需自行兼容
• scroll滚动的配置：待滚动元素配置overflow="visible" :scrollEnabled="true"，并在css中设置overflow-x/y:scroll，子级为单元素，需跟随设置flex-direction: row/column;
• 声明变量并使用var语法var(---color)引用不支持，使用vue语法来分别注入，参考quiToken的写法
• color等属性不会被继承

路由使用

使用官方@hippy/vue-router时需注意与@hippy/vue版本号相同（官方开发人员确认，暂未验证），否则可能会编译失败，建议直接使用vue-router；

问题说明

• 拉取到资源且页面空白，建议安装好对应终端的联调环境，如：androidstudio等，真机调试查看报错；