H5+ App基礎(chǔ)

HTML5 Plus移動(dòng)App，簡(jiǎn)稱5+App，是一種基于HTML、JS、CSS編寫的運(yùn)行于手機(jī)端的App，這種App可以通過擴(kuò)展的JS API任意調(diào)用手機(jī)的原生能力，實(shí)現(xiàn)與原生App同樣強(qiáng)大的功能和性能。

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

HBuilderX

創(chuàng)建應(yīng)用

  • 啟動(dòng)HBuilderX，在菜單欄中選擇“文件”-> “新建”->“項(xiàng)目”
  • 選擇5+App，在應(yīng)用名稱中輸入項(xiàng)目名稱，選擇項(xiàng)目目錄，選擇默認(rèn)模板
  • 點(diǎn)擊創(chuàng)建
step1.png

調(diào)用API

對(duì)于HTML5+應(yīng)用的頁面有一個(gè)很重要的“plusready”事件，此事件會(huì)在頁面加載后自動(dòng)觸發(fā)，表示所有HTML5+ API可以使用，在此事件觸發(fā)之前不能調(diào)用HTML5+ API，所以應(yīng)該在此事件回調(diào)函數(shù)中調(diào)用頁面初始化需要調(diào)用的HTML5+ API，而不應(yīng)該在onload或DOMContentLoaded事件中調(diào)用

<!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">   
// 擴(kuò)展API是否準(zhǔn)備好，如果沒有則監(jiān)聽“plusready"事件  
if(window.plus){  
    plusReady();  
}else{   
    document.addEventListener( "plusready", plusReady, false );  
}  
// 擴(kuò)展API準(zhǔn)備完成后要執(zhí)行的操作  
function plusReady(){    
    // 輸出設(shè)備的生產(chǎn)廠商
    document.querySelector('#vendor').innerText = plus.device.vendor
}  
    </script>   
</head>   
<body>
    <p>設(shè)備廠商：<span id="vendor"></span></p>
</body>  
</html>

device

Device模塊管理設(shè)備信息，用于獲取手機(jī)設(shè)備的相關(guān)信息，如IMEI、IMSI、型號(hào)、廠商等。通過plus.device獲取設(shè)備信息管理對(duì)象。

常用屬性

  • imei: 設(shè)備的國(guó)際移動(dòng)設(shè)備身份碼
  • imsi: 設(shè)備的國(guó)際移動(dòng)用戶識(shí)別碼
  • model: 設(shè)備的型號(hào)
  • vendor: 設(shè)備的生產(chǎn)廠商
  • uuid: 設(shè)備的唯一標(biāo)識(shí)
  • networkinfo: 用于獲取網(wǎng)絡(luò)信息

networkinfo是一個(gè)對(duì)象

    //設(shè)備的國(guó)際移動(dòng)設(shè)備身份碼
    plus.device.imei
    
    //設(shè)備的網(wǎng)絡(luò)信息
    plus.networkinfo

runtime

Runtime模塊管理運(yùn)行環(huán)境，可用于獲取當(dāng)前運(yùn)行環(huán)境信息、與其它程序進(jìn)行通訊等。通過plus.runtime可獲取運(yùn)行環(huán)境管理對(duì)象。

常用方法

  • restart: 重啟
  • quit：退出
    // 重啟APP
    plus.runtime.restart()
    
    // 退出APP
    plus.runtime.quit()

camera

Camera模塊管理設(shè)備的攝像頭，可用于拍照、攝像操作，通過plus.camera獲取攝像頭管理對(duì)象。

拍照

// getCamera返回獲取攝像頭管理對(duì)象，調(diào)用該對(duì)象的captureImage方法進(jìn)行拍照操作，該方法接受3個(gè)參數(shù)，1.成功的回調(diào)函數(shù)，有一個(gè)路徑參數(shù)，必選 2.失敗的回調(diào)函數(shù)  3. 攝像頭拍照參數(shù)
plus.camera.getCamera().captureImage((path) => {
    // ...code
})

