又是熟悉的背景介绍，最近在参加腾讯青科实训营大前端营，结课要求是做一个原生或者跨端的应用，作为一个前端社畜预备役肯定是选跨端啊，但是之前从未做过的web前端以外的开发，所以记录一下环境配置时小白可能遇到的问题供来者参考，也方便以后复盘。

技术栈选型

这里我对几种跨端方案做了一个简单的调研，跨端方案很多，各有特点，总结如下：

框架	React Native	Weex	Flutter
所属公司	Facebook	Alibaba	Google
编程语言	JS	JS	Dart
引擎	JSCore	V8	Flutter engine
支持系统	Andriod、iOS	Andriod、iOS、Web	Andriod、iOS、Fuchsia
性能	一般	较快	较快
适用场景	整体App	单页面	整体App
学习成本	难	易	一般

由于本人现在很穷，所以只能利用手头的设备开发调试，真希望我能get一个签字费，然后去买个开发机（丐版的也行啊）。为什么这么强调这个呢，因为我的笔记本是3年前购入的一台dell xps13，搭载操作系统win11，手机是pdd百亿补贴购入的iphone15。 网上的意思大概就是说如果用windows开发的话不可以本地编译ipa

但是穷有穷的活法，废话少说，介绍一下本人的调试环境：

• windows11
• iPhone15 iOS 18.5

环境准备

Node环境

首先node和npm就不说了，我这边用nvm管理node版本的，感兴趣可以去搞一个，切换版本蛮方便的：nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions。

用下面命令看一下版本：

node -v
npm -v

小女子这边的版本是这俩：

18.20.8
10.2.4

有些情况下会出现node版本不对导致的兼容性问题不过似乎目前node18的表现还可以，先用着，有问题再说，反正只是个demo.

Expo

这个CLI是一个用来在手机上方便地debug的一个脚手架。

安装：

npm install --global expo-cli

手机上也要装一个Expo Go(App Store里就有).

然后就可以愉快地创建项目惹！

npx create-expo-app calendar-app
cd calendar-app

里面少了什么包会自动提示安装，只需要check就行，完成后这样：

然后进入目录，启动开发环境：

npx expo start

怎么在手机上看效果

然后你就会看到这样，你就可以用你的pdd iPhone扫码了，但是你需要确保模式是Expo Go而不是什么其他的模式。

还要注意你的手机和电脑应当处于同一局域网下，因为Expo Go有多种连接模式：

模式	名称	要求	原理	优点	缺点
LAN（默认模式）	本地局域网连接	手机和PC必须在同一个 WiFi 下，且彼此可互相访问	Expo Go 直接请求 http://电脑IP:8081 下载 JS	速度快开发顺畅	很多情况下 WiFi 会隔离设备导致失败
Tunnel（推荐）	通过 Expo 服务器中转	不需要同网	你的手机不直接连电脑，而是通过 Expo 服务器转发请求	最不会出问题	速度稍慢
Local（完全本地）	只允许 localhost	手机无法访问	只有电脑模拟器可用	几乎没有延迟	只能本机模拟器调试

如果你扫码之后无反应大概率是因为网络不对，反正我换成Tunnel就可以了：

npx expo start --tunnel

然后这样扫码的话也不需要在同局域网了，因为走中转服务器。

然后顺利的话就是你可以在你的手机上看到这一幕：

然后可以简单尝试一下热更新，速度还是挺快的，最直观的就是改一下文字，然后保存。我暂时还没找到什么特别好的可以用来衡量热更新完成的标志，只能躁候。

怎么debug

这是一个比较头疼的问题，你可以轻轻晃动你的手机，然后点Open JS Debugger，发现没有用。

那么你该如何查看控制台内容，以及使用Web DevTools去做调试呢？

答案是点这里：

然后打开控制台：

大部分的调试可以在这里完成，那如果我就想调试手机怎么办呢？ 只需打开启动项目的终端，log会被记录在此处，但是移动端更细的细节如触摸等，等我遇到了我再来补充调试细节。

到这里基本的配置和调试都已经完成了，遇到的问题也都一一记录。