大熊君{{bb}}移動開發之旅（第一季）

時間 2019-12-13

標籤移動開發之旅一季欄目無線简体版

原文原文鏈接

一，開篇概述javascript

Hi，你們好！大熊君又和你們見面了，從這篇文章開始我要和你們聊聊移動開發的話題，這部分文章共8季，分別從不一樣角度來說解什麼是移動開發？移動開發涉及到什麼方面的技術點以及移動開發中的常見問題和疑難雜症。css

咱們指的移動開發，實際上就是使用web技術------它主要包含「h5，css3，javascript」等技術，經過（Phonegap / Cordova-一個跨平臺的而且已經有一整套相關生態系統包括工具，論壇，開發者。你能經過它來利用HTML5的API以及原生API。html

開發出一個真正的移動應用。此平臺也聽從HTML5規範以協助web應用的轉化。）在跨平臺性，可移植性方面，具備無可比擬的優點。java

背景瞭解：下面是一張信息圖，爲咱們詳細對比了純web（HTML5），混合App（Hybrid）和原生App（Native）三種移動開發路線的差別。ios

一些重點差別：css3

　　開發難度移動web和混合App開發難度對於web開發者來講相對較低，並且能夠充分利用現有的web開發工具和工做流程web

　　發佈渠道和更新方式------混合App能夠在應用商店App Store發佈，但能夠自主更新，而原生App的更新必須經過應用商店App chrome

　　移動設備本地API訪問------混合App能夠經過JavaScript API訪問到移動設備的攝像頭，GPS，而原生App能夠經過原生編程語言訪問設備全部功能。編程

　跨平臺和可移植性------基於瀏覽器的移動web最好的可移植性和跨平臺表現；混合App也能節省跨平臺的時間和成本，只需編寫一次核心代碼就可部署到多個平臺，而原生App的跨平臺性能瀏覽器

　搜索引擎友好------只有移動web對搜索引擎友好，可與在線營銷

　貨幣化------混合App除廣告外，還支持付費下載及程序內購買；原生App的程序內購買金額2012年首次超過

　　消息推送------只有混合App和原生App支持消息推送，這能增長用戶忠誠度。

二，進入移動開發話題

　　就基於web技術的移動應用開發來講，其實本質是不變的，與PC端開發很相似，因此說換湯不換藥，無論什麼類型的應用，必須有一個友好的界面交互，首先就是佈局的問題，移動佈局和傳統的基於PC

瀏覽器佈局方式仍是有區別的，因此今天就從佈局提及，由淺入深逐步提升。好了進入重點部分，先看一個小栗子，以下比如這樣：

　　咱們分爲三步驟去作這件事：

　　（1），準備測試虛擬設備，我這裏用的是chrome自帶的小工具

　　（2），創建一個html頁面，如「bb.html」bb.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
 6   <meta content="yes"name="apple-mobile-web-app-capable"/>
 7   <meta content="black"name="apple-mobile-web-app-status-bar-style"/>
 8   <meta name="format-detection"content="telphone=no"/>
 9   <title>大熊君移動開發之旅</title>
10   <link rel="stylesheet" href="bb.css" media="all">
11 </head>
12 <body>
13   <header class="header">大熊君移動開發之旅</header>
14   
15   <div class="wrap-page">
16     <div class="page">
17       <p>哈哈哈，我是大熊君{{bb}} (●'◡'●))
18        <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 19 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 20 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 21 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 22 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 23 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 24 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 25 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 26 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 27 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 28 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 29 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 30 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 31 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 32 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 33 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 34 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 35 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 36 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 37 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 38 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 39 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 40 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 41 </div> 42 </div> 43 <footer class="footer">若是你們喜歡，推薦哦~~~</footer> 44 </body> 45 </html>

　　css代碼以下：

 1 .header,.footer,.wrap-page{
 2   position:absolute;
 3   left:0;
 4   right:0;
 5     color:#f8f8f8;
 6 }
 7 .header,.footer{
 8   height:44px;
 9   background-color: #fff;
10   text-align: center;
11   z-index:900;
12   line-height:44px;
13    background:#C10066;
14 }
15 .header{
16   top: 0;
17   border-bottom: 1px solid #f00;
18 }
19 .footer{
20   bottom: 0;
21   border-top: 1px solid #f00;
22 }
23 .wrap-page{
24   top: 44px;
25   bottom: 44px;
26   overflow-y:auto;
27   -webkit-overflow-scrolling:touch;
28   color:#333;
29 }
30 .page{
31   padding: 10px;
32 }
33 .page p{
34   margin-bottom: 10px;
35 }

　　如下是實際效果，以下：

三，分析一下

　　1，

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
// 上面的代碼依次表示設置寬度爲設備的寬度，默認不縮放，不容許用戶縮放（即禁止縮放），在網頁加載時隱藏地址欄與導航欄（ios7.1新增）。

　　2，

width – viewport的寬度

height – viewport的高度

initial-scale – 初始的縮放比例

minimum-scale – 容許用戶縮放到的最小比例

maximum-scale – 容許用戶縮放到的最大比例

user-scalable – 用戶是否能夠手動縮放

　　3，

-webkit-overflow-scrolling:touch 來實現滾動，固然對於不支持的，也可使用「iscroll」來兼容，而iscroll一樣也須要一個固定高度的容器來包裹可滾動的內容。

　　小結一下：移動端佈局不少都採用Css3提供的屬性支持，若是不兼容或者性能很差能夠經過js作兼容處理，具體佈局時遵循三個原則，1------使用百分比方式，不論寬高仍是字體大小是同樣處理的方式。

　2------使用相對佈局方式處理。3-------設置meta標籤進行移動應用的一些預設處理。

（四），最後總結

　　（1），使用百分比方式合理佈局。

　　（2），使用相對佈局方式處理。

　　（3），很少練習不斷嘗試多種佈局體驗，總之空間有限想法無限。

　　　　　　　　　　　　　　哈哈哈，本篇結束，未完待續，但願和你們多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)　　　　　　

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。