前言

不多說，直接開始Weex，算是記錄這段時間對新技術的學習積累。期間看了很多Vue.js和Node.js的基礎，順便捋了以下CSS的flex-box佈局等等前端的知識，太多了太雜了，還是用筆記記錄下。直接從官方介紹，開始

補充一個傳送門：和文章沒什麼關係

介紹

啟動環境，搭建第一個Demo，按照官方的來

同為跨平臺解決方案，咱們先看下和RN的對比，由於國內淘寶搞的輕量級，所以我們還是先爬爬Weex坑

安裝開發環境

1.安裝Node 

mintoudeMacBook-Pro:~ mintou$ node -v
v8.11.1
mintoudeMacBook-Pro:~ mintou$ npm -v
4.6.1
mintoudeMacBook-Pro:~ mintou$ 

2.安裝weex-toolkit

npm install weex-toolkit -g

mintoudeMacBook-Pro:~ mintou$ weex -v
   v1.3.5
 - weexpack : v1.2.3
 - weex-debugger : v1.0.12
 - weex-builder : v0.4.0
 - weex-previewer : v1.5.1

這條命令會向你命令列環境中註冊一個 weex 命令。

3.建立專案

weex create awesome-app

這裡會有很多提示，什麼標題啊，作者啊，描述啊啥的，主要你如果簡單的跑起來，可以都選擇預設值，如果你要做點事，那就吧vue-router給安裝了，後面的單元測試可以暫時不選。

網路好也就幾分鐘的事，然後就可以開發了

4.進入專案，安裝依賴，預覽

cd awesome-app
npm install
npm start

然後工具會啟動一個本地的 web 服務，監聽 8081 埠。你可以開啟 http://localhost:8081檢視頁面在 Web 下的渲染效果。 原始碼在 src/ 目錄中，你可以像一個普通的 Vue.js 專案一樣來開發.

5.執行到iOS專案

weex platform add ios

weex run ios

這兩句幫我們編譯好了jsbundle，然後順便把原生專案的cocoapods都給帶起來了，直接選擇模擬器就跑起來了，如果你是自己編譯好而已，那麼可以自己pod install也行，檔案目錄如下，cd到ios目錄就好

也就一杯茶的時間，專案就能跑起來了，如果看過Vuejs的話入口和檔案目錄改改就知道如何操作了，這裡就不多說這些了，很簡單，下面隆重介紹一下如果debug方式來除錯。為什麼測試這個模組，是因為，網上有幾個專案（本來用的人就少，所以要珍惜幾個專案）都沒配置web端，只是配置了移動端啟動，因此，你啟動web服務是看不到任何東西的，但是你直接跑起來你的App，你壓根看不到你的js和頁面是不是出問題了，哪裡出問題了都不知道？因此，我們試著用一下Debug模式

可以先看下官方介紹weektoolkit基本介紹，後面我會結合我遇到的場景分析

整合Devtools到iOS，通過App的服務來Debug

這裡注意的是不是普通的Vue.js開啟的Web頁面除錯，而是通過Devtools啟動模擬器之後進行和Web關聯的除錯，怎麼說呢？就是如果你沒有配置Web環境，你Weex寫的程式碼無法在Web預覽，就很扯淡，你藉助這個工具，開啟App的同時，連線到對應的Web服務，然後進行js程式碼編寫，儲存之後就能實時同步多端

根據上面的介紹，你的專案基本框架已經跑起來了，你在你的pod檔案下加上，或者直接copy走我這個

source '[email protected]/CocoaPods/Specs.git'
platform :ios, '8.0'
#inhibit_all_warnings!

def common
    pod  'WXDevtool', '0.15.3', :configurations => ['Debug']
	pod 'WeexSDK'
    pod 'WeexPluginLoader'
    pod 'SDWebImage', '3.7.5'
    pod 'SocketRocket', '0.4.2'
end

target 'WeexDemo' do
    common
end

target 'WeexUITestDemo' do
    common
end

安裝好之後，我們用終端到路徑下，執行

weex debug 

你就能看到一個帶二維碼的網頁 

1.方案一（官方Demo可以掃一下即可Debug）

