人人妻人人澡人人爽人人精品97,色狠狠色狠狠综合天天,国产一区二区三区在线播放,久久久久久AV无码免费网站

十年技術深耕細作

為您提供各行業(yè)互聯網私人定制開發(fā)解決方案

免費咨詢熱線15890197308
新聞資訊
把握先機贏得挑戰(zhàn)與世界同步
首頁 新聞中心 App開發(fā)

5+ App開發(fā)入門指南

來源：Dcloud 發(fā)布時間：2017-11-09瀏覽：25865次

5+App開發(fā)入門指南HTML5Plus應用概述HTML5Plus移動App，簡稱5+App，是一種基于HTML、JS、CSS編寫的運行于手機端的App，這種App可以通過擴展的JSAPI任意調用手機的原生能力，實現與原生App同樣強大的功能和性能。HTML5Plus規(guī)范通過HTML5開發(fā)移動App時，會發(fā)現HTML5很多能力不具備。為彌補HTML5能力的不足，在W3C中國的指導下成立了www.html5plus.org組織，推出HTML5+規(guī)范。HTML5+規(guī)范是一個開放規(guī)范，允許三方瀏覽器廠商或其他手機runt...

5+ App開發(fā)入門指南

HTML5 Plus應用概述

HTML5 Plus移動App，簡稱5+App，是一種基于HTML、JS、CSS編寫的運行于手機端的App，這種App可以通過擴展的JS API任意調用手機的原生能力，實現與原生App同樣強大的功能和性能。

HTML5 Plus規(guī)范

通過HTML5開發(fā)移動App時，會發(fā)現HTML5很多能力不具備。為彌補HTML5能力的不足，在W3C中國的指導下成立了www.html5plus.org組織，推出HTML5+規(guī)范。
HTML5+規(guī)范是一個開放規(guī)范，允許三方瀏覽器廠商或其他手機runtime制造商實現。
HTML5+擴展了Javascript對象plus，使得js可以調用各種瀏覽器無法實現或實現不佳的系統(tǒng)能力，設備能力如攝像頭、陀螺儀、文件系統(tǒng)等，業(yè)務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。
HBuilder的手機原生能力調用分2個層面：
- 跨手機平臺的能力調用都在HTML5+規(guī)范里，比如二維碼、語音輸入，使用plus.barcode和plus.speech。編寫一次，可跨平臺運行。
- Native.js是另一項創(chuàng)新技術。手機OS的原生API有四十多萬，大量的API無法被HTML5使用。Native.js把幾十萬原生API封裝成了js對象，通過js可以直接調ios和android的原生API。這部分就不再跨平臺，寫法分別是plus.ios和plus.android，比如調ios game center，或在android手機桌面創(chuàng)建快捷方式。
Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，將一個原生對象android.content.Intent映射為js對象obj，然后在js里操作obj對象的方法屬性就可以了。
Native.js的詳細教程可以參考：5+ App開發(fā)Native.js入門指南

HTML5+ App

使用HTML5+開發(fā)的移動App并非mobile web頁面。這是新手最容易混淆的地方。mobile web的文件存放在web服務器上，而移動App的文件存放在手機本地，編寫移動App的html、js、css文件被打包到ipa或apk等原生安裝包，在手機客戶端運行。
用個更形象的列子，web app仍然是b/s結構，而移動App是c/s結構甚至是完全脫線的單機應用。
這或許有點超過一些人的想象，他們認為HTML就是web、就是b/s，事實上javascript早已可通過nodejs等技術運行在服務器側，而在HBuilder的移動App里，HTML、JS等文件也可以被打包成原生安裝包。
當然這些移動App里某些頁面也可以繼續(xù)從服務器端以網頁方式下行，就像任何原生應用（如微信）都可以內嵌網頁一樣。
所以mobile web，在HBuilder里新建項目時，屬于web項目。不要放置到移動App項目下。mobile web項目也不能真機聯調和打包。
舉幾個例子說明mobile web和移動App的區(qū)別。
例1：把一個mobile web項目，打包成移動App。
1. 在HBuilder里新建一個web項目，把mobile web代碼放進去。
2. 在HBuilder里新建移動App
3. 在新建的移動App下找到manifest.json，將其中的入口頁面配置為mobile web的網絡地址。
4. 然后點發(fā)行打包，就得到一個移動App的安裝包。除了有個安裝包和桌面有個快捷方式外，與瀏覽器的體驗不會有其他區(qū)別。
5. 不過注意，這樣的移動App體驗很差，它在頁面跳轉時會像瀏覽器那樣切換并且白屏，它完全無法脫線使用，沒有網絡時點開這個app只能看到一片白板。這樣的app在Apple的Appstore審核時是無法通過的，其他大的安卓市場也不會允許發(fā)行。

