升级打怪

develop
 
使用命令行配置 Andriod 模拟器

命令行工具

  • sdkmanager 用于查看、安装、更新和卸载 Android SDK 的软件包
  • emulator 模拟器命令；
  • avdmanager 用于从命令行创建和管理 Android 虚拟设备 (AVD)；
  • adb Android 调试桥 (adb) 是一种多功能的工具，您可以用它来管理模拟器实例或 Android 设备的状态。还可以使用它在设备上安装 APK；

先决条件

  • Java JDK
  • Android SDK 命令行工具

Java JDK 配置

# 1. 用 Homebrew 安装不同版本的 Java
brew install --cask temurin8 temurin11 temurin17 temurin21

# 2. 安装 jEnv（版本管理工具）
brew install jenv

# 3. 配置 jEnv（添加到 ~/.zshrc 或 ~/.bash_profile）
echo 'export PATH="$HOME/.jenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(jenv init -)"' >> ~/.zshrc
source ~/.zshrc

# 4. 将所有已安装的 Java 添加到 jEnv
jenv add $(/usr/libexec/java_home -v 1.8)    # Java 8
jenv add $(/usr/libexec/java_home -v 11)     # Java 11
jenv add $(/usr/libexec/java_home -v 17)     # Java 17

# 5. 使用 jEnv 管理版本
jenv versions                    # 查看所有版本
jenv global 17                   # 设置全局默认版本
jenv local 11                    # 在当前目录设置本地版本
jenv shell 1.8                   # 设置当前shell会话版本
2025-12-19_15-42_1 2025-12-19_15-42

Android SDK 命令行工具

brew install --cask android-commandlinetools
2025-12-19_15-41

sdkmanager 管理 Android SDK

sdkmanager --list # 查看可用系统镜像

# 安装指定版本的系统镜像
sdkmanager "system-images;android-33;google_apis;x86_64"

# 安装SDK命令行工具
sdkmanager "platform-tools" "emulator"

此命令会安装：

  • platform-tools（含 adb）
  • emulator 命令行工具

avdmanager 创建模拟器

常见命令

avdmanager list avd # 查看已安装的系统镜像
avdmanager list device # 查看所有可用镜像（包括未安装的）
avdmanager delete avd -n MyAVD # 删除模拟器
avdmanager move avd -n MyAVD -p /new/path # 移动模拟器（更改存储位置）
avdmanager list device | grep -A 10 "pixel_9" # 查找 pixel_9
2025-12-23_16-08 
# 创建模拟器的基本命令格式
avdmanager create avd -n 名称 -k "系统镜像" [选项]

# 示例：创建 Pixel 4 模拟器
avdmanager create avd \
  -n Pixel_4_API_33 \
  -k "system-images;android-33;google_apis;x86_64" \
  -d pixel_4
  • -n或 --name: 模拟器名称
  • -k或 --package: 系统镜像包路径
  • -d或 --device: 设备ID（如 pixel_4, pixel_xl）
  • -c或 --sdcard: SD卡大小（如 512M）
  • -f或 --force: 覆盖已存在的AVD

emulator 启动模拟器

emulator -version # 查看版本
emulator -list-avds # 列出所有模拟器
emulator -avd Pixel_4_API_30 -scale 0.8 # 启动模拟器（带缩放）
  • 缩放窗口：-scale 0.8（缩放到 80% 大小）
  • 禁用音频：-noaudio（节省资源)
  • 自定义DPI： -dpi-device 320(匹配主流手机密度，真实还原屏幕显示效果)
  • 无皮肤模式：-no-skin (节省资源，提升启动速度)
  • 内存分配： -memory
  • 模拟网络延迟： -netdelay (测试弱网场景)
  • 模拟网速限制：-netspeed edge (模拟150kbps低速网络)
  • HTTP代理：-http-proxy http://proxy:port
  • 启用Root Shell：-shell
