移動(dòng)端開發(fā)之webapp開發(fā)

1 移動(dòng)端開發(fā)分類1.1 Native App 原生App開發(fā)長處：

（1）用戶體會(huì)好

（2）功能安穩(wěn)

（3）操作速度快

（4）能夠拜訪本地資源（通訊錄，相冊(cè)）

（5）能夠規(guī)劃超卓的動(dòng)效，轉(zhuǎn)場

（6）具有系統(tǒng)等級(jí)的貼心告訴或提醒

（7）用戶留存率高缺陷：

（1）開發(fā)本錢高

（2）維護(hù)本錢高

（3）更新緩慢，根據(jù)不同渠道，提交–審核–上線流程較雜亂?？偟膩碚f，native app開發(fā)從android、ios智能手機(jī)呈現(xiàn)就有了開發(fā)技能，功能體會(huì)最優(yōu)，API比較完善，可是學(xué)習(xí)起來難度比較高，開發(fā)本錢比較高（跟開發(fā)周期相對(duì)來說比較長也是有聯(lián)系的）。

2 Web App 網(wǎng)頁App開發(fā)長處：

（1）發(fā)版徹底自控，隨時(shí)更新

（2）跨渠道，由于本身來說用的是Web的東西，所以能夠在恣意渠道上運(yùn)行

（3）本錢小，Web頁面嵌入Webview開發(fā)起來速度非?？?，一個(gè)人就能夠輕松搞定缺陷：

（1）功能差

（2）弱網(wǎng)絡(luò)或無網(wǎng)絡(luò)條件下體會(huì)差

（3）適用有展示類需求的項(xiàng)目，可是假如要完成的功能比較雜亂的話就顯得力不從心總的來說，相比Native App，Web App體會(huì)中受限于網(wǎng)絡(luò)環(huán)境和烘托功能。Web APP對(duì)網(wǎng)絡(luò)環(huán)境的依賴性較大，由于Web APP中的H5頁面，當(dāng)用戶運(yùn)用時(shí)，去服務(wù)器懇求顯現(xiàn)頁面。假如此刻用戶恰巧遇到網(wǎng)速慢，網(wǎng)絡(luò)不安穩(wěn)等其他環(huán)境時(shí)，用戶懇求頁面的功率大打折扣，在用戶運(yùn)用中會(huì)呈現(xiàn)不流暢，時(shí)斷時(shí)續(xù)的不良感觸。一起，H5技能自身烘托功能較弱：對(duì)雜亂的圖形樣式，多樣的動(dòng)效，自定義字體等的支撐性不強(qiáng)。因此，應(yīng)留意以下幾點(diǎn)：

1.簡化不重要的動(dòng)畫/動(dòng)效；

2.簡化雜亂的圖形文字樣式；

3.削減頁面烘托的頻率和次數(shù)。

3 Hybrid App 混合型App開發(fā)長處：

（1）體會(huì)好

（2）安穩(wěn)性強(qiáng)動(dòng)態(tài)性強(qiáng)

（3）本錢相對(duì)低跨渠道缺陷：對(duì)團(tuán)隊(duì)技能棧要求相對(duì)高功能優(yōu)化Hybrid App就是Native結(jié)合Web混合開發(fā)，Native+JS代碼代表作是cordova前身是phonegap，現(xiàn)在移交給Apache，中心JsBridge，JS調(diào)Java，Java調(diào)JS。由于混合開發(fā)，所以體會(huì)挨近原生、安穩(wěn)性強(qiáng)并且發(fā)版快。

2 Viewport視口

2.1 視口視口是移動(dòng)設(shè)備上用來顯現(xiàn)網(wǎng)頁的區(qū)域，一般會(huì)比移動(dòng)設(shè)備可視區(qū)域大，寬度可能是980px或許1024px，意圖是為了顯現(xiàn)下整個(gè)為PC端規(guī)劃的網(wǎng)頁。這樣帶來的后果是移動(dòng)端會(huì)呈現(xiàn)橫向滾動(dòng)條，為了避免這種狀況，移動(dòng)端會(huì)將視口縮放到移動(dòng)端窗口的巨細(xì)。這樣會(huì)讓網(wǎng)頁不容易觀看，能夠用meta標(biāo)簽，name="viewport"來設(shè)置視口的巨細(xì)，將視口的巨細(xì)設(shè)置為和移動(dòng)設(shè)備可視區(qū)相同的巨細(xì)。在移動(dòng)端用來承載網(wǎng)頁的這個(gè)區(qū)域，就是我們的視覺窗口，viewport（視口），這個(gè)區(qū)域能夠設(shè)置高度寬度，能夠按份額放大縮小，并且能設(shè)置是否答應(yīng)用戶自行縮放。

2.2參數(shù)闡明width：寬度設(shè)置的是viewport寬度，能夠設(shè)置device-width特殊值initial-scale：初始縮放比，大于0的數(shù)字maximum-scale：大縮放比minimum-scale：最小縮放比user-scalable：用戶是否能夠縮放，yes或no（1或0）

2.3 設(shè)置方法3 移動(dòng)端適配布局運(yùn)用百分比自適應(yīng)布局（流式布局）一起需要對(duì)移動(dòng)端的viewport視口進(jìn)行設(shè)置，就能夠到達(dá)適配的意圖。

3.1 流體布局+少量呼應(yīng)式流體布局：運(yùn)用百分比來設(shè)置元素的寬度，元素的高度按實(shí)際高度寫固定值，流體布局中，元素的邊線（border）無法用百分比，能夠運(yùn)用樣式中的計(jì)算函數(shù)calc()來設(shè)置寬度，或許運(yùn)用box-sizing屬性將盒子設(shè)置為邊線計(jì)算盒子尺度。呼應(yīng)式布局：運(yùn)用媒體查詢的方法，經(jīng)過查詢?yōu)g覽器的寬度，不同的寬度應(yīng)用不同的樣式塊，每個(gè)樣式塊對(duì)應(yīng)的是該寬度下的布局方法，然后完成呼應(yīng)式布局，呼應(yīng)式布局的頁面能夠適配多種終端屏幕（pc、平板、手機(jī)）。

3.2 根據(jù)rem的布局rem指的是參照根節(jié)點(diǎn)的文字巨細(xì)，根節(jié)點(diǎn)指的是html標(biāo)簽，設(shè)置html標(biāo)簽的巨細(xì)，其他的元素相關(guān)尺度設(shè)置用rem。這樣，一切元素都有了統(tǒng)一的參照規(guī)范，改動(dòng)html文字的巨細(xì)，就會(huì)改動(dòng)一切元素用rem設(shè)置的尺度巨細(xì)。

聲明：本文來源網(wǎng)絡(luò)資料收集整理，如有侵權(quán)，及時(shí)告知我們給予刪除。

分享名稱：移動(dòng)端開發(fā)之webapp開發(fā)
文章位置：http://www.muchs.cn/news31/218231.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、定制網(wǎng)站、App設(shè)計(jì)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)