例子2：正規(guī)的移動App
1. 在HBuilder里新建移動App項目
2. 在移動App里編寫html、Js、css文件，本地js通過ajax方式請求服務器數據，通過plus.net對象避開跨域限制
3. 移動App里的js可以通過plus對象調用手機原生能力
4. 編寫好的移動App點打包變成安裝包，這才是一個體驗良好的、可上線的移動App。

例子3：混合型移動App
這里的混合型移動App，所指并非是原生和HTML5的hybrid App，而是指一部分頁面是本地的HTML，通過ajax與服務器交互，另一部分頁面是從服務器下行的mobile web頁面。
1. 分別新建一個web項目和一個移動App項目
2. 在移動App里的某個html里通過<a href= 或者location.href=或者webview對象的loadURL方法指定mobile web的頁面地址。
3. 在服務器下行的mobile web頁面中，一樣可以通過js調用本地HTML5Plus api對硬件層進行訪問。類似微信JS SDK。

HTML5+ 應用架構

HTML5+ 應用架構圖

HTML5+ 規(guī)范 API 及demo示例

最新規(guī)范請參考http://www.html5plus.org/#specification
手機端體驗各個API的實現效果，ios手機在Appstore搜索Hello H5+，Android手機下載地址。
在HBuilder中新建移動App，選Hello H5+，即可看到這個demo的源代碼。

開發(fā)環(huán)境HBuilder

HBuilder內置HTML5+ APP開發(fā)環(huán)境，提供一套完整的移動應用開發(fā)解決方案。內置HTML5+ API語法提示，提高開發(fā)效率；集成真機運行環(huán)境，方便開發(fā)后即時在真機上查看運行效果；集成應用云端打包系統(tǒng)，不用部署xcode和Android sdk就可以打包應用。使開發(fā)者只需要使用HTML5、Javascript、CSS技術就可以快速開發(fā)跨平臺的移動應用。
下載地址：http://www.dcloud.io/

平臺支持

  • iOS 5.0及以上

  • Android 2.3及以上

手把手教你開發(fā)HelloWorld

創(chuàng)建HelloWorld應用

  • 啟動HBuilder（下載地址：http://www.dcloud.io/）；

  • 在菜單欄中選擇“文件”-> “新建”->“移動App”（快捷鍵Ctrl+N A），打開“創(chuàng)建移動App”對話框，在應用名稱中輸入“HelloWorld”；
    注意新建移動App需要聯網分配一個appid，在真機聯調、打包發(fā)行時都需要這個ID，所以不聯網無法創(chuàng)建移動App。
    創(chuàng)建移動App圖

  • 創(chuàng)建完成后，會在項目管理器中顯示新建的“HelloWorld”項目
    創(chuàng)建移動App完成圖

manifest.json

在項目管理器中雙擊“manifest.json”文件，打開應用配置頁面：
manifest.json配置圖
對于要打包的原生應用而言，其各種配置均在此處。具體配置教程見：Manifest.json文件配置，或者點擊配置頁面上的“manifest文件配置指南”鏈接。

調用HTML5+ API

在項目管理器中雙擊“index.html”文件（快捷鍵Ctrl+T 然后輸入in選擇文件回車），對于HTML5+應用的頁面有一個很重要的“plusready”事件，此事件會在頁面加載后自動觸發(fā)，表示所有HTML5+ API可以使用，在此事件觸發(fā)之前不能調用HTML5+ API，所以應該在此事件回調函數中調用頁面初始化需要調用的HTML5+ API，而不應該在onload或DOMContentLoaded事件中調用：

<!DOCTYPE html><html><head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Hello world</title>
    <script type="text/javascript"> // 擴展API是否準備好，如果沒有則監(jiān)聽“plusready"事件if(window.plus){
    plusReady();}else{ 
    document.addEventListener( "plusready", plusReady, false );}// 擴展API準備完成后要執(zhí)行的操作function plusReady(){
    var ws = plus.webview.currentWebview(); //pw回車可輸出plus.webview
    // ... code}
    </script> </head> <body></body></html>

