升级打怪

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

本文以 macOS + 命令行工具 为核心，循序渐进地介绍如何从零开始搭建 Android 模拟器环境，并最终创建、启动一个可用于日常开发与测试的 Android Virtual Device（AVD）。

整体流程遵循以下逻辑顺序：

  1. 认识 Android 命令行工具链；
  2. 准备运行环境（Java JDK 与 SDK 工具）；
  3. 使用 sdkmanager 管理 SDK 与系统镜像；
  4. 使用 avdmanager 创建模拟器；
  5. 使用 emulator 启动并优化模拟器；
  6. 使用 adb 进行安装与调试。

一、核心命令行工具概览

在命令行环境下配置与管理 Android 模拟器，主要依赖以下工具：

  • sdkmanager
    用于查看、安装、更新和卸载 Android SDK 相关组件；

  • avdmanager
    用于从命令行创建、删除和管理 Android 虚拟设备（AVD）；

  • emulator
    用于启动与运行 Android 模拟器实例；

  • adb（Android Debug Bridge）
    用于与模拟器或真机通信，例如安装 APK、查看日志、调试应用。

二、先决条件

在开始之前，请确保系统满足以下条件：

  • 已安装 Java JDK
  • 已安装 Android SDK 命令行工具

下面将按顺序完成这些准备工作。

三、Java JDK 安装与版本管理

Android 构建工具在不同版本中，对 Java 的依赖并不完全一致。因此，同时安装多个 JDK 并进行版本管理 是一种更稳妥的做法。

3.1 使用 Homebrew 安装多个 JDK

# 安装常用的 LTS 版本 JDK
brew install --cask temurin8 temurin11 temurin17 temurin21

说明：

  • Java 8 / 11：常见于旧项目或部分构建工具
  • Java 17：当前 Android 官方推荐
  • Java 21：面向未来版本预留

3.2 使用 jEnv 管理 Java 版本

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

# 将 jEnv 注入到 Shell 环境（zsh）
echo 'export PATH="$HOME/.jenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(jenv init -)"' >> ~/.zshrc

# 立即生效
source ~/.zshrc

3.3 将已安装的 JDK 添加到 jEnv

# 添加本机已安装的 JDK 到 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
2025-12-19_15-42_1 
# 查看与切换版本
jenv versions          # 查看所有已管理的 Java 版本
jenv global 17         # 设置全局默认版本
jenv local 11          # 为当前目录设置版本
jenv shell 1.8         # 仅对当前 Shell 会话生效
2025-12-19_15-42

建议：
日常开发可使用 Java 17，仅在构建旧项目时临时切换。

四、安装 Android SDK 命令行工具

Android 官方将命令行工具独立发布，适合不依赖 Android Studio 的开发者。

# 安装 Android Command Line Tools
brew install --cask android-commandlinetools
2025-12-19_15-41

安装完成后，即可使用 sdkmanager / avdmanager / emulator 等命令。

五、使用 sdkmanager 管理 SDK 与系统镜像

5.1 查看可用组件

# 列出所有可用与已安装的 SDK 组件
sdkmanager --list

5.2 安装系统镜像与基础工具

# 安装 Android 13（API 33）的 Google APIs x86_64 系统镜像
sdkmanager "system-images;android-33;google_apis;x86_64"

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

安装内容包括：

  • platform-tools（包含 adb）
  • emulator（模拟器运行核心）

六、使用 avdmanager 创建与管理模拟器

6.1 常用管理命令

avdmanager list avd            # 查看已创建的 AVD
avdmanager list device         # 查看所有可用设备模板
avdmanager delete avd -n MyAVD # 删除指定 AVD
avdmanager move avd -n MyAVD -p /new/path
2025-12-23_16-06 
# 查找特定设备（例如 Pixel 9）
avdmanager list device | grep -A 10 "pixel_9"
2025-12-23_16-08

6.2 创建模拟器的基本格式

avdmanager create avd \
  -n <AVD_NAME> \
  -k "<SYSTEM_IMAGE>" \
  -d <DEVICE_ID>

参数说明：

  • -n / --name：模拟器名称
  • -k / --package：系统镜像路径
  • -d / --device：设备 ID（如 pixel_4）
  • -c / --sdcard：SD 卡大小
  • -f / --force：覆盖已存在的 AVD

6.3 示例：创建 Pixel 4（Android 13）

avdmanager create avd \
  -n Pixel_4_API_33 \
  -k "system-images;android-33;google_apis;x86_64" \
  -d pixel_4 \
  -c 1024M

七、使用 emulator 启动与优化模拟器

7.1 基础命令

emulator -version        # 查看 emulator 版本
emulator -list-avds      # 列出所有可用 AVD
emulator -avd Pixel_4_API_33

7.2 常用启动参数（性能与体验）

  • -scale 0.8：缩放窗口大小
  • -noaudio：关闭音频（节省资源）
  • -dpi-device 320：模拟真实屏幕密度
  • -no-skin：无皮肤模式，提升启动速度
  • -memory 2048：限制模拟器内存
  • -netdelay / -netspeed：模拟弱网环境

7.3 推荐组合（性能与功能平衡）

emulator -avd Pixel_5 \
  -memory 2048 \
  -scale 0.8 \
  -noaudio \
  -dpi-device 320 \
  -netdelay 100 \
  -shell

提示：
在资源有限的设备上，关闭音频与皮肤能明显提升启动速度。

八、使用 adb 安装与调试 APK

# 查看已连接设备（模拟器 / 真机）
adb devices

# 向指定模拟器安装 APK
adb -s emulator-5554 install app.apk

常用参数：

  • -r：覆盖安装并保留数据
  • -t：允许测试 APK
  • -d：允许降级安装

九、完整示例流程

9.1 默认 Pixel 模拟器（系统原生 UI）

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

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

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

9.2 Pixel 9 Pro（Android 16 · Baklava）

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-05

注意：
Pixel 9 Pro 的 skin 文件需要单独下载，或从 Android Studio 的设备目录中拷贝。

十、参考资料

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