iOS開發之Weex爬坑之路環境部署和Devtools Debug(一)
前言
不多說,直接開始Weex,算是記錄這段時間對新技術的學習積累。期間看了很多Vue.js和Node.js的基礎,順便捋了以下CSS的flex-box佈局等等前端的知識,太多了太雜了,還是用筆記記錄下。直接從官方介紹,開始
補充一個傳送門:和文章沒什麼關係
介紹
啟動環境,搭建第一個Demo,按照官方的來
同為跨平臺解決方案,咱們先看下和RN的對比,由於國內淘寶搞的輕量級,所以我們還是先爬爬Weex坑
型別 | React Native | Weex |
---|---|---|
效能 | 較好 | 較弱 |
上手難度 | 稍高 | 容易 |
核心理念 | React | Vue |
框架程度 | 較重 | 較輕 |
特點 | 適合開發整體App | 適合單頁面 |
社群 | 豐富,Facebook維護 | 殘念,託管apache |
支援 | Android、IOS | Android、IOS、Web |
適應性 | 原生開學習成本低 | Web開發學習成本低 |
JS引擎 | V8 | JSCore |
再看下JS和HTML和CSS的基礎,就可以搞一下簡單的了
安裝開發環境
1.安裝Node
可以用HomeBrew或者直接下載https://nodejs.org/en/download/ 很簡單,安裝好如下即可
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的文章很少,這也算是自己遇到的問題自己總結記錄下,免得以後找都找不到
純Weex開發框架介紹(二)