編輯程序啟動后默認顯示的頁面index.html，在頁面中添加一個按鈕，點擊后將打開新頁面加載“<http://m.csdn.net/>”，為了實現此功能，我們需要用到HTML5+擴展API中plus.webview.createWebview()方法創(chuàng)建窗口：
創(chuàng)建index.html圖
編輯完成后，按Ctrl+S鍵保存。

真機運行 run in device

寫完代碼后，我們可以通過真機運行來查看效果。真機運行有3個特點：
1. 真實。雖然PC端HBuilder的邊改邊看也可以看大致的頁面，但真實的布局效果以及手機上的特殊能力調用，還是必須在真機測試。
2. 邊改邊看。在HBuilder更改頁面并保存后，可立即同步在真機上看到保存后的顯示效果。比開發(fā)原生應用還方便。
3. 檢查錯誤和log。手機運行HTML等文件時如果發(fā)生錯誤以及打印的console.log，都可以在真機運行時從手機端反饋回到HBuilder的控制臺，在控制臺直接查看。
注意只有移動App項目才可以真機聯調。

在HBuilder的“項目管理器”中選擇創(chuàng)建的“HelloWorld”應用。

啟動真機運行

將iOS或Android設備連接到電腦，這時HBuilder會自動檢測連接到電腦上的設備，通過菜單欄中的“運行”菜單啟動：
通過菜單啟動Android真機運行圖
也可通過工具欄啟動：
通過工具欄啟動Android真機運行圖

啟動真機運行后，在控制臺中顯示以下信息：
Android真機運行日志圖
注：如果提示錯誤信息，請嘗試“終止”后重新啟動真機運行！

啟動后會彈出提示框，選擇“確定”，顯示以下頁面：
手機端App運行后截圖
點擊按鈕后截圖

在Android設備會自動安裝并啟動HBuilder調試基座，iOS設備需要開發(fā)者手動點擊手機桌面的HBuilder調試App。
Android HBuilder應用圖
注意：真機聯調App時，提供的是一個測試環(huán)境，并不真實發(fā)生打包，調試基座App的名字、圖標、啟動封面圖片、是否可旋轉這些只有打包才能更改的屬性不會因為開發(fā)者修改manifest文件而變化。只有修改manifest且點擊菜單發(fā)行-打包后，上述4個設置才能更改。

運行后，HBuilder中修改頁面代碼，保存后會自動同步到手機中，如果手機當前展示著被修改的頁面，則會刷新頁面。
嘗試在js中在plus ready之后編寫console.log，或者改寫錯誤的js，可以直接在HBuilder的控制臺看到結果。
如果真機運行遇到各種故障，請點擊運行菜單里的真機運行常見故障指南。

debug調試

除了真機運行，我們還可以利用chrome和safari的開發(fā)者控制臺來調試5+App。
可以使用真機插上數據線，也可以使用模擬器。所有Api包括plus的各種api，甚至包括plus.ios和plus.android的原生對象，都可以調試。
在HBuilder的菜單運行-手機運行里有教程的鏈接。
但他們也有局限性，chrome調試需要使用Android4.4以上的設備并且要翻墻，safari調試需要使用mac電腦。

發(fā)行打包

完成應用頁面的編輯后，需要正式打包為原生的apk或ipa安裝包。
首先明確一下，有人說HTML5做的應用無法通過蘋果Appstore審核，這是錯誤的說法。蘋果只是拒絕開發(fā)者把web站點直接打包上Appstore，它認為這是給Appstore制造垃圾應用，如果是原生體驗的App，雖然使用HTML5技術，蘋果也不會拒絕上架。事實上Appstore上使用HTML5技術的App超過20w。
HBuilder提供的打包有云打包和本地打包兩種。
HBuilder并不會向開發(fā)者收取任何有關打包的費用，也不限制開發(fā)者使用本地打包。
云打包的特點是DCloud官方配置好了原生的打包環(huán)境，可以把HTML等文件編譯為原生安裝包。
1. 對于不熟悉原生開發(fā)的前端工程師，云打包大幅降低了他們的使用門檻。
2. 對于沒有mac電腦的開發(fā)者，他們也可以通過云打包直接打出iOS的ipa包。
無論云打包還是本地打包，都在HBuilder的菜單-發(fā)行中。
本地打包在該菜單下有詳細教程，此處僅對云打包進行說明。

