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

簡(jiǎn)單方便，只需稍加修改就可以通過(guò)同時(shí)安裝iOS和Android打包一套代碼。

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

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

缺點(diǎn)：

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

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

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

開始

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

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

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

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

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

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

APP截圖效果

1.png效果圖

2.png效果圖

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

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

Ios:mui，HBuilderX，

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

對(duì)于非開發(fā)，本地人的前端合作伙伴來(lái)說(shuō)，這樣的APP在開發(fā)也是不錯(cuò)的選擇。