Weex系列(1) ——Hello World項目

目錄

• Weex系列(序) —— 總要知道原生的一點東東(iOS)
• Weex系列(序) —— 總要知道原生的一點東東(Android)
• Weex系列(1) —— Hello World項目
• Weex系列(2) —— 頁面跳轉和通訊
• Weex系列(3) —— 單頁面仍是多頁面
• [Weex系列(4) —— 老生常談的三端統一]
• [Weex系列(5) —— 封裝原生組件和模塊]
• [Weex系列(6) —— css相關小結]
• [Weex系列(7) —— web組件和webview]
• [Weex系列(8) —— 是時候簡析一下流程原理了]
• [Weex系列(9) —— 踩坑填坑的集錦]
• [Weex系列(10) —— 先這麼多吧想到再寫。。。]

因爲最開始沒有一點點原生開發的經驗，因此我就直接用的腳手架初始化項目。那下面咱們就從最最原始的Hello World項目開始吧，序篇太枯燥，自由發揮時間開始啦。

weex-toolkit

1. 執行以下代碼，最後會獲得如圖的項目結構。
2. 有的同窗會繼續用官網的weex run ios或者android開始運行項目，大多數人應該都運行不起來，我就是這大多數人，我是直接用原生工具運行對應App的，如iOS，直接用xcode打開WeexDemo.xcworkspace這個文件。(這裏還有一個點，以下代碼最後須要pod install下，安裝weex sdk等包)
3. 接下來就能夠愉快的開發代碼了，調試就該登場了，那就下一個點吧。

npm install -g weex-toolkit
weex create helloworld
cd helloworld
weex platform add ios
weex platform add android

cd platforms/ios
pod install

Weex Playground

接上面最後一個點，輸入以下代碼，就會看到瀏覽器自動打開一個網址，而後下載標題上的這個App掃描二維碼就能夠進行調試了

weex debug src/index.vue

bundlejs

1. 第一個命令就是把src目錄下咱們寫的代碼打包到dist目錄下，會對應生成xxx.js和xxx.web.js，xxx.js是原生所要用到的js，xxx.web.js是給web端用的，這就是三端統一的第一步。
2. 後面兩個命令其實就是打包同時把打包後的代碼放到截圖對應的原生目錄下，這兩個命令比較慢，我一般都是用終端的複製文件夾的功能直接複製代碼到對應目錄下。

weex build web
weex build ios
weex build android

bundlejs的路徑問題

仍是把這個單獨拿出來說一下吧，網上有好多版本的一統三端的js路徑等，其實總結起來就是：
iOS：能拿到weex.config.bundleUrl(我這邊是file:///var/containers/Bundle/Application/4D5A8D6F-2824-4603-936B-B77418600858/WeexDemo.app/bundlejs/index.js)能取到上面截圖bundlejs目錄地址，再作相對處理便可。
Android：weex.config.bundleUrl拿到的地址形式不統一，最後就是寫死的file://assets/dist
web：weex run web的時候瀏覽器會自動打開一個地址，能夠研究這個地址再作一下調整。
後續章節能夠把這個方法提供給你們參考。

iOS入口文件等簡析

1. AppDelegate.m執行了初始化weex環境的方法，這個方法裏面還能夠註冊咱們封裝的模塊和組件，weex腳手架初始化的項目還提供了啓動頁的方法，咱們能夠稍做修改換成咱們本身的動畫。
2. WeexSDKManager就是官網上的初始化weex環境的步驟。
3. WXDemoViewController加載了咱們上面提到的打包後的js。

[WXSDKEngine registerModule:@"xxx" withClass:[xxx class]];
[WXSDKEngine registerComponent:@"xxx" withClass:[xxx class]];

Android入口文件等簡析

1. WXApplication進行了初始化。
2. AbsWeexActivity封裝了渲染加載js的方法，在WXPageActivity能夠看到有調用createWeexInstance和renderPageByURL得方法。

Hello World就先講這麼多吧，第一次寫系列文章，終於把開頭三章搞定了，若是你們對個人專欄有一點點興趣，就請點個贊哦，歡迎收藏繼續關注，謝謝。