通過菜單欄中的“發(fā)行”->“App打包”，打開“App云端打包”對話框提交。
注意只有移動App項目才可以打包。

iOS發(fā)布

對于iOS平臺，可以選擇越獄包或正式包（Appstore專用或企業(yè)證書），前者只能安裝在已越獄的設備上，后者則可通過iDP證書打包提交到Appstore發(fā)布、或通過iEP證書打包在企業(yè)內部發(fā)布。

配置打包信息

  • 越獄包
    iOS App云端打越獄包
    AppID：iOS應用標識，推薦使用反向域名風格的字符串，如“com.domainname.appname”。

  • 正式包
    iOS App云端打正式包
    AppID：iOS應用標識，推薦使用反向域名風格的字符串，如“com.domainname.appname”，必須與profile文件綁定的App ID匹配。
    私鑰證書：iOS Certificates文件（.p12）；
    私鑰密碼：導入私鑰證書的密碼；
    Profile文件：iOS Provisioning Profile文件（.mobileprovision），必須與蘋果App ID和私鑰證書區(qū)配；
    證書生成請參考http://ask.dcloud.net.cn/article/152

查看打包狀態(tài)

通過菜單欄中的“發(fā)行”->“查看打包狀態(tài)”，打開“查看App打包狀態(tài)”對話框，可查看打包歷史記錄和狀態(tài)：
iOS 查看打包狀態(tài)
如果“制作狀態(tài)”欄顯示“打包成功，下載完成”則表示云端打包完成，可點擊“打開下載目錄”查看下載的安裝包。

Android發(fā)布

對于Android平臺，可以選擇使用DCloud生成的公用證書或自己生成的證書，兩者不影響安裝包的發(fā)布，唯一的差別就是證書中開發(fā)者和企業(yè)信息不同。

生成Android簽名證書

（使用DCloud公用證書可忽略此操作）確保電腦上安裝了JRE，我們將使用JRE自帶的創(chuàng)建和管理數字證書的工具Keytool。使用以下命令生成證書：
Android生成簽名證書

  • keystore helloworld.keystore 表示生成的證書，可以加上路徑（默認在用戶主目錄下）；

  • alias helloworld 表示證書的別名是helloworld；

  • keyalg RSA 表示采用的RSA算法；

  • validity 10000 表示證書的有效期是10000天。

配置打包信息

  • 使用DCloud公用證書
    Android 使用DCloud公用證書打包
    App包名：Android應用包名，使用反向域名風格的字符串，如“com.domainname.appname”。

  • 使用自有證書
    Android 使用自用證書打包
    App包名：Android應用包名，推薦使用反向域名風格的字符串，如“com.domainname.appname”；
    證書別名：生成證書時使用-alias參數設置的證書別名；
    私鑰密碼：生成證書時使用的keystore密碼；
    證書文件：生成證書時使用-keystore參數設置的證書保存路徑；

查看打包狀態(tài)

通過菜單欄中的“發(fā)行”->“查看打包狀態(tài)”，打開“查看App打包狀態(tài)”對話框，可查看打包歷史記錄和狀態(tài)：
Android 查看打包狀態(tài)
如果“制作狀態(tài)”欄顯示“打包成功，下載完成”則表示云端打包完成，可點擊“打開下載目錄”查看下載的安裝包。

已經打好的安裝包，允許開發(fā)者在2天內繼續(xù)下載。2天后服務器端會清除文件。

遇到打包失敗，常見原因是：
如果使用自用證書，很可能是證書配置錯誤。
如果使用DCloud證書仍然出錯，很可能是圖片錯誤。所有圖片格式必須是標準png，且嚴格符合分辨率要求。使用其他圖片格式重命名為png會導致打包失敗！
其他錯誤請參考： 云打包常見錯誤排查指南

UI框架

HBuilder并不限制UI框架，開發(fā)者使用任何UI框架均可以。
不過市面上確實沒有什么好的手機App前端框架，DCloud開發(fā)了mui框架，它的性能更高，樣式也更接近原生App，并且mui調用了HTML5+擴展能力，可以實現更好的體驗。
我們強烈推薦開發(fā)移動App的開發(fā)者使用mui框架，詳情請參考文檔中心mui章節(jié)。
請注意，mui只封裝了部分HTML5Plus Api，學會mui框架不代表可以不學習HTML5Plus規(guī)范。mui不會做的很重，只是很有限的通過封裝簡化了常見開發(fā)過程。