本項目主要是爲了熟悉快應用而練手的項目，該項目數據基於豆瓣api V2，簡單的實現了電影、圖書、音樂的預覽功能。雖說快應用基於類似前端的html、css、js語法來編寫代碼的，但是使用時並沒有那麼好用，很多東西都沒有得到支持。
前言
按照官方文檔所說的，建議使用node v6.11.3版本，不要使用node 8.0以上版本，而我本地的node版本正是8.0以上的。所以就使用了nvm來管理node的版本，使用nvm切換node版本非常方便，關於nvm詳情請自行google。我的代碼就是在node 6.11.3上運行的，所以建議運行我代碼也在node 6.11.3上。
簡介
說到快應用，一般會拿來跟小程序做對比，就目前的api功能，debug能力，css屬性支持等與小程序相比還是有一點距離。不過快應用是直接調用的系統api，所以流暢度還是蠻不錯的。不管怎麼說，畢竟快應用剛剛推出，希望它變得越來越好。
關於項目的搭建、運行、熱加載、devtool調試，官方文檔寫的非常詳細，而且也有很多人也寫了入門demo和教程，我看了一下，大部分就是copy的官方文檔。所以這裏不做過多描述，多看官方文檔吧。
通過這個項目，熟悉了一下快應用的基礎組件使用，列表渲染，tab切換，api接口調用，頁面傳參，自定義組件的構建等。在使用中也遇到一些坑，再次記錄下，我也是新手上路，也只用到部分功能，文章難免有不對的地方，歡迎大家指正。
說一下實現的功能：
本項目主要實現了電影、圖書、音樂三個模塊。每個模塊都有三個類別，通過tab切換來查看不同類別。（比如圖書有小說、歷史、傳記三個類別。）三個模塊的ui展示都一樣。主要使用了list實現了列表滾動，tab切換、refresh下拉刷新，數據懶加載等功能。每個模塊都有一個詳情頁展示詳情信息。首頁有個測菜單欄，默認收起狀態，通過點擊菜單彈出菜單跳轉到不同菜單頁。菜單頁主要有主頁，主題頁和關於頁面，整個項目很簡單。
下面就幾個我認爲重要的點說一下：
1、封裝fetch數據請求
每個新的環境下我第一個封裝的一般是網絡請求。翻看了一下文檔，支持async、await，果斷引入，遠離令人頭疼的callback hell。文檔說的很清楚，使用async，要引入babel-runtime/regenerator。所以在app.ux中首先引入。fetch通過async改造，同時結合豆瓣api V2對返回數據過濾後返回出來。並且封裝了常用的get、post請求，並把封裝的network對象暴露在全局，在所有文件中可以直接使用不用引入，詳情請看代碼。
2、封裝自定義組件
我封裝了一個評分組件和一個封面展示組件，和一個頭部組件。這三個組件是純渲染組件，沒有什麼邏輯的。同時做了一個列表組件，因爲三個模塊都是採用相同列表，列表組件通過傳遞的不同url來調用不同接口渲染列表。列表組件主要參考的官方文檔，使用了數據懶加載，文檔上寫的很詳細。同時也使用了tabs組件，refresh組件來實現橫向滾動和下拉刷新。本來是準備進一步封裝一個容器組件來完成這些功能的，但是看到自定義組件裏slot只支持一個，不像vue那樣可以命名slot。所以就放棄了做容器組件。
3、實現了一個抽屜效果的側邊欄菜單。
剛開始項目時就打算要實現一個模塊來放個人信息，換膚的功能，本來打算模仿微信的，放在底部菜單，多一項叫做我的。由於我是網易雲控，就打算模仿一下網易雲，做個測邊欄菜單，並且還有抽屜的滑入滑出效果，想看一下快應用上怎麼實現動畫。按照前端習慣，一上手就transition屬性搞起，發現不支持，於是立馬查看文檔，只支持animation，並且屬性要分開寫。animation實現動畫沒有transition這麼方便，打開和關閉要分別用不同的動畫來實現，通過js修改class屬性來實現不同的animation。但是有個蒙版，要在抽屜打開動畫開始時打開，抽屜關閉動畫結束後關閉。所以通過一個變量綁定style屬性。在動畫開始時立馬顯示。動畫結束沒法監聽，只能通過定時器來實現。
4、換膚功能。
實現了一個簡單的換膚功能，通過全局儲存一個變量，通過改變變量來實現換膚功能。改變數據後，進入新頁面，頁面讀取全局數據，加載頁面就能正常切換皮膚，可是如果改變頁面後當前頁面的皮膚怎麼變化呢？看到文檔裏有個$watch函數，可以監聽屬性變化，於是在需要實時切換膚色的頁面定義一個變量，讀取全局變量賦值給當前變量。再用$watch來監聽該變量變化來實現實時換膚。但是當改變全局變量時，當前頁面變量怎麼會實時改變呢？對於一個原始類型的數據，當然不可能達到監聽效果，這時只能通過對象來實現這一功能了。因爲對象賦值會引用同一地址。所以可以實時監聽數據變化。
需要注意的問題及坑：
1、調試相關
1、雖說快應用可以用谷歌的devtool的debug功能，但是其與谷歌debug差太多了。首先沒有network模塊，網絡請求信息都看不到。其次在代碼中的console.log輸出的對象類型數據都會調用Object.prototype.toString方法轉換成字符串。爲此很頭疼，每次獲取的數據要調用JSON.stringify轉換爲json字符串輸出，再將json轉換成對象查看，很雞肋的功能，有時一調用接口遠程調試就閃退。
2、雖說是熱更新，但是有時還是要手動重新啓動項目才能達到預期效果，比如：添加了新文件。在manifest.json中修改不會熱更新，要切換到其他頁面保存。有時manifest.json中修改保存後也達不到預期效果，也要重啓項目，比如頭部欄樣式。
2、基礎組件相關
1、與小程序一樣，快應用裏的基本組件都是封裝好的，只能用文檔裏提到的基本組件，而不是普通的html標籤都能使用。每個組件的盒模型都是採用的box-sizing: border-box並且不準修改。這一點符合我們習慣，平時移動端項目也都是採用這種盒模型。
2、還有默認容器組件，比如我們用的比較多的div組件，其默認排列方式類似css中的行內塊元素一樣，而不同於html中div的塊級元素。默認橫向排列，要想縱向排列只能設置外層容器flex-direction爲column。
3、對於自定義組件，在組件內最外層元素設置了class屬性，在引入組件時，在組件上也使用class時，組件裏的class屬性會被覆蓋，並不會疊加。
3、css相關
必須吐槽的是css的樣式支持。太多的樣式屬性在裏面都不支持，寫起來一點也不爽。關於支持哪些css，可以看官方文檔，寫的很清楚。對於不支持的css在編譯時會報紅提示你不支持。
1、比如我在寫樣式寫的正(｡･∀･)ﾉﾞ嗨時，突然發現沒有達到預期效果，看了一下編譯報錯，不支持position: relative, absolute等屬性，瞬間頭疼，這不是很常用的樣式，不支持？那快應用怎麼實現這樣效果了？翻看了一下文檔，發現了一個容器組件stack組件，放在裏面的子元素從上到下層級越來越高。這隻實現了層級，怎麼定位呢？當然是配合另外一個樣式屬性：translate同個這個屬性可以上下左右移動來實現定位。上帝給你關上一扇門時，也會給你開另一扇窗，多看文檔，騷年?。
2、而且position支持fixed定位但是不支持z-index來調節層級，只能通過組件先後順序來定層級。
3、普通容器不支持橫向滾動，沒有overflow的屬性，只能通過tabs來hack。
4、動畫不支持transition，只能通過animation來實現。
4、對於js部分
1、自定義組件引入後在上面加事件能正常監聽，但是給監聽函數傳遞參數，監聽函數不能獲取到。
2、基礎組件的通用事件不知是否存在類似event這樣的對象，只知道存在一個對象，但是打印爲object類型，調用JSON.stringify函數會報錯。
3、props不支持默認值，如果要默認值只能通過$watch來監聽prop值的改變來自定義一個data屬性。
4、綁定的通用事件會冒泡，但是沒有提供阻止冒泡的方法，但是隻會冒泡到最近一層包含監聽該事件的元素上而不會繼續向上冒泡。故可以通過綁定一個空函數來阻止事件冒泡。
5、在頁面組件中可以通過this.$app和this.$app.$def這兩個對象調用掛載到app.ux裏的屬性。但是注意：
app.ux中掛載的所有屬性在this.$app.$def中都能獲取到。但是隻有方法屬性會掛載到this.$app上。
6、refresh組件在使用時可以通過refreshing來切換當前狀態，但是手動觸發refresh事件時，refreshing並不會變爲true，刷新結束後將其設置false並不能結束刷新狀態。所以要同步設置refresh的狀態，在refresh事件中將refreshing手動設置爲true，待刷新結束後再將其設置爲false，纔會結束刷新狀態。
7、引入組件中的資源引入路徑是基於當前引入的組件。比如在組件中有個靜態圖片資源，我在組件裏寫死路徑，當其他頁面組件引用該組件時，會報找不到該資源的錯誤。必須將組件裏的資源路徑改爲當前頁面相對圖片的路徑，這顯然有問題。不同頁面引入資源路徑當然有可能不同，只能通過props傳遞進去。
項目展示
前方多圖預警。。。
關於項目的任何問題，歡迎一起討論！！！
放出項目地址：
項目地址：https://github.com/keenjaan/quick-app-douban
歡迎star #^_^#