第一個方式是和官方Demo點選開啟連結下載下來一樣，弄一個掃二維碼的頁面，然後你在你的專案中掃描這個二維碼，你的App和網頁上都會出現同步，你可以看到所有的結構和Debug資訊

2.方案二，你不想弄一個頁面，你可以按照我這個思路搞一下也行

第一，你看下官方介紹

[WXDevTool launchDevToolDebugWithUrl:@"ws://30.30.31.7:8088/debugProxy/native"];

其中的 ws 地址正是 Weex debug 控制檯中出現的地址，直接 copy 到 launchDevToolDebugWithUrl 介面中。

我是這麼理解的，反正當時看這個得知道為什麼寫這個？

因此，看了下官方Demo裡面掃一掃的url攔截操作

#pragma mark Remote debug
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
- (BOOL)remoteDebug:(NSURL *)url
{
    if ([url.scheme isEqualToString:@"ws"]) {
        [WXSDKEngine connectDebugServer:url.absoluteString];
        [WXSDKEngine initSDKEnvironment];
        
        return YES;
    }
    
    NSString *query = url.query;
    for (NSString *param in [query componentsSeparatedByString:@"&"]) {
        NSArray *elts = [param componentsSeparatedByString:@"="];
        if([elts count] < 2) continue;
        if ([[elts firstObject] isEqualToString:@"_wx_debug"]) {
            [WXDebugTool setDebug:YES];
            [WXSDKEngine connectDebugServer:[[elts lastObject]  stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
            if ([[[self.navigationController viewControllers] objectAtIndex:0] isKindOfClass:NSClassFromString(@"WXDemoViewController")]) {
                WXDemoViewController * vc = (WXDemoViewController*)[[self.navigationController viewControllers] objectAtIndex:0];
                [vc performSelector:NSSelectorFromString(@"loadRefreshCtl")];
                [self.navigationController popToViewController:vc animated:NO];
            }
            return YES;
        } else if ([[elts firstObject] isEqualToString:@"_wx_devtool"]) {
            NSString *devToolURL = [[elts lastObject]  stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            [WXDevTool launchDevToolDebugWithUrl:devToolURL];
            if ([[[self.navigationController viewControllers] objectAtIndex:0] isKindOfClass:NSClassFromString(@"WXDemoViewController")]) {
                WXDemoViewController * vc = (WXDemoViewController*)[[self.navigationController viewControllers] objectAtIndex:0];
                [self.navigationController popToViewController:vc animated:NO];
            }
            
            return YES;
        }
    }
    
    return NO;
}

可以通過斷點得到，這裡else if裡面的url最後傳進去的樣式，這就不貼出來了，就是下面那張gif頂部的樣式，經過操作，我們只需要拿到最後的channelld拼接到對應的url上

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    
    [WXDevTool setDebug:YES];
    [WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.47:8088/debugProxy/native/d4b322b3-d97e-47f1-935e-b50084fbf4a6"];
    
    [WeexSDKManager setup];
    
    [self.window makeKeyAndVisible];
    
    // Override point for customization after application launch.
    [self startSplashScreen];
    
    return YES;
}

方案二思路總結：

weex debug開啟服務網頁，出現二維碼，我們點選二維碼，可以在url上獲取到channelld，然後在app初始化的方法裡面呼叫連結上服務，注意這裡的最後一串路徑是變化的，每次同步的時候需要看一下是否是服務最新的id。

然後如果你熱更新的話，最好用命令啟動app

weex platform add ios
weex run ios

然後你更改你vue樣式的程式碼，就可以不開啟web服務的情況下進行App debug。

注意：

這上面的左邊檢視是debug視窗的，而不是weex run web跑起來的web服務，我們這裡是針對無法正常配置或者跑web服務的情況下，我們如何通過App的服務來網頁Debug，畢竟有些時候我也不知道為什麼web服務為什麼跑步起來，反正iframe就是顯示不了。

中間的就是我們的App應用，右邊就是程式碼了，我們可以進行實時更新預覽了，環境部署和Debug差不多了，就可以正常寫點東西了

網上針對Weex的文章很少，這也算是自己遇到的問題自己總結記錄下，免得以後找都找不到