魔方APP项目-01-移动端开发相关概念、移动端自适配、元信息（meta）、开发准备、移动端项目搭建（模拟器调试）、APICloud（APICloud 前端框架，获取服务端API接口）
一、移動端開發相關概念
1、APP類型
①.Native APP
Native APP又稱原生APP，就是我們平時說的手機應用軟件。
原生APP 是針對IOS、Android、Windows等不同的手機操作系統要采用不同的語言和框架進行開發出來的，通常是由“服務器數據+APP應用客戶端”兩部份構成。
實現技術：
優缺點
優點：體驗好，用戶無法上網也可訪問APP應用中以前下載的數據性能穩定，可調用手機的硬件設備（語音、攝像頭、短信、GPS、重力感應等）和本地資源（通訊錄，相冊等）操作速度快，能夠實現出色的動效，轉場動畫缺點：開發周期長，開發人員工資起點高。用戶要使用原生APP，必須通過安裝到手機里面才行，而且APP軟件體積大，占用較多手機內存容量更新緩慢，根據不同平臺，提交–審核–上線流程較復雜。要獲取最新功能，需要升級應用，所以會容易出現有些用戶不升級，導致多個不同功能版本出現，維護成本大跨平臺差，每種平臺都需要獨立的開發語言。Java(安卓),Objective-C(iOS)等等②.Web APP
Web APP本質上是為移動瀏覽器設計的網站，可以在各種智能手機瀏覽器上運行。
實現技術：
優缺點
優點：一套代碼到處運行，可以同時在 PC、Android、iPhone 瀏覽器上訪問開發者不需要發布到應用市場審核，用戶不需要下載、安裝和更新開發周期短，維護成本低用戶不需用戶手動更新，可以自動更新，直接使用最新版本缺點：轉場表現略差，要求聯網用戶體驗沒那么炫。圖片和動畫支持性不高沒法在App Store中下載、無法通過應用下載獲得盈利機會對手機功能應用缺乏，有限制（攝像頭、GPS、藍牙等）③.Hybrid APP
Hybrid App就是混合APP，就是Native結合Web的混合開發，就是內部本質是Web網頁，使用打包軟件給它套一層原生APP的外殼。
實現技術：
優缺點
優點：集眾家之長，既可以調用豐富的手機設備API，也能擁有Web APP的跨平臺能力可以在應用商店發布，實現收費下載內部是網頁結構，可以自主更新，做到開發一次，所有平臺生效降低開發成本和技術成本，降低維護和開發周期 缺點：本質上就是一個Web APP使用了原生APP的殼，所以體驗比不上原生APP開發難度比Web APP高，有一定的學習成本，開發周期比Web APP長APP發布有可能無法通過審核，需要多次調整，才能發布依賴開發框架本身提供的手機設備API，少部分設備功能還是只能借住原生語言進行調用才可以對團隊技術棧要求相對高，既要懂web開發的，也要懂原生APP開發的2、移動端自適配方案
因移動端屏幕分辨率不同
目前常用的布局適配方案就3種，分別是vw、像素百分比+flex彈性布局和rem+viewport，后者最流行最容易。
當然，rem+viewport這種方案的實現方式也有很多，其中最著名的就是淘寶的flexible方案。
3、元信息（meta）
html中的meta標簽，也叫元信息標簽。作用就是用來告訴瀏覽器，當前網頁的附加信息。
meta標簽主要有2個屬性比較重要。
| http-equiv | content-type , expires , refresh , set-cookie | 設置 HTTP 頭部 |
| name | viewport，author , description , keywords | 設置網頁附加信息 |
例子：
<head><meta name="description" content="移動端開發" /><meta name="keywords" content="移動端,APP,flask" /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.baidu.com" /> </head>①.視口（Viewport）
視口是一個相對比較復雜的概念，所以我們可以簡單的理解為，viewport就是用戶看手機頁面時的可視區域，相當于桌面瀏覽器的窗口。在桌面瀏覽器中，viewport 就是瀏覽器窗口的寬度高度。但在移動端設備上就有點太窄了。
關于視口的詳細擴展知識可以參看：https://www.w3cplus.com/css/viewports.html
視口通過meta標簽進行設置
視口參數說明:
| device-width | 設備的寬度 |
| initial-scale | 初始的縮放比例 |
| minimum-scale | 允許用戶縮放到的最小比例 |
| maximum-scale | 允許用戶縮放到的最大比例 |
| user-scalable | 用戶是否可以手動縮放 |
②.像素（pixel）
在移動端上，所謂的像素分為兩種。
CSS像素：CSS像素就是我們在編寫CSS代碼時的像素。
設備像素：設備屏幕的物理像素，任何設備的物理像素的數量都是固定的。
③.媒體查詢（media query）
媒體查詢是css3的一個新增語法屬性，它根據頁面的視口寬度來定義特殊的 CSS 規則，一般用于進行移動端適配。
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;}}二、開發準備
我們接下來開發的項目是磨方APP，主要通過APICloud+Flask完成。
1.注冊APICloud帳號
APICloud官網：https://www.apicloud.com
開發文檔：https://docs.apicloud.com
2.下載APP開發編輯器
注冊成功，登錄進入開發控制臺，找到頁面右下角點擊開發工具跳轉到工具下載頁面。
下載完成以后，無需安裝，直接解壓，打開編輯器并登錄APICloud。
接下來開發APP的時候,肯定是要查看代碼運行后的效果,所以我們需要安裝安卓模擬器,當然也可以使用真機調試.
推薦: 市面上大部分的模擬器都差不多,使用人數最多,一般都是: 海馬玩模擬器, 夜神模擬器, 雷電模擬器.
我們這里安裝和使用雷電模擬器.
官網: https://www.ldmnq.com/
如果使用mac os ,安裝夜神模擬器.
夜神的官網: https://www.yeshen.com/
安裝完成效果:
上面這個版面效果是平板的,所以我們調整下版面設置為移動端手機的.
?
最終效果:3.下載APP開發調試工具
在前面登錄的APICloud開發控制臺中，找到頁面右下角點擊SDK下載跳轉到工具下載頁面
點擊AppLoader下載APP加載器工具，如掃碼無法下載，則手動下載壓縮包，通過USB連接電腦拖動到手機中進行安裝。
下載完成后在模擬器中安裝，也可以在真實手機中安裝。
三、移動端項目搭建
在打開的APICloud編輯器中點選新建項目即可。
填寫項目相關選項。
創建項目成功。
1.模擬器調試
在模擬器中打開AppLoader, 顯示效果如下:
注意看到屏幕右方有個白色的小圓按鈕!點擊這個按鈕,可以設置和APICloud stodio編輯器進行代碼同步, 進行調試APP運行的效果:
上面彈出的2個輸入框,需要我們在代碼編輯器APICloud Stodio中的左邊窗口處右鍵點擊項目名
此時代碼編輯器APICloud Stodio窗口的右上角, 出現以下彈窗, 復制里面提供的IP和端口,其中IP一般才用第一個,但是部分網絡下,可能第一個不行,則后面逐個填寫.
點擊連接以后,如果效果如下,則表示配置連接成功.可以進行模擬器APP測試了.
此時可以在APICloud Stodio代碼編輯器中通過鼠標右鍵點擊項目目錄,選擇,WIFI同步,打開, 接著選擇全量.
?此時,可以看到模擬器中的效果如下:
當然, 在開發中,使用模擬器是為了提高開發效率,但是模擬器畢竟不是真實設備,所以有時候,我們也需要使用和連接到真實設備中進行調試開發.
2.真機調試
通過APICloud開發工具，在真實設備下生成一個臨時的APP，查看效果。這個步驟，我們叫真機調試。
首先,必須確保當前手機中已經安裝了APPLoader工具.
鼠標右鍵點擊左上角的項目目錄，點選菜單中的USB同步選項。[準備一條好的USB線.]
測試效果：
四、APICloud
1.APICloud 前端框架
APICloud內置了一個APICloud 前端框架給我們操作APP頁面和展示數據，也提供了ajax跨域請求數據功能。
它本質上就是一個仿照jQuery編寫的一個小工具庫，所以并不好用。
框架地址：https://docs.apicloud.com/Front-end-Framework/framework-dev-guide
①.目錄結構
APP/|- index.html # 默認app配置的入口頁面|- config.xml # APP系統配置文件|- html/ # APP頁面存儲目錄|- css/ # 樣式目錄|- script/ # js腳本目錄|- image/ # 圖片目錄②.配置文件
<widget id="A6043953355883" version="0.0.1"><name>APP名稱，展示給客戶端手機里面的</name><!-- --><description>APP的描述信息，將來app上架以后，會需要填寫</description><author email="作者郵箱" href="官網地址">APP作者名字</author><!-- APP啟動以后看到的首頁,使用相對路徑 --><content src="index.html" /><!-- 設置APP的所有頁面是否能跨域訪問到本地或者遠程服務器，*表示沒有任何限制，local表示本地，如果是遠程服務器，則需要編寫完整的地址，例如：http://www.baidu.com/ --><access origin="*" /><preference name="pageBounce" value="false"/><!-- APP背景顏色 --><preference name="appBackground" value="rgba(0,0,0,0.0)"/><!-- 配置Window默認背景 --><preference name="windowBackground" value="rgba(0,0,0,0.0)"/><!-- 配置Frame默認背景 --><preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/><!-- 配置頁面默認是否顯示滾動條 --><preference name="hScrollBarEnabled" value="false"/><!-- 配置頁面默認是否顯示滾動條 --><preference name="vScrollBarEnabled" value="false"/><!-- 配置啟動頁是否自動隱藏 --><preference name="autoLaunch" value="true"/><!-- 配置應用是否全屏運行 --><preference name="fullScreen" value="false"/><!-- 配置應用是否自動檢測更新 --><preference name="autoUpdate" value="true" /><!--配置應用是否支持增量更新、云修復 --><preference name="smartUpdate" value="false" /><!-- 配置應用開啟/關閉調試模式 --><preference name="debug" value="true"/><!-- IOS全屏配置 --><preference name="statusBarAppearance" value="true"/><permission name="readPhoneState" /><permission name="camera" /><permission name="record" /><permission name="location" /><permission name="fileSystem" /><permission name="internet" /><permission name="bootCompleted" /><permission name="hardware" /></widget>③.調用框架
<script src="./script/api.js"></script>APICloud 前端框架中提供的40多個操作方法，主要分6類用途：
數據操作：trim() trimAll() isArray() jsonToStr() strToJson() get()post()事件操作：addEvt() rmEvt()元素查找：one() dom() domAll() byId() first() last() eq() not() prev() next() contains() closest()DOM操作：remove() attr() removeAttr() hasCls() addCls() removeCls() toggleCls() val() prepend() append() before() after() html() text() offset() css() cssVal()本地存儲：setStorage() getStorage() rmStorage() clearStorage()系統兼容：fixIos7Bar() fixStatusBar()所有的APICloud前端框架的代碼都必須在其入口函數中執行，并且通過$api來進行調用。
④.入口函數
// 要調用上面的40個方法,必須在apiready里面編寫,在外面是沒有$api對象的. apiready = function(){// js代碼}⑤.api與$api對象
注意：在APICloud中存在2個全局對象，分別是$api和api對象。這兩個對象是不同的。
其中api對象主要是由APP系統提供給我們開發者操作和讀取設備信息的。
而$api是APICloud模仿了jquery的$對象提供給開發者用于操作app頁面的對象。
api對象的操作代碼必須寫在apiready入口函數中，否則報錯！
而$api的部分操作代碼，則不會報錯，但是強烈建議不管是$api還是api都寫進入口函數中。
代碼：
<!doctype html> <html> <head><meta charset="utf-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><title>磨方APP</title></head> <body><div id="wrap"><div id="header"><h1>python~~~</h1></div><div id="main" class="flex-con"></div><div id="footer"><h5>Copyright ©<span id="year"></span> </h5></div><div id="info"></div></div> </body> <script type="text/javascript" src="./js/api.js"></script> <script type="text/javascript">apiready = function(){var header = document.querySelector('#header');$api.fixStatusBar(header);var el = $api.byId("header");var h1 = $api.first(el);var content = $api.html(h1,"2020-11-25");var ver = api.version;var sType = api.systemType;var sVer = api.systemVersion;var id = api.deviceId;var model = api.deviceModel;var name = api.deviceName;var cType = api.connectionType;var winName = api.winName;var winWidth = api.winWidth;var winHeight = api.winHeight;var frameName = api.frameName || '';var frameWidth = api.frameWidth || '';var frameHeight = api.frameHeight || '';var str = '<ul>';str += '<li>引擎版本信息: ' + ver + '</li>';str += '<li>系統類型: ' + sType + '</li>';str += '<li>系統版本: ' + sVer + '</li>';str += '<li>設備標識: ' + id + '</li>';str += '<li>設備型號: ' + model + '</li>';str += '<li>設備名稱: ' + name + '</li>';str += '<li>網絡狀態: ' + cType + '</li>';str += '<li>主窗口名字: ' + winName + '</li>';str += '<li>主窗口寬度: ' + winWidth + '</li>';str += '<li>主窗口高度: ' + winHeight + '</li>';str += '<li>子窗口名字: ' + frameName + '</li>';str += '<li>子窗口寬度: ' + frameWidth + '</li>';str += '<li>子窗口高度: ' + frameHeight + '</li>';str += '</ul>';$api.html($api.byId("info"), str);}; </script> </html>2.獲取服務端API接口
獲取數據可以使用$api.post()，當然，也可以使用api對象提供的api.ajax。
①.api.ajax
基本語法：
api.ajax({url: 'API接口地址', // 必須加上協議method: '請求方法', // post、get、put、deletedataType: "json", // 服務端數據響應格式cache: true, // 緩存數據，若緩存，下次沒網絡時請求則會使用緩存，// 僅在get請求有效timeout: 30, // 超時時間，單位：秒headers:{}, // 請求頭，里面的key使用首字母大寫的形式，// 如 Content-Typereport:false, // 是否實時返回上傳文件的進度，只有上傳時使用data: { // 提交數據values: { // 以表單格式提交數據name: 'haha'},body: "", // 以字符串格式提交數據files: { // ajax上傳文件file: 'fs://a.gif' // 文件字段名}}},function(ret, err){ // 回調函數，參數1是響應內容，參數2是錯誤信息if (ret) {alert( JSON.stringify( ret ) );} else {alert( JSON.stringify( err ) );}});接下來的開發中,需要實現客戶端，所以如果基于上面的$api開發的話，非常的影響效率，所以采用Vue.js來完成app的客戶端開發，當然最終代碼還是運行在APICloud里面。
②.vue+axios
vue.js：https://vuejs.org/js/vue.js
axios.js：https://www.npmjs.com/package/axios
把下載回來的vue.js和axios.js保存到項目的scripts目錄下，然后在頁面中引入。
<script src="../script/settings.js"></script> <script src="../script/vue.js"></script> <script src="../script/axios.js"></script>總結
以上是生活随笔為你收集整理的魔方APP项目-01-移动端开发相关概念、移动端自适配、元信息（meta）、开发准备、移动端项目搭建（模拟器调试）、APICloud（APICloud 前端框架，获取服务端API接口）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浙江大学计算机学院搞能源,CPUFPGA
- 下一篇： h5的fetch方法_扣丁学堂HTML5