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

來源:互聯網
上載者:User

標籤:web app   開始   jquery   dem   兩種      ima   一個   blog   

 前言

經過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開發大全

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.