前言 經過2個多月的艱苦奮鬥,app的第一個版本已經快完工了,期間遇到了太多的坑,作為一個喜歡分享的人,我當然不會吝嗇分享這爬坑歷程。不要問我有多坑,我會告訴你很多,很多..... 過去一直從事.net web開發工作,直到幾個月前,公司需要開發一個h5+,於是我這樣的全能型選手自然而然就被派去搞w ...
前言
經過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開發。我用上班時間寫的博客,老闆,你要給我開工資!!!