h5 plus/h5+規範使用，模塊索引，教你如何去看h5+的手冊

時間 2019-12-14

標籤 h5 規範使用模塊索引如何去看手冊简体版

原文原文鏈接

　　最近看了下h5+規範的官網，開始以爲晦澀難懂，確實很亂，不過這也是基於我不理解的狀況，終於艱難讀完了，如今來分享下心得吧，基本看完文章，按個人方法，應該能夠直接上手項目。html

　　我準備的工具 hbuilder編譯器(打包用),逍遙安卓模擬器（測試安卓用）一個html 搞定，開工，爲了講解的更易於新手，我們從簡單的一個底部彈出的按鈕這個demo爲例子，先看下效果圖html5

如上就是效果圖，就實現這個能夠吧，雖然簡單，或許來講用個插件就實現了不必去碰h5+，可是這只是爲了你們抱磚引玉用。重點不是教你實現這個是教你看h5+文檔，會看文檔什麼效果不能夠寫？webpack

開始

我使用的是nativeUI的actionSheet這個模塊，看方法模塊這裏能清晰的知道，這個方法/模塊是作什麼用的，能夠看到我這個是：彈出系統選擇按鈕框，那麼，點一下標題開始往下面走到用的這個模塊的專區web

到了這裏，喜歡對照示例的就能夠不往下了，固然我不是，我喜歡本身去寫，因此我會去看說明，參數。json

首先是這段代碼跨域

NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);

開始看時候一臉懵逼，這nima是個啥？什麼鬼，不急我們直接看參數，瀏覽器

有actionsheetStyle和actionsheetCallback這倆參數，翻了上下半天，沒找到啊，難道猜想字義麼，那個是是什麼啊？懵逼，不慌，我來教你首先咱們看到actionsheetStyle這個是必選參數，我先來找找他，能夠發現參數後面小括號是個藍色，應該是個連接，點擊，安全

哈哈，還真是這個參數介紹，原來這個是參數都寫在最後了，能夠清晰看到這寫的很清楚，json對象，有title/cancel/buttons這三個參數，須要注意他後面的支持版本，不要輕易使用哦，像buttons裏面也寫清楚了他的格式，也能夠經過點擊格式來到對應的介紹，就這麼簡單，看懂文檔還愁不會代碼麼？那咱們嘗試下。服務器

首先，h5的plus對象僅做用於app，其次他也是相似於window.onload同樣的存在不過他的監聽要用網絡

document.addEventListener("plusready",plusReady,false);

這樣子來監聽是否初始化，初始化就能夠開始讀文檔寫代碼了，讓咱們來編輯plusReady函數吧

首先咱們調用plus.nativeUI.actionSheet這個而後咱們開始根據上面已知的開始配置了，這就能實現如上圖搬的效果了，

function plusReady(){
        plus.nativeUI.actionSheet({
            title:"我是彈窗title",
            cancel:"我是取消哦",
            buttons:[
                {
                    color:"#f55",
                    title:"按鈕一"
              
                },
                {
                    color:"f55",
                    title:"按鈕二"
                    
                },
                {
                    color:"f55",
                    title:"按鈕三"
                    
                }
            ]
        })
    }

剛纔文檔還有第二個參數是個回調，那咱們來加上？下面是上圖的所有代碼，直接打包app便可預覽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
   <div onclick = "plusReady()">
        彈出系統選擇按鈕框
   </div>

</body>
<script>
    function plusReady(){
        plus.nativeUI.actionSheet({
            title:"我是彈窗title",
            cancel:"我是取消哦",
            buttons:[
                {
                    color:"#f55",
                    title:"按鈕一"
              
                },
                {
                    color:"f55",
                    title:"按鈕二"
                    
                },
                {
                    color:"f55",
                    title:"按鈕三"
                    
                }
            ]
        },function(e){
            alert(JSON.stringify(e));
        })
    }
    if(window.plus){
        plusReady();
    }else{
        document.addEventListener("plusready",plusReady,false);
    }
    
</script>
</html>

tips:千萬不要吧js單獨拿出去（或者你後期用webpack什麼的合併也能夠）由於hb是不會把你外聯一塊兒打包進app。

下面給你們一份索引須要幹嗎直接去某個模塊，省得挨個去找浪費時間了，快去建立屬於你的app

http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ActionSheetStyles



accelerometer
Accelerometer模塊管理設備加速度傳感器，用於獲取設備加速度信息，包括x（屏幕水平方向）、y（垂直屏幕水平方向）、z（垂直屏幕平面方向）三個方向的加速度信息。經過plus.accelerometer獲取設備加速度傳感器管理對象。

audio
Audio模塊用於提供音頻的錄製和播放功能，可調用系統的麥克風設備進行錄音操做，也可調用系統的揚聲器設備播放音頻文件。經過plus.audio獲取音頻管理對象。


barcode
Barcode模塊管理條碼掃描，支持常見的條碼（一維碼及二維碼）的掃描識別功能。可調用設備的攝像頭對條碼圖片掃描進行數據輸入，解碼後返回碼數據及碼類型。經過plus.barcode可獲取條碼碼管理對象。


