app内H5本地开发环境文档

228 阅读4分钟

一、本地https 80端口代理

公司电脑默认不让启动80端口可以进行反向代理,目前有两种方式:防火墙配置文件、whistle

1、防火墙配置文件代理80

打开终端:cd /etc

执行命令:sudo vi pf.conf

image.png

在 rdr-anchor "com.apple/*" 行下加入转发命令:rdr on lo0 inet proto tcp from any to 127.0.0.1 port 443 -> 127.0.0.1 port 8080(当前启动https端口)

修改完输入: :wq 保存退出

执行命令:

sudo pfctl -f /etc/pf.conf //加载防火墙配置文件

sudo pfctl -e //启动pf

不需要的时候可以关闭pf: sudo pfctl -d

2、whistle配置代理80

whistle文档:wproxy.org/whistle/ins… ,具体可以参考文档来

1)安装whistle:

 **sudo npm install -g whistle**

2)启动whistle:

 **w2 start**

image.png 3)配置https代理:

网络偏好设置-高级-代理

image.png

配置完成之后点击应用就可以了。

image.png

4)安装证书-电脑:

image.png

启动whistle,通过启动的地址打开:http://127.0.0.1:8899/

image.png

点击HTTPS

image.png

选中 Capture TUNNEL CONNECTs

然后点击 Download RootCA,下载证书

双击证书进行安装,选择系统

image.png

然后打开钥匙串,搜索whistle

image.png

双击证书,点开信任,设置使用此证书时,选择始终信任,然后关闭输入电脑密码即可。

image.png

5)whistle配置host:

打开whistle启动链接:http://127.0.0.1:8899/

image.png

然后新增配置文件,输入域名及端口代理链接,点击Save保存即可。

二、IOS(模拟器)-h5本地开发环境

1、安装ios 模拟器

1)安装xcode及启动模拟器:

需要先安装xcode软件,Self Service里点击安装即可

打开xcode

image.png

创建一个新的项目:点击 Create a new Xcode project

image.png

选择App,点击Next

image.png

信息填完next,然后选择个目录create

image.png

项目创建完,点击左上角启动模拟器

2)模拟器机型及系统版本选择:

扩充系统:

image.png

右键程序坞:Simulator ,可以选择系统版本及机型

扩充系统版本:部分问题只能在指定系统和机型验证所以需要扩充模拟器系统类型跟机型

image.png

打开xcode应用,左上点击Preferences ,选择Components 然后选择要扩充的手机版本 下载要扩充的系统

扩充机型:

image.png

单击上方模拟器机型

image.png

选择添加机型

image.png

切换到Simulators,选择想要添加的机型即可。

3)Safari配置抓包模拟器请求:

image.png

image.png

打开Safari,偏好设置 ,高级-选中在菜单栏中显示“开发”菜单

image.png

在app中打开h5页面,然后在Safari里点开开发,模拟器离可以捕捉到对应链接打开,跟浏览器调试类似

ios真机中抓不到app里的h5页面访问链接

2、模拟器本地开发环境

1)模拟器证书安装:

image.png

在模拟器中打开whistle链接,点击HTTPS,然后点击下载证书跟pc的一样。

image.png

下载完成之后,在设置-通用-描述文件里安装证书

image.png

然后在设置-通用-关于本机-证书信任设置信任证书

2)app中本地开发:

通过app单独入口访问本地h5连接,通过safari抓包进行本地开发

image.png

如果没有单独h5输入链接访问的入口,可以打开一个h5的webview,通过safari抓包打开连接控制台,直接location.href跳到本地连接

三、安卓-h5本地开发环境

1、安装adb

1)安装:

安装adb之前需要申请一下usb读写权限

参考文档:www.jianshu.com/p/744fc5946…

安装命令:brew install --cask android-platform-tools ,其他方式可以通过参考文档查看

安装成功,在终端输入 adb --version 查看版本

2)adb连接模拟器或者真机:

谷歌浏览器输入:chrome://inspect/#devices 可以查看链接的机器,只能在公司使用,vpn不能访问google 会有问题。

2、安装模拟器

3种模拟器:网易MuMu、AndriodStudio自带模拟器、Genymotion

mac M1的可以用:AndriodStudio自带模拟器

非M1的使用Genymotion:

genymotion下载地址:www.genymotion.com/,需要注册个人账号

genymotion x86转arm工具下载地址:github.com/m9rco/Genym…

VirtualBox下载地址:www.virtualbox.org/wiki/Downlo…

网易MuMu:不推荐使用问题太多