【开发工具】Reveal 查看任意 App UI 结构

QQ20170217-0

作为前端开发,在工作过程中打交道最多的就是UI界面了。看似简单的界面,其实是最重要的用户体验组成部分,而这也是最能体现作为一个前端程序员的功力所在了。

有时候,接到一个任务,在开发过程中,没有头绪,不知道如何实现这个功能,但是,想到了其他App上的类似功能,想要拿来借用,又不知道如何实现,这时,就可以利用Reveal来查看其他App上的UI布局等信息,为自己的开发提供思路。

提前准备材料:

1、一台越狱的iPhone、iPad。

2、一台Mac。

3、局域网。

4、下载安装 Reveal 的Mac版本。

步骤:

1、越狱:

可以利用 盘古、太极等越狱工具进行一键式越狱。

2、在越狱设备上安装工具:

越狱后的机器,都会被装上名为 Cydia 的App,功能类似于 App Store。

软件:

OpenSSH:

用来传输 Reveal 的库文件到越狱设备上。

IMG_0664

Cydia Substrate:

用来动态替换内存中的代码、数据等内容的库文件,也是 Cydia 作者维护的。

IMG_0663

3、让越狱设备和 Mac 在同一个Wifi局域网下:

4、准备好 libReveal.plist 文件:

这个文件是用来标记哪些 App 需要被查看。首先就需要你知道需要获取需要查看的App对应BundleID:

过程是:首先是把需要查看的App通过iTunes保存到本地,然后解压打开本地的 ipa 文件,找到 info.plist 文件,其中的 “Bundle identifier” 项对应的就是 App 的 Bundle ID。

下面列出了几个常见App对应的Bundle ID:

微博:com.sina.weibo

微信:com.tencent.xin

QQ:com.tencent.mqq

接下来,按照如下格式新建一个plist文件,并添加BundleID:

re_plist
5、将 Reveal 库文件拷贝到设备中:

通过 OpenSHH 将 Reveal.framework 和  libReveal.dylib 上传到越狱设备的 /Library/MobileSubstrate/DynamicLibraries 目录下。

上传Reveal.framework:

scp -r /Applications/Reveal.app/Contents/SharedSupport/iOS-Libraries/Reveal.framework root@{192.168.1.241}:/System/Library/Frameworks

其中的 {192.168.1.241} 需要改成越狱设备的 IP 地址。

传输过程中输入的密码为: alpine

9C26AA0E-22B5-4BD6-B4A4-5AC94651840E

上传 libReveal.dylib:

scp -r/Applications/Reveal.app/Contents/SharedSupport/iOS-Libraries/libReveal.dylib root@{192.168.1.241}:/Library/MobileSubstrate/DynamicLibraries

上传 libReveal.plist 文件:

scp -r {libReveal.plist} root@{192.168.1.241}:/Library/MobileSubstrate/DynamicLibraries

将 {libReveal.plist} 改为你的 plist 文件存放的地址。

6、连接越狱机查看UI细节:

打开 Reveal 软件,重启越狱机器( 如果连接不上,就重启 Mac试试)。
以下是微博、微信的界面:
re_微博
re_微信