camera
Camera模塊管理設備的攝像頭，可用於拍照、攝像操做，經過plus.camera獲取攝像頭管理對象。

contacts
Contacts模塊管理系統通信錄，用於可對系統通信錄進行增、刪、改、查等操做。經過plus.contacts獲取系統通信錄管理對象。

device
Device模塊管理設備信息，用於獲取手機設備的相關信息，如IMEI、IMSI、型號、廠商等。經過plus.device獲取設備信息管理對象。

downloader
ownloader模塊管理網絡文件下載任務，用於從服務器下載各類文件，並支持跨域訪問操做。經過plus.downloader獲取下載管理對象。Downloader下載使用HTTP的GET/POST方式請求下載文件，符合標準HTTP/HTTPS傳輸協議。

Events
Events模塊管理客戶端事件，包括系統事件，如擴展API加載完畢、程序先後臺切換等。

fingerprint
Fingerprint模塊管理指紋識別。

gallery
Gallery模塊管理系統相冊，支持從相冊中選擇圖片或視頻文件、保存圖片或視頻文件到相冊等功能。經過plus.gallery獲取相冊管理對象。


geolocation
Geolocation模塊管理設備位置信息，用於獲取地理位置信息，如經度、緯度等。經過plus.geolocation可獲取設備位置管理對象。雖然W3C已經提供標準API獲取位置信息，但在某些平臺存在差別或未實現，爲了保持各平臺的統一性，定義此規範接口獲取位置信息。

ibeacon
iBeacon模塊用於搜索附件的iBeacon設備（*請使用HBuilderX並更新到最新版本*）




io
IO模塊管理本地文件系統，用於對文件系統的目錄瀏覽、文件的讀取、文件的寫入等操做。經過plus.io可獲取文件系統管理對象。


key
Key管理設備按鍵事件


maps
Maps模塊管理地圖控件，用於在web頁面中顯示地圖控件，提供各類接口操做地圖控件，如添加標點、路線等。經過plus.maps可獲取地圖管理對象。

messaging
Messaging模塊管理設備通信功能，可用於短信、彩信、郵件發送等。經過plus.messaging可獲取設備通信管理對象。另外也能夠直接經過html中的href直接快速發送短信、撥打電話、發送郵件等。


nativeObj
nativeObj管理系統原生對象。

nativeUI
nativeUI管理系統原生界面，可用於彈出系統原生提示對話框窗口、時間日期選擇對話框、等待對話框等。

navigator
navigator用於管理瀏覽器運行環境信息

oauth
OAuth模塊管理客戶端的用戶登陸受權驗證功能，容許應用訪問第三方平臺的資源。

orientation
Orientation模塊管理設備的方向信息，包括alpha、beta、gamma三個方向信息，經過plus.orientation可獲取設備方向管理對象。

payment
Payment模塊管理支付功能，用於提供網頁安全支付能力，支持經過Web接口進行支付操做。經過plus.payment可獲取支付管理對象。

proximity
Proximity模塊管理設備距離傳感器，可獲取當前設備的接近距離信息，經過plus.proximity可獲取設備距離傳感管理對象。

push
Push模塊管理推送消息功能，能夠實如今線、離線的消息推送，經過plus.push可獲取推送消息管理對象。

runtime
Runtime模塊管理運行環境，可用於獲取當前運行環境信息、與其它程序進行通信等。經過plus.runtime可獲取運行環境管理對象。


share
Share模塊管理客戶端的社交分享功能，提供調用終端社交軟件的分享能力。經過plus.share可獲取社交分享管理對象。

speech
Speech模塊管理語音輸入功能，提供語音識別功能，可支持用戶經過麥克風設備進行語音輸入內容。經過plus.speech可獲取語音輸入管理對象。

statistic

Statistic模塊管理統計功能，用於提供應用內統計的能力，支持統計和分析用戶屬性和用戶行爲數據。經過plus.statistic可獲取統計管理對象。



storage
Storage模塊管理應用本地數據存儲區，用於應用數據的保存和讀取。應用本地數據與localStorage、sessionStorage的區別在於數據有效域不一樣，前者可在應用內跨域操做，數據存儲期是持久化的，而且沒有容量限制。經過plus.storage可獲取應用本地數據管理對象。

uploader
Uploader模塊管理網絡上傳任務，用於從本地上傳各類文件到服務器，並支持跨域訪問操做。經過plus.uploader可獲取上傳管理對象。Uploader上傳使用HTTP的POST方式提交數據，數據格式符合Multipart/form-data規範，即rfc1867（Form-based File Upload in HTML）協議。

video
Video模塊管理多媒體視頻相關能力，可用建立視頻播放控件，直播推流控件等

webview
Webview模塊管理應用窗口界面，實現多窗口的邏輯控制管理操做。經過plus.webview可獲取應用界面管理對象。

net
XMLHttpRequest模塊管理網絡請求，與標準HTML中的XMLHttpRequest用途一致，差異在於前者能夠進行跨域訪問。經過plus.net可獲取網絡請求管理對象。

zip
Zip模塊管理文件壓縮和解壓，經過plus.zip可獲取壓縮管理對象。

寫在最後，本人qq：421217189，歡迎大佬指教

相關標籤/搜索

每日一句

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