Web03-UI

界面开发调研

以前用Qt开发界面，主要问题是不能很好适配不同屏幕缩放比例。
Qt解决缩放问题：
https://www.zhihu.com/question/451021591/answer/1896642195

微信有一个WebUI库

Electron

• 示例
  • vs code
  • draw.io
  • Xmind
• 优势
• 不足
  • 对硬件有要求。无法做嵌入式应用。
  • 精度问题。通过通信协议调用Api而不是直接调用。(https://www.zhihu.com/question/509656170/answer/2874462255)
  • 性能问题。
  • 有人说，这是将软件开发成本转移到硬件

WPF

C#

Qt

• 示例
  • telegram
  • WPS
• 优势
  • 自绘引擎，保证跨平台

Web UI集锦

• 打字机效果

  • 示例 https://www.aomanhao.top/LoveHeart/
  • 库介绍 https://blog.csdn.net/weixin_59480481/article/details/129205107

• 插入bilibili视频

  • 教程 https://zhuanlan.zhihu.com/p/149536086
  • 直接用代码调整高度 https://blog.csdn.net/weixin_40539125/article/details/89682652

• 图片悬浮放大效果

  • item-thumb lazy https://www.phenxso.com/archives/87.html

• 基于配置文件/模板文件的修改

  • 步骤
    • 在网页中F12，检查需要修改的元素，获取其class和id
    • 在themes/hexo-thema-material/layout/_partial/中找到ejs模板文件
    • 在themes/hexo-thema-material/source/css/style.css中找到.sidebar-overlay
  • 教程 https://mmddyhc.github.io/2020/10/05/ji-yu-hexo-de-matery-zhu-ti-bo-ke-zeng-jia-shi-pin-bo-fang-qi/

• 加入Live2D详见Web04