# 平衡性能与功能的组合
emulator -avd Pixel_5 \
  -memory 2048 \
  -scale 0.8 \
  -noaudio \
  -dpi-device 320 \
  -netdelay 100 \
  -shell

adb 安装调试 apk

adb -s yourt-emulator install your-path/app.apk
adb devices # 检查设备连接
  • -r：覆盖安装并保留数据（适用于更新）。
  • -t：允许安装测试版APK。
  • -d：允许降级安装

完整示例

模拟器默认皮肤，系统默认UI

# 1. 安装系统镜像
sdkmanager "system-images;android-33;google_apis;x86_64"

# 2. 创建模拟器
avdmanager create avd \
  -n MyAVD \
  -k "system-images;android-33;google_apis;x86_64" \
  -d pixel_4 \
  -c 1024M

# 3. 启动模拟器
emulator -avd MyAVD

Pixel 9 Pro 模拟器，Baklava（Android 16） 系统UI

avdmanager create avd \
  -n Pixel_9_Pro_API36 \
  --skin pixel_9_pro \
  -k "system-images;android-36.0-Baklava;google_apis_ps16k;arm64-v8a" \
  -d "pixel_9" \
  -c 2048M \
  -f
2025-12-23_16-06

skin 文件需要单独下载，或者从 Android studio 拷贝。

2025-12-23_16-05

Ref

adb Android avdmanager develop jenv sdkmanager temurin
 
TailwindCSS 高效入门

正确使用姿势：

  1. 无 CSS
  2. 实用优先，多用组合
  3. 提取组件类，减少重复出现的class

搭档利器：

  1. clsx，简单的条件类名组合;
  2. twMerge，需要类名覆盖的场景;
  3. cva，有多个变体的复杂组件

开发体验：

  1. Tailwind CSS IntelliSense - 核心智能感知
  2. Headwind - 保持代码整洁
  3. Tailwind Fold - 提高可读性
  4. Convert CSS to Tailwindcss - CSS 转换 TailwindCSS

Ref

develop TailwindCSS
 
Web & Native develop

跨端开发，一直是个热门的话题。

但经历这么多年的发展后，真正持续发热、社区活跃的技术方案，屈指可数。

发展历程

最开始，PhoneGap / Cordova,

然后，React Native / Weex / Flutter

再来，uni-app / Taro

事实上跨端的方案远非如此，还有 Ionic / Expo / Metro 等等。

对于 React Native / Weex 的兴起，前端开发很兴奋...但很快被打脸，对比 native 的性能太差，很多最求性能的公司，都逐渐放弃，又投向 native 的怀抱。

Google 适时的推出 Dart + Flutter，其性能非常接近 native，又让大家看到了曙光。

随着开发深度的推进，Flutter 也暴露出诸多不足：

  1. 包体积大小
  2. Dart 生态有限
  3. 原生集成复杂度
  4. Web 性能与 SEO
  5. 桌面端成熟度
  6. 内存消耗
    ...

但仍然有公司不断前行，深耕 Flutter 生态建设。

新的转机

技术开发领域，各项一直都是耕耘不辍，Web 领域尤为突出。

由于业务扩张，Web 领域再次迎来了一个变革——小程序，轻应用。

随着小程序的出现，前端开发再次迎来转机，国内催生了 uni-app、Taro 等一众转译框架。

这些转译框架不单可以生成小程序，也可以转化成对比 native 性能的客户端应用。

现在，跨端开发进入到深水区，不仅是UI交互表现，而且追求极至的性能。

对于未来，个人感觉这个方向，转译框架终将替代 native 开发。

Ref

Android develop Flutter iOS uni-app
 
React 开发日常

Warning: Each child in a list should have a unique “key” prop

这是因为在渲染 template 模板时缺少 key。

容易忽视的是，

<></> 是Fragment的缩写形式，遍历使用时要加key，而缩写形式是不可以加key的，所以要这样写：

<React.Fragment key={'your key'}>
  // ...
