前期部署安装
- hippy介绍：hippyjs.org/#/guide/int…
- adb-远程连接设备 在👇链接
- scrcpy-设备画面回传到本机 github.com/Genymobile/…
- Android Studio
- git
- 项目地址：github.com/Tencent/Hip… 注意：gitee的跑不起来
常用指令
- scrcpy
scrcpy --display 1 // 连接主屏
scrcpy // 连接副屏
- adb
3.3
//关闭进程：
adb shell pm clear com.openhippy.example
//单独开启进程：
adb shell am start com.openhippy.example/.MainActivity
---------------------------------------------------------------------------------------------0
2.x
//关闭进程：
adb shell pm clear com.tencent.mtt.hippy.example
//单独开启进程：
adb shell am start com.tencent.mtt.hippy.example/.MyActivity
opfun
//关闭进程：
adb shell pm clear com.ktvme.game.opfun
//单独开启进程：
去foxapi给对应机顶盒发协议👇图
- 在opfun开关hippy引擎
路径：KmOpfun\opfun\src\main\java\com\ktvme\game\opfun\AppBase.java
- 在opfun开关weex引擎
路径：KmOpfun\opfun\src\main\java\com\ktvme\game\opfun\AppBase.java
- 3.0降级2.0的SDK 需 修改gradle
- foxapi调用单页面展示
- 看catlog里的前端console.log
- 项目在VOD上透明背景色
修改demo代码
以hippy-vue-demo为例 |注意❗ 3.0的路径从2.0的/examples 换到 👇
├─driver
│ └─js
├ └─examples
│ └─hippy-vue-demo
编译修改后的前端工程
以编译hippy-vue-demo为例，在Hippy根目录执行命令
// 先初始化 /根目录下/
yarn
// 进入修改的项目包下 装依赖
cd driver\js\examples\hippy-vue-demo\
yarn
// 打包
npm run hippy:build
// 使用 `webpack serve` 命令启动一个 Webpack 开发服务器，它会监听文件变化并实时重新编译，配置文件是 `hippy-webpack.web-renderer.dev.js`
npm run web:dev
❗web:dev可能会因为缺少微软vs模块导致没法启动，解决方案：
通过安装 Microsoft Visual C++ 2015 Redistributable (x64) 就解决了 npm run dev 错误。 aka.ms/vs/17/relea…
运行前端编译产物
把driver\js\examples\hippy-vue-demo\dist\android\目录内容整体拷贝到对应的demo的res目录，当用Android来跑时拷贝到Android对应的目录。
cp -R -Force driver\js\examples\hippy-vue-demo\dist\android\* framework\examples\android-demo\res\vue2\
hippy3.3.x部署踩坑集
机型选择
- 设备：随意phone
- 版本：X86_64 | Android 12
error when building with cmake
[CXX1405] error when building with cmake using C:\Users\user\Desktop\project
方案👇
安装 Microsot C++ 2015 file 把漏的ddl补上
- video：www.youtube.com/watch?v=Xg1…
- Microsot C++ 2015 file : www.microsoft.com/EN-IN/DOWNL…
Gradle plugin 下载太慢
- 添加maven镜像源 blog.csdn.net/qq_43811536…
gradle-wrapper.properties换源
- 版本号记得按需改
比如用 distributionUrl=https://mirrors.cloud.tencent.com/gradle/gradle-7.3.3-bin.zip
替换 distributionUrl=https://services.gradle.org/distributions/gradle-7.3.3-bin.zip
性能比对
❗原生API：requestAnimationFrame的帧数数据仅作参考
基于N13S
200条list的滚动页面
| 用例1 (Scroller) | Native | Hippy3.3 | Hippy2.17 |
|---|---|---|---|
| 页面渲染时间(首次, ms) | - | 537.69 | 641.85 |
| 滚动CPU(%) 峰值 | - | 26 | 32 |
| 内存(M) dev同构web | - | 156.9 | - |
| 内存(M) build | - | - | 114.6 |
| 帧率(fps) | - | - | - |
100条贝塞尔曲线动画的滚动页面
- 从2.17可以看出 build后的性能比dev大幅上升
| 用例2 (ScrollAnimation) | Hippy3.0 | Hippy2.17 |
|---|---|---|
| 页面渲染时间(首次, ms) | 1375.98 | 1953.77 |
| 滚动-CPU峰值(%) dev同构web | 36 | 41 |
| 滚动-CPU峰值(%) build | - | 32 |
| 静置-内存(M) dev同构web | 178 | 161.3 |
| 静置-内存(M) build | - | 116.2 |
| 帧率(fps) | - | - |
133.45
2.17 版本截图
静态页面用例
贝塞尔曲线动画用例
docker安装踩坑
- 历史版本docker下载： gist.github.com/kupietools/…
- 不强制需要用wsl2引擎
- 按文档一步步走都没问题，但凡需要用powshell的地方都得用❗管理员权限开启
- 起后台命令👇
docker run -td --restart=always -v /f/base/:/home/www/src/ktvme -v /f/ktvme-docker/nginx_conf/ktvme/:/etc/nginx/conf.d -v /f/ktvme-docker/log/:/home/www/log -p 801:80 --name ktvme 192.168.80.64/ktvme/phpenv
关于换引擎
更换Hermes引擎
小目标
- 换引擎
- weex/hippy3差异列出
- 先往脚本方向思考批量修改差异部分
- 改不了的列文档
