iOS逆向之分析微信導航欄實現

最近須要實現微信的毛玻璃導航欄效果，嘗試了各類方式後仍是有點差異，這在追求完美的設計師眼裏是毫不能忍的，因而只好「看看」原做是怎麼實現的。在逆向分析了微信的實現後，發現微信的實現十分特殊，文末會告訴你們答案:)

環境準備

• 一臺越獄設備
• OpenSSH 插件
• Cycript 插件

盤古支持 9.3.3 如下版本的越獄，越獄過程十分快速方便。越獄完成後還要在 Cydia 裏搜索安裝 OpenSSH 和 Cycript 插件。OpenSSH 用以電腦遠程登陸 iPhone，Cycript 用來運行時鉤住應用程序。Cycript 容許開發者動態查看和修改正在運行的應用程序，更多介紹請查看官網。

環境準備完畢後，咱們就能夠開始逆向了。我手裏的是 iOS 9.2.1 版本的越獄設備，如下都是用這個設備進行演示。

越獄有風險，建議使用備用機進行越獄，而且越獄前先備份資料

實際操做

首先打開電腦的命令行工具，執行 ssh 遠程登陸到 iPhone 手機上，默認鏈接密碼是 alpine，建議連上後修改默認密碼，修改命令是 passwd，連上後的界面以下圖所示，

下面咱們能夠用 ps 命令查看微信進程，執行

ps -e|grep WeChat複製代碼

結果以下圖，

這裏咱們可以獲取到微信的沙盒路徑，進入到這個目錄後咱們能看到以下的內容，主要是一些靜態圖片資源，以下圖：

Cycript

前面已經介紹了 Cycript，咱們分析導航欄的實現就是須要藉助這個工具，官網裏有更多詳細說明。

首先在越獄手機上打開微信，而後使用 ps 命令獲取到微信的進程id，而後再輸入

cycript -p xxx複製代碼

當咱們看到命令行界面出現 cy# 就說明咱們已成功 hook 住微信進程，這個過程以下圖所示，

上面這張圖裏的信息很豐富，展現了我是如何一步一步獲取到 ContactsViewController。在最下方我打印出了UINavigationBar的視圖層級關係，咱們能看到控制導航欄樣式的視圖有兩個，一個是view1，一個是view2，其中view2應該是系統自帶的毛玻璃效果。

爲了驗證這個想法，咱們來作一些設置。首先將 view1 的 alpha 設置爲0，結果以下圖，

左邊的是 view1.alpha = 0，右邊的是原來的樣式。咱們能看到導航欄的顏色變淺了，頁面滑動時的毛玻璃穿透效果很明顯。我在本身的 App 裏也實現了同樣的效果，作法是將 barStyle 設置成 UIBarStyleBlack。

打印出微信的導航欄類型屬性，發現也是 UIBarStyleBlack

至此，咱們基本能肯定微信就是在系統提供的黑色風格導航欄上作了一些處理。那究竟是作了什麼處理呢？咱們繼續往下看。

將 view1 的 alpha 還原回去，再將 view2 的 alpha 設置爲 0，會看到下圖的樣式，

再把 view2 的實際顯示的圖層打印出來，發現這是一個漸變圖層

至此，咱們發現微信導航欄的最終顯示效果是由一個漸變圖層加系統提供的黑色毛玻璃組合顯示而成。

根據這些信息，我在 App 裏也用相同的作法嘗試了一下，顯示效果終於基本一致了，真是淚流滿面啊。關鍵代碼以下，

- (UIView *)blurBackView
{
    if (_blurBackView == nil) {
        _blurBackView = [UIView new];
        _blurBackView.frame = CGRectMake(0, -20, SCREEN_WIDTH, 64);
        CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
        gradientLayer.frame = CGRectMake(0, 0, SCREEN_WIDTH, 64);
        gradientLayer.colors = @[(__bridge id)[UIColor colorWithHex:0x040012 alpha:0.76].CGColor,(__bridge id)[UIColor colorWithHex:0x040012 alpha:0.28].CGColor];
        gradientLayer.startPoint = CGPointMake(0, 0);
        gradientLayer.endPoint = CGPointMake(0, 1.0);
        [_blurBackView.layer addSublayer:gradientLayer];
        _blurBackView.userInteractionEnabled = NO;
        _blurBackView.alpha = 0.5;
    }
    return _blurBackView;
}複製代碼

blurBackView 的做用相似上述例子裏的 view1，插入到 UINavigationBar 視圖裏的最下方。

Cycript 還能執行一些其餘操做，例如彈出 Alert 彈框，

結果以下

總結

本文整理了我探究微信導航欄實現的過程，發現微信導航欄的最終顯示效果是由一個漸變圖層加系統提供的黑色毛玻璃組合顯示而成。若是有其餘實現方式也能夠給我留言，學習一下~

逆向的用法確定不止這一種場景，結合 class-dump 還能作更深刻的分析。若是感興趣也能夠本身實際操做體驗一下，enjoy~

轉載請標註出處，有任何疑問均可聯繫我，歡迎探討。

---

最後作個推廣，歡迎關注公衆號 MrPeakTech，我從這裏學到不少，推薦給你們，共同進步~