Weex iOS端的自動刷新和調試

最近開始接觸weex。目前weex尚不成熟，官方文檔有些粗糙，初學者不免碰壁。這裏分享兩條個人初學經驗，供參考。

自動刷新

Weex有一個網頁版的預覽工具，提供了修改代碼後自動刷新頁面的功能。然而做爲移動端開發，網頁版工具顯然不夠，咱們須要在模擬器或者真實設備中開發和調試。

原理

監控代碼的變化，並通知hot-reload服務器。iOS代碼中須要監聽來自服務器的通知並從新加載界面。

不難發現，weex腳手架爲咱們建立的工程中，已經包含了相關的實現：

NSString * hotReloadURL = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"WXSocketConnectionURL"];
_hotReloadSocket = [[SRWebSocket alloc] initWithURL:[NSURL URLWithString:hotReloadURL]];
_hotReloadSocket.delegate = self;
[_hotReloadSocket open];

探索

我先用npm start啓動網頁預覽，而後將info.plist中socket服務器的地址改成本身的ip再編譯運行項目。結果是不能自動刷新，socket代理也沒有被觸發。多是地址不對！但是文檔裏沒告訴咱們如何獲取正確的地址。

靈機一動，網頁版可以自動刷新，那麼咱們能夠經過Chrome的開發者工具監聽socket請求。打開開發者工具，選中Network標籤，設置filter爲WS，而後修改js代碼。果真監聽到WS請求：

地址有些奇怪。查看socket代理，發現不是咱們想要的數據格式。好討厭的感受啊~

- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message {
    if ([@"refresh" isEqualToString:message]) {
        [self render];
    }
    @try {
        NSDictionary * messageDic = [WXUtility objectFromJSON:message];
        NSString *method = messageDic[@"method"];
        if ([method hasPrefix:@"WXReload"]) {
            if ([method isEqualToString:@"WXReloadBundle"] && messageDic[@"params"]) {
                self.url = [NSURL URLWithString:messageDic[@"params"]];
            }
            [self render];
        }
       
    } @catch(NSError * error) {}
}

因而便請求度孃的幫助。有前輩的教程中提到，須要用weex命令+入口文件名的方式啓動項目，因而照貓畫虎：weex dist/index.js。
系統報錯並提示了正確的用法，看來教程稍微有些陳舊啦。應該這樣：weex preview dist/index.js。執行命令後自動打開了一個預覽網頁，和以前的頁面有些大同小異。

打開開發者工具：

用這個地址替換項目中的地址，模擬器能夠自動刷新了！

調試

Weex官方文檔告訴咱們能夠經過weex debug命令和Chrome來調試項目，很好很強大。因而我根據文檔的說明集成了WXDevtoolsdk，並添加以下代碼：

[WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://127.0.0.1:8089/debugProxy/native"];

執行weex debug命令，成功後彈出一個網頁：

此時編譯運行項目，發現不能正常調試，模擬器展現了一個大白屏。既然給咱們一個二維碼，說明調試地址必定藏在二維碼中。但我不想所以實現一個二維碼掃描的功能，因此我藉助了微信，而後在瀏覽器打開。原來地址是這樣的：ws://127.0.0.1:8089/debugProxy/native/8e2ea364-e514-45a1-a022-363c793d048a（我用127.0.0.1代替了真實的ip）。

修改代碼後，能夠調試了！不過地址後的字符串8e2ea364-e514-45a1-a022-363c793d048a在重啓調試服務器後會變，有些坑，仍是集成一個掃一掃吧~

感覺

Weex是國人開源的跨平臺框架，前途可量。和ReactNative相比，目前weex在開發調試方面的便利性比較差，並且缺少一篇融會貫通的基礎教程。讓我這個「老司機」也折騰了一番，況且一個跨平臺新手！但願之後可以改進吧。