H5 混合移動app應用開發開篇

html5、html5+、vue.js、mui、js

為什麼有vue.js？vue.js是一款mvvm框架，也是目前三大流行的mvvm前端框架之一（另外兩種：react和angular），在做技術選型之前，我有先對這三種框架去做乙個簡單的研究，後面感覺還是vue.js的語法比較優雅，就像我喜歡c#語言一樣。

在開發h5混合應用之前，你必須要有一點前端的基礎。

css3、html、js、vue.js、h5+、mui

html、js、css相信只要做過web開發，相信就不會陌生，但是有許多開發人員這一塊比較薄弱，可能是因為長期做後端開發的緣故。如果基礎實在太差，建議先臨時抱佛腳充充電，學個入門還是很簡單的，敲幾天**就可以了。

感覺一樣學一天，三天就夠了。

至於vue.js的話，去官網過一篇文件，官網：然後就可以用起來了，一天足矣。

mui，官網：

，建議初略過一遍，相信你看完依舊有點雲裡霧裡，沒關係，先了解就行了，同樣用一天時間。

h5+的話，網上查資料了解一下它是做什麼的，還有它的一些常用介面，半天。html5+ api文件：

現在基礎知識就準備得差不多了，就開始搞起來。

你也可以直接檢視mui官網提供的**塊手冊：

對著多敲幾遍，你會很驚喜的。不過即便hbuilder如此牛叉的快捷鍵和提示，但是它依舊存在乙個硬傷，那就是**格式化功能，用過vs的人，對其它ide總是會有各種吐槽點，所以我通常都是用hbuilder寫**，用vs查錯和格式化**。

新建官網的demo專案

**目錄結構如下：

這就是官網提供的demo的原始碼，可以看下這些示例。但是既然叫做示例，就表示，這裡面很多東西無法直接在正式專案上那樣用，否則就是作死，而我所謂的各種坑也正是因為生產和示例終究是不一樣的。尤其是配合vue.js一起用的時候，坑更多了。

mui有坑，h5+有坑，vue有坑，而他們匯聚一起的時候，就是各種坑.....

hbuilder目前已經在頻繁更新、頻繁打補丁，一旦有更新，我們在開啟hbuilder的時候，它就會自動提示，然而更新有風險，公升級需謹慎，公升級之前先看下更新的日誌，看它修復了什麼？新增了什麼，然後再觀望一周，再更新，這樣比較保險。

你準備好了嗎？開始一起來和我吐槽那些坑吧！

相關學習資料，可以參考我之前發的文章：mui開發大全

專案截圖：

H5 混合移動app應用開發 開篇