gallery

Gallery模塊管理系統(tǒng)相冊(cè)，支持從相冊(cè)中選擇圖片或視頻文件、保存圖片或視頻文件到相冊(cè)等功能。通過plus.gallery獲取相冊(cè)管理對(duì)象。

常用方法

  • pick: 從系統(tǒng)相冊(cè)選擇文件（圖片或視頻）
  • save: 保存文件到系統(tǒng)相冊(cè)中
// 從相冊(cè)中選擇圖片 
function galleryImg() {
    // 從相冊(cè)中選擇圖片
    console.log("從相冊(cè)中選擇圖片:");
    plus.gallery.pick( function(path){
        console.log(path);
    }, function ( e ) {
        console.log( "取消選擇圖片" );
    }, {filter:"image"} );
}

// 保存圖片到相冊(cè)中 
function savePicture() {
    plus.gallery.save( "_doc/img.jpg", function () {
        alert( "保存圖片到相冊(cè)成功" );
    } );
}

nativeUI

nativeUI管理系統(tǒng)原生界面，可用于彈出系統(tǒng)原生提示對(duì)話框窗口、時(shí)間日期選擇對(duì)話框、等待對(duì)話框等。

常用方法

  • alert: 彈出系統(tǒng)提示對(duì)話框
  • confirm: 彈出系統(tǒng)確認(rèn)對(duì)話框
  • previewImage: 預(yù)覽圖片
  • showWaiting: 顯示系統(tǒng)等待對(duì)話框
  • pickDate: 彈出系統(tǒng)日期選擇對(duì)話框
  • pickTime: 彈出系統(tǒng)時(shí)間選擇對(duì)話框
  • prompt: 彈出系統(tǒng)輸入對(duì)話框
  • toast: 顯示自動(dòng)消失的提示消息
<script>
    function wait() {
        let w = plus.nativeUI.showWaiting('正在等待系統(tǒng)響應(yīng)');
        setTimeout(() => {
            w.close()
        }, 2000)
    }
</script>

<button onclick="wait()">系統(tǒng)等待</button>

<button onclick="plus.nativeUI.toast('歡迎')">Toast輕提示</button>

<button onclick="plus.nativeUI.alert('警告彈窗？',function () {},'Alert警告','關(guān)閉警告')">Alert警告</button>

<button onclick="plus.nativeUI.confirm('今天天氣不錯(cuò)！')">confirm對(duì)話框</button>

<button onclick="plus.nativeUI.prompt('請(qǐng)輸入內(nèi)容')">prompt輸入框</button>

<button onclick="plus.nativeUI.previewImage(['https://i.loli.net/2020/02/20/koUiZ8OCDabPhYt.jpg'])">預(yù)覽圖片</button>

<button onclick="plus.nativeUI.pickDate((e) => {plus.nativeUI.toast(e.date)})">選擇日期</button>

<button onclick="plus.nativeUI.pickTime((e) => {plus.nativeUI.toast(e.date)})">選擇時(shí)間</button>

webview

Webview模塊管理應(yīng)用窗口界面，實(shí)現(xiàn)多窗口的邏輯控制管理操作。通過plus.webview可獲取應(yīng)用界面管理對(duì)象。

常用方法

  • close: 關(guān)閉Webview窗口
  • create: 創(chuàng)建新的Webview窗口
  • currentWebview: 獲取當(dāng)前窗口的WebviewObject對(duì)象
    // 獲取當(dāng)前Webview窗口對(duì)象
    var ws=plus.webview.currentWebview();
    console.log( "當(dāng)前Webview窗口："+ws.getURL() );
    
    // 創(chuàng)建并顯示新窗口
    var w = plus.webview.create('https://aiav.vip');
    w.show(); // 顯示窗口
    
    // 關(guān)閉Webview窗口

    var ws=plus.webview.currentWebview();
    plus.webview.close(ws);

完整API詳情請(qǐng)查看官方API文檔

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容