H5開發(fā)移動端APP基于H5

基于前端應(yīng)用，技術(shù)棧成熟，數(shù)據(jù)完整。

有許多平臺和開發(fā)工具可供選擇，包括幾乎一站式的代碼編輯、調(diào)試和打包服務(wù)。基于H5的環(huán)境和原生底層的交互越來越多，很多功能界面和效果幾乎和原生一樣。

缺點(diǎn)：

相比原生，H5在開發(fā)APP的劣勢是有些場景完全暴露。比如一些動畫、手勢操作、異步任務(wù)處理等。以及一些用于訪問相冊的硬件和用于圖像處理的底層設(shè)備。這些地方都表現(xiàn)出明顯的不足。

開發(fā)工具架太多等等。如果一個不熟悉前端的新人過來，他幾乎不知道該怎么辦。

因此，H5開發(fā)非常適合一些業(yè)務(wù)邏輯簡單、操作不復(fù)雜的應(yīng)用。對于一些重型應(yīng)用，原生是主要的，H5也是一個很好的匹配。

開始

首先，開發(fā)工具和框架。我選擇了HBuilderX，一個功能強(qiáng)大且易于使用的前端開發(fā)工具。

mui_logo .巴布亞新幾內(nèi)亞

集成各種插件工具，基于MUI和H5的強(qiáng)大操作，在線打包，一鍵生成iOS和安卓應(yīng)用。文檔是完美的(剛開始還是會讓你感到困惑，就像參考手冊一樣，沒有一個完美的過程描述，所以要花一些時間去學(xué)習(xí))。

在開發(fā)，的過程中，強(qiáng)大的Vue.js被用作列表的數(shù)據(jù)表示和事件綁定。值得一提的是，可能是因?yàn)槲覟閿?shù)不多次接觸到這個框架，給了我一種震撼的感覺。數(shù)據(jù)綁定、事件處理、關(guān)聯(lián)太方便了。

部分圖片已經(jīng)介紹了阿里巴巴字體，文檔官方很清楚如何介紹自定義字體。

大多數(shù)操作使用H5，一個強(qiáng)大的基礎(chǔ)庫。官方聲稱擁有超過500，000個API，幾乎涵蓋了本機(jī)操作的所有方面。

APP截圖效果

1.png效果圖

2.png效果圖

效果如何？和本地人一樣嗎？

目前很大一部分功能已經(jīng)實(shí)現(xiàn)，還有進(jìn)一步完善的時間。我會把改進(jìn)后的代碼放到GitHub上，供大家參考。HBuilderX應(yīng)用本地打包(安卓)

Ios:mui，HBuilderX，

我喜歡跨平臺運(yùn)營，未來會在努力學(xué)習(xí)的同時繼續(xù)學(xué)習(xí)跨平臺技術(shù)棧原生。

對于非開發(fā)，本地人的前端合作伙伴來說，這樣的APP在開發(fā)也是不錯的選擇。