</React.Fragment>

Ref:

Objects are not valid as a React child (found: object with keys {xxx}). If you meant to render a collection of children, use an array instead

产生以上错误的原因是，在 jsx 语法中错误的渲染了对象数据，在 react 语法设计里，数组和基本数据类型可以直接插入 jsx 渲染，但是不可以直接插入对象进行渲染。

Ref:

develop React
 
Chrome 谷歌浏览器记住密码后，回显时输入框字体很小

最近在开发 Web 端页面时，发现 Chrome 浏览器有一些展示问题，比较困惑，网络上搜索时，发现很多人遇到这个问题，特此记录。

问题表现

Kapture 2025-11-22 at 14.09.25

原因

给表单设置自动填充 autocomplete="on" 后，Chrome 会默认给自动填充的input表单加上 input:-webkit-autofill 私有属性。

解决办法

方法一：对私有属性设置样式(无效)

input:-webkit-autofill::first-line {
	font-size: 20px;
}

方法二：关闭自动填充（有效）

<input type="password" autocomplete="new-password" />

Ref

Chrome develop
 
如何在 M 芯片 MacBook Pro 上安装老版本的 Nodejs？

苹果笔记本 MacBook Pro

  • 芯片：M1
  • 操作系统：macOS 15.1.1

使用 nvm 安装 Nodejs（v14）会报错：

nvm install --lts=fermium

Installing with latest version of LTS line: fermium
Downloading and installing node v14.21.3...
Downloading https://nodejs.org/dist/v14.21.3/node-v14.21.3-darwin-arm64.tar.xz...
curl: (56) The requested URL returned error: 404

download from https://nodejs.org/dist/v14.21.3/node-v14.21.3-darwin-arm64.tar.xz failed
grep: /Users/rich1e/.nvm/.cache/bin/node-v14.21.3-darwin-arm64/node-v14.21.3-darwin-arm64.tar.xz: No such file or directory
Provided file to checksum does not exist.
Binary download failed, trying source.
Detected that you have 10 CPU core(s)
Running with 9 threads to speed up the build
Clang v3.5+ detected! CC or CXX not specified, will use Clang as C/C++ compiler!
Local cache found: ${NVM_DIR}/.cache/src/node-v14.21.3/node-v14.21.3.tar.xz
Checksums match! Using existing downloaded archive ${NVM_DIR}/.cache/src/node-v14.21.3/node-v14.21.3.tar.xz
$>./configure --prefix=/Users/rich1e/.nvm/versions/node/v14.21.3 <
Node.js configure: Found Python 3.14.0...
Please use python3.10 or python3.9 or python3.8 or python3.7 or python3.6 or python3.5 or python2.7.
nvm: install v14.21.3 failed!

报错原因是 python 版本不支持，

Please use python3.10 or python3.9 or python3.8 or python3.7 or python3.6 or python3.5 or python2.7.

通过 pyenv 安装支持的版本，例如：python3.10～3.5

安装 python 完成后，再次执行：

nvm install --lts=fermium

如果仍然报错，那么可以通过 Rosetta 2 试试。

安装 Rosetta ：

softwareupdate --install-rosetta  
                                       
I have read and agree to the terms of the software license agreement. A list of Apple SLAs may be found here: https://www.apple.com/legal/sla/
Type A and press return to agree: A
2025-11-10 14:25:48.307 softwareupdate[47336:2590239] Package Authoring Error: 072-30124: Package reference com.apple.pkg.RosettaUpdateAuto is missing installKBytes attribute
Install of Rosetta 2 finished successfully

安装完成后，重新启动 iTerm。

当前我的命令行工具是 iTerm，也可以使用系统自带的 Termial。

然后，右击菜单->显示简介，勾选“使用 Rosetta 打开”。

iTerm

打开 iTerm，再次执行：

nvm install --lts=fermium

这样应该就成功了～🏅

Ref

develop Macbook Nodejs