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

前言

通過2個多月的艱苦奮鬥，app的第一個版本已經快完工了，期間遇到了太多的坑，做爲一個喜歡分享的人，我固然不會吝嗇分享這爬坑歷程。不要問我有多坑，我會告訴你很坑，很坑.....

過去一直從事.net web開發工做，直到幾個月前，公司須要開發一個h5+，因而我這樣的全能型選手天然而然就被派去搞web app開發，在開發中遇到了太多的問題，一路過來也解決了太多的問題。

技術選型

html五、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混合應用以前，你必需要有一點前端的基礎。

css三、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開發。

項目截圖：