寫在前面
??一直從事iOS原生APP開發(fā)，對H5前端開發(fā)那一套因為無知所以一直生畏，所以很長的一段的時間里只做原生的開發(fā),但對跨平臺的這種技術(shù)操作始終抱有很大興趣。由于工作需要做個業(yè)務(wù)相對簡單的應(yīng)用，而又要iOS和Android，所以開始正式著手H5。
后來又做了個自己業(yè)余喜歡的小應(yīng)用（主要是為了安卓，iOS我直接寫的原生的【關(guān)于這個應(yīng)用這里有介紹）】，以下的總結(jié)介紹也是基于此應(yīng)用的。
關(guān)于H5開發(fā)移動端APP
優(yōu)點(diǎn)：
很大的好處就是快速、簡單、方便，一套代碼幾乎不用怎么修改就可以同時打包iOS、Android安裝包。
基于前端各方面應(yīng)用技術(shù)棧成熟，資料齊全。
有不少的平臺和開發(fā)工具可供選擇，集代碼編輯、調(diào)試、打包幾乎一條龍服務(wù) ， 基于H5+的環(huán)境與原生底層交互越來越多，很多功能界面在效果上幾乎和原生的沒啥區(qū)別。
不足：
H5開發(fā)APP的不足在與原生的相比，有些場景暴露的很徹底。比如一些過度動畫，手勢操作，任務(wù)異步處理等 ， 還有一些訪問相冊、圖片處理底層設(shè)備硬件之類的。這些地方表現(xiàn)的有明顯的不足。
開發(fā)工具框架之類的太多，如果一個不熟悉前端的新人過來，幾乎不知道該如何下手。
所以對于一些業(yè)務(wù)邏輯簡單，沒有復(fù)雜的操作處理的應(yīng)用，H5開發(fā)再好不過。對一些重型的應(yīng)用還是原生的為主，H5為輔助也是一個很好的搭配。
開始著手
首先開發(fā)工具及框架，我選擇了 HBuilderX，一個牛逼而又好用的前端開發(fā)工具。
集成了各種插件工具，基于MUI ， H5+強(qiáng)大操作，同時可以在線打包，一鍵生成iOS、Android應(yīng)用。文檔完善（剛開始看仍然會讓你懵逼，就好比一個參考手冊，沒有一個完善的流程說明，所以學(xué)習(xí)的時候需要點(diǎn)時間）。具體官網(wǎng)看吧http://www.dcloud.io ,目前還有些不太完善，但不影響我喜歡它！
我用的最新HBuilderX 版本 1.3.2.20181214 ， 特此買了個安卓手機(jī)榮耀10測試。
經(jīng)過一段時間的爬坑鉆研、學(xué)習(xí)摸索，基礎(chǔ)開發(fā)效果我感覺還不錯，沒發(fā)現(xiàn)什么毛病。
- 在開發(fā)過程中，使用了強(qiáng)大的
Vue.js作為列表的數(shù)據(jù)渲染和事件綁定。值得一提的是或許由于初次接觸這個框架，它給我一種震撼的感覺，數(shù)據(jù)綁定、事件處理及關(guān)聯(lián)實(shí)在太方便了。 - 一些圖片引入了
阿里巴巴字體庫, 關(guān)于如何引入自定義的字體庫，這一點(diǎn)官方文檔寫的很清楚。 - 大多操作使用H5+ 這一強(qiáng)大的基礎(chǔ)庫，官方號稱有50多萬個API，幾乎涵蓋了原生操作的方方面面。
APP效果截圖
看效果怎么樣，是不是和原生的一模一樣？??????
目前已實(shí)現(xiàn)了很大一部分的功能，后續(xù)有時間還在繼續(xù)完善。完善后的代碼我會放到GitHub上供大家學(xué)習(xí)參考。
已發(fā)布開源詳細(xì)看這里：
xx頭條開源了(純H5項目) http://www.itdecent.cn/p/89fae6aa143f
離線打包操作(新增)
Android ： MUI、HBuilderX、H5+開發(fā)APP本地打包(Android)
iOS ： MUI、HBuilderX、H5+開發(fā)APP本地打包(iOS)
總結(jié)
- H5開發(fā)的效果無論界面效果上，還是操作體驗上，在現(xiàn)在的手機(jī)上沒有傳說中的那么差勁。
- 跨平臺的操作我喜歡，以后學(xué)習(xí)好原生的同時還會繼續(xù)跨平臺技術(shù)棧的學(xué)習(xí)。
- 對于不會原生開發(fā)的前端小伙伴，這種方式來開發(fā)個APP也是個很好的選擇。
Hi 大家好！我是Light413，一名iOS開發(fā)者,喜歡前端及后臺開發(fā)，沒錯，就是全干。簡書就是我的陣營，我喜歡在這里學(xué)習(xí)，在這里分享。
以后文章會不斷的更新，介紹關(guān)于iOS開發(fā)學(xué)習(xí)總結(jié) ， 介紹基于MUI 、H5+ 及H5開發(fā)中感悟記錄總結(jié)。感覺有用就點(diǎn)贊哈，喜歡就大膽的關(guān)注。
