前言
經過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開發，相信就不會陌生，但是有許多開發人員這一塊比較薄弱，可能是因為長期做后端開發的緣故。如果基礎實在太差，建議先臨時抱佛腳充充電，學個入門還是很簡單的，敲幾天代碼就可以了。
感覺一樣學一天，三天就夠了。
至於vue.js的話，去官網過一篇文檔，官網：https://cn.vuejs.org/v2/guide/，然后就可以用起來了，一天足矣。
mui，官網：http://dev.dcloud.net.cn/mui/ui/，建議初略過一遍，相信你看完依舊有點雲里霧里，沒關系，先了解就行了，同樣用一天時間。
h5+的話，網上查資料了解一下它是做什么的，還有它的一些常用接口，半天。HTML5+ API文檔：http://www.html5plus.org/doc/zh_cn/android.html
現在基礎知識就准備得差不多了，就開始搞起來。
開發工具
由於是采用的mui框架，那么自然而然就是用其官網提供的開發工具HBuilder。官網下載地址：http://www.dcloud.io/
下載下來之后直接安裝就行了，沒什么好說的，需要注意的是，HBuilder專為MUI框架提供了太多的快捷鍵，請熟記，對提升編碼效率非常有幫助。在第一次打開HBuilder會有一個使用的幫助文檔，對照那上面去敲一遍，半天就應該熟練了。
你也可以直接查看MUI官網提供的代碼塊手冊：http://dev.dcloud.net.cn/mui/snippet/
對着多敲幾遍，你會很驚喜的。不過即便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文件，會出現問題。
你准備好了嗎？開始一起來和我吐槽那些坑吧！
相關學習資料，可以參考我之前發的文章：MUI開發大全
從下一篇開始，我們開始一步一步來做app開發。
項目截圖：
