經過2個多月的艱苦奮鬥，app的第一個版本已經快完工了，期間遇到了太多的坑，作為一個喜歡分享的人，我當然不會吝啬分享這爬坑曆程。不要問我有多坑，我會告訴你很多，很多.....
過去一直從事.net web開發工作，直到幾個月前，公司需要開發一個h5+，于是我這樣的全能型選手自然而然就被派去搞web app開發，在開發中遇到了太多的問題，一路過來也解決了太多的問題。
html5、html5+、vue.js、mui、js
為什麼沒有jquery？因為，根本用不着，我們知道jquery它是對js的再次封裝，而其為了相容各個版本的浏覽器，寫了許多許多代碼，而對我們app而言，基本上都是Webkit核心，根本不需要考慮浏覽器之間的相容性問題，是以請忘掉jquery。
為什麼有vue.js？vue.js是一款mvvm架構，也是目前三大流行的mvvm前端架構之一（另外兩種：react和angular），在做技術選型之前，我有先對這三種架構去做一個簡單的研究，後面感覺還是vue.js的文法比較優雅，就像我喜歡C#語言一樣。
為什麼用MUI？因為感覺MUI上手簡單，因為項目工期緊，人又少（app加上我2個人）。在使用MUI之前有研究過ionic。
在開發H5混合應用之前，你必須要有一點前端的基礎。
css3、html、js、vue.js、h5+、mui
html、js、css相信隻要做過web開發，相信就不會陌生，但是有許多開發人員這一塊比較薄弱，可能是因為長期做後端開發的緣故。如果基礎實在太差，建議先臨時抱佛腳充充電，學個入門還是很簡單的，敲幾天代碼就可以了。
感覺一樣學一天，三天就夠了。
現在基礎知識就準備得差不多了，就開始搞起來。
由于是采用的mui架構，那麼自然而然就是用其官網提供的開發工具HBuilder。官網下載下傳位址：http://www.dcloud.io/
下載下傳下來之後直接安裝就行了，沒什麼好說的，需要注意的是，HBuilder專為MUI架構提供了太多的快捷鍵，請熟記，對提升編碼效率非常有幫助。在第一次打開HBuilder會有一個使用的幫助文檔，對照那上面去敲一遍，半天就應該熟練了。
對着多敲幾遍，你會很驚喜的。不過即便HBuilder如此牛叉的快捷鍵和提示，但是它依舊存在一個硬傷，那就是代碼格式化功能，用過VS的人，對其它IDE總是會有各種吐槽點，是以我通常都是用HBuilder寫代碼，用VS查錯和格式化代碼。
建立官網的Demo項目
打開HBuilder，建立”移動App“
代碼目錄結構如下：
這就是官網提供的Demo的源碼，可以看下這些示例。但是既然叫做示例，就表示，這裡面很多東西無法直接在正式項目上那樣用，否則就是作死，而我所謂的各種坑也正是因為生産和示例終究是不一樣的。尤其是配合vue.js一起用的時候，坑更多了。
MUI有坑，H5+有坑，Vue有坑，而他們彙聚一起的時候，就是各種坑.....
HBuilder目前已經在頻繁更新、頻繁打更新檔，一旦有更新，我們在打開HBuilder的時候，它就會自動提示，然而更新有風險，更新需謹慎，更新之前先看下更新的日志，看它修複了什麼？新增了什麼，然後再觀望一周，再更新，這樣比較保險。
而且需要注意的是，如果我們已經建立了app項目，更新了HBuilder之後，我們項目中的mui.js和mui.css等這些檔案是不會自動更新的，我們需要用最新版本的HBuilder建立一個demo，然後從哪個demo中把這些檔案拷貝到項目中去。否則，你隻更新HBuilder，而不去更新相關的js和css檔案，會出現問題。
你準備好了嗎？開始一起來和我吐槽那些坑吧！
從下一篇開始，我們開始一步一步來做app開發。我用上班時間寫的部落格，老闆，你要給我開工資！！！
項目截圖：
本文轉自鄒瓊俊部落格園部落格，原文連結：http://www.cnblogs.com/jiekzou/p/8119434.html，如需轉載請自行聯系原作者