H5+ 常用API
阿新 • • 發佈:2019-02-06
寫在前面
H5+ 所有功能都只能在 plusReady 事件載入完成後呼叫
mui.plusReady(function() { // 擴充套件API載入完成事件
var self = plus.webview.currentWebview();
mui.alert(self);
});
獲取裝置資訊
// mui.alert("裝置的國際移動裝置身份碼 " + plus.device.imei);
// mui.alert("裝置的國際移動使用者識別碼 " + plus.device.imsi);
// mui.alert("裝置的型號 " + plus.device.model);
// mui.alert("裝置的唯一標識 " + plus.device.uuid);
addEventListener 新增事件監聽函式
// void document.addEventListener( event, callback, capture );
// 引數:
// event: ( DOMString ) 必選 要新增監聽的事件型別,可取下面面列出的所有事件常量
// callback: ( EventTrigCallback ) 必選 擴充套件API載入完畢觸發的回撥函式
// capture: ( Boolean ) 可選 事件流捕獲順序,可忽略
// 事件常量
// "plusready" : 擴充套件API載入完成事件
// "pause": 執行環境從前臺切換到後臺事件
// "resume": 執行環境從後臺切換到前臺事件
// "netchange": 裝置網路狀態變化事件
// "newintent": 新意圖事件
// "plusscrollbottom": 視窗滾動到底部事件
// "error": 頁面載入錯誤事件
// mui.plusReady(function (){
// document.addEventListener('pause',function(){
// mui.toast('app 在後端執行');
// },false)
// document.addEventListener('resume',function(){
// mui.toast('app 在前端端執行');
// ,false)
// });
// 原生dom事件
// 1、利用dom元素的 onclick="" 屬性
//HTML程式碼 <input type="button" id="btn" value="test" onclick="test();"></input>
//js程式碼 function test(){alert(1);
// 2、獲取dom物件,從寫dom元素的 onclick 方法
//HTML程式碼 <input type="button" id="btn" value="test"></input>
//js程式碼
// document.addEventListener('plusready', function(){
// var btn = document.getElementById('btn');
// btn.onclick = function(){alert(1);}
// });
// 3、a 元素的href屬性
//HTML程式碼 <a href="javascript:test();">test</a>
//js程式碼 function test(){alert(1);}
螢幕亮度
// 獲取螢幕亮度 0 - 1之間的數值
// plus.screen.getBrightness();
// 設定螢幕亮度
// plus.screen.setBrightness( 0.5 );
保持螢幕喚醒
// plus.device.setWakelock( lock );
// 引數:
// lock: ( Boolean ) 必選 是否設定程式一直保持喚醒狀態
// 可取值true或false,true表示設定程式一直保持喚醒狀態,false表示關閉程式一直保持喚醒狀態。程式退出後將恢復預設狀態,預設為關閉程式保持喚醒狀態。
// plus.device.setWakelock(true);
// isWakelock 獲取程式是否一直保持喚醒(螢幕常亮)狀態
// if(plus.device.isWakelock()){
// mui.toast('螢幕一直保持喚醒');
// }else{
// mui.toast('螢幕一定時間不操作會鎖屏哦');
// }
螢幕方向
// 鎖定螢幕方向
// void plus.screen.lockOrientation("landscape-primary");
//引數
// orientation: ( String ) 必選 要鎖定的螢幕方向值
// 鎖定螢幕方向可取以下值:
// "portrait-primary": 豎屏正方向;
// "portrait-secondary": 豎屏反方向,螢幕正方向按順時針旋轉180°;
// "landscape-primary": 橫屏正方向,螢幕正方向按順時針旋轉90°;
// "landscape-secondary": 橫屏方向,螢幕正方向按順時針旋轉270°;
// "portrait": 豎屏正方向或反方向,根據裝置重力感應器自動調整;
// "landscape": 橫屏正方向或反方向,根據裝置重力感應器自動調整;
// 解除鎖定螢幕方向
// void plus.screen.unlockOrientation();
獲取裝置資訊
// mui.alert("裝置的國際移動裝置身份碼 " + plus.device.imei);
// mui.alert("裝置的國際移動使用者識別碼 " + plus.device.imsi);
// mui.alert("裝置的型號 " + plus.device.model);
// mui.alert("裝置的唯一標識 " + plus.device.uuid);
OS 底層系統資訊:
// mui.alert("系統語言資訊 " + plus.os.language);
// mui.alert("系統版本資訊 " + plus.os.version);
// mui.alert("系統的名稱 " + plus.os.version);
// mui.alert("系統的供應商資訊 " + plus.os.vendor);
Screen模組管理裝置螢幕資訊:
// 1. resolutionHeight: 裝置螢幕高度解析度
// 裝置螢幕區域包括系統狀態列顯示區域和應用顯示區域,screen獲取的是裝置螢幕總區域的邏輯解析度,單位為px。 如果需要獲取實際解析度則需要乘以比例值scale。
// mui.alert("Screen height: " + (plus.screen.resolutionHeight * plus.screen.scale) + "px" );
// 2. resolutionWidth: 裝置螢幕寬度解析度
// 裝置螢幕區域包括系統狀態列顯示區域和應用顯示區域,screen獲取的是裝置螢幕總區域的解析度,單位為px。 如果需要獲取實際解析度則需要乘以比例值scale。
// mui.alert( "Screen width: " + (plus.screen.resolutionWidth * plus.screen.scale) + "px" );
// 3. scale: 邏輯解析度與實際解析度的比例
// mui.alert("邏輯解析度與實際解析度的比例 "+ plus.screen.scale);
// Display模組管理應用可使用的顯示區域資訊:
// 應用可使用的螢幕高度邏輯解析度 plus.display.resolutionHeight;
// 應用可使用的螢幕寬度邏輯解析度 plus.display.resolutionWidth;
撥打電話
// plus.device.dial(number, true);
// 引數一(String)——必選 ,要撥打的電話號碼 引數二(Boolean )——可選,是否需要使用者確認後開始撥打電話
// 設定為true表示開啟系統撥打電話介面,需使用者點選撥號按鈕後才開始撥打電話,false則無需確認直接撥打電話,預設值為true。
// 返回值:
// void : 無
// 平臺支援: Android - 2.2+ (支援),iOS - 5.1+ (支援): 忽略confirm引數,呼叫直接撥打電話。
// plus.device.dial('10086', false);
裝置震動
// plus.device.vibrate( milliseconds );
// 引數:
// milliseconds: ( Number ) 必選 裝置振動持續的時間
// 數值型別,單位為ms,預設為500ms。
// plus.device.vibrate(600);
Device模組用於獲取網路資訊
// 常量:
// CONNECTION_UNKNOW: 網路狀態常量,表示當前裝置網路狀態未知,固定值為0。
// CONNECTION_NONE: 網路狀態常量,當前裝置網路未連線網路,固定值為1。
// CONNECTION_ETHERNET: 網路狀態常量,當前裝置連線到有線網路,固定值為2。
// CONNECTION_WIFI: 網路狀態常量,當前裝置連線到無線WIFI網路,固定值為3。
// CONNECTION_CELL2G: 網路狀態常量,當前裝置連線到蜂窩移動2G網路,固定值為4。
// CONNECTION_CELL3G: 網路狀態常量,當前裝置連線到蜂窩移動3G網路,固定值為5。
// CONNECTION_CELL4G: 網路狀態常量,當前裝置連線到蜂窩移動4G網路,固定值為6。
// 使用getCurrentType函式獲取裝置當前連線的網路型別
// plus.networkinfo.getCurrentType();
// 檢測網路狀態變化
// mui.plusReady(function(){
// document.addEventListener("netchange", function(){
// var nt = plus.networkinfo.getCurrentType();
// switch ( nt ) {
// case plus.networkinfo.CONNECTION_ETHERNET:
// case plus.networkinfo.CONNECTION_WIFI:
// mui.alert("切換到wifi!");
// break;
// case plus.networkinfo.CONNECTION_CELL2G:
// case plus.networkinfo.CONNECTION_CELL3G:
// case plus.networkinfo.CONNECTION_CELL4G:
// mui.alert("切換到4G網路!");
// break;
// default:
// mui.alert("無網路!");
// break;
// }
// }, false );
// });
nativeUI系統原生介面管理
// 1、actionSheet: 彈出系統選擇按鈕框
// void plus.nativeUI.actionSheet( actionsheetStyle, actionsheetCallback );
// 說明:從底部動畫彈出系統樣式選擇按鈕框,可設定選擇框的標題、按鈕文字等。 彈出的提示框為非阻塞模式,使用者點選選擇框上的按鈕後關閉,並通過actionsheetCallback回撥函式通知使用者選擇的按鈕。
// 引數:
// actionsheetStyle: ( ActionSheetStyle ) 必選 選擇按鈕框顯示的樣式
// actionsheetCallback: ( ActionSheetCallback ) 可選 選擇按鈕框關閉後的回撥函式
// plus.nativeUI.actionSheet( {title:"test",cancel:"取消",buttons:[{title:"1"},{title:"2"}]}, function(e){
// // e.index 代表選擇按鈕的序列號
// console.log( "User pressed: "+e.index );
// });
// 2、alert彈出系統提示對話方塊
// void plus.nativeUI.alert( message, alertCB, title, buttonCapture );
// 說明:建立並顯示系統樣式提示對話方塊,可設定提示對話方塊的標題、內容、按鈕文字等。 彈出的提示對話方塊為非阻塞模式,使用者點選提示對話方塊上的按鈕後關閉,並通過alertCB回撥函式通知對話方塊已關閉。
// 引數:
// message: ( String ) 必選 提示對話方塊上顯示的內容
// alertCB: ( AlertCallback ) 可選 提示對話方塊上關閉後的回撥函式
// title: ( String ) 可選 提示對話方塊上顯示的標題
// buttonCapture: ( String ) 必選 提示對話方塊上按鈕顯示的內容
// plus.nativeUI.alert('hi boy!',function(){},'test','確定');
// 3、confirm 彈出系統確認對話方塊
// void plus.nativeUI.confirm( message, confirmCB, title, buttons );
// 說明:建立並顯示系統樣式確認對話方塊,可設定確認對話方塊的標題、內容、按鈕數目及其文字。 彈出的確認對話方塊為非阻塞模式,使用者點選確認對話方塊上的按鈕後關閉,並通過confirmCB回撥函式通知使用者點選的按鈕索引值。
// 引數:
// message: ( String ) 必選 確認對話方塊上顯示的內容
// confirmCB: ( ConfirmCallback ) 可選 確認對話方塊關閉後的回撥函式 回撥函式中包括Event引數,可通過其index屬性(Number型別)獲取使用者點選按鈕的索引值。
// title: ( String ) 可選 確認對話方塊上顯示的標題
// buttons: ( Array[ String ] ) 可選 確認對話方塊上顯示的按鈕 字串陣列,每項對應在確認對話方塊上顯示一個按鈕,使用者點選後通過confirmCB返回使用者點選按鈕的在陣列中的索引值。
// plus.nativeUI.confirm('確定要刪除嗎?',function(e){
// if(e.index == 1){
// alert('yes');
// }
// },'提示', ['否','是0']);
// 4、loading等待對話方塊
// closeWaiting: 關閉系統等待對話方塊
// showWaiting: 顯示系統等待對話方塊
// var w = plus.nativeUI.showWaiting();
// setTimeout(function (){
// w.close();//或者plus.nativeUI.closeWaiting();
// }, 3000);
// 5、prompt 彈出系統輸入對話方塊
// void plus.nativeUI.prompt( message, promptCB, title, tip, buttons );
// 說明:建立並顯示系統樣式輸入對話方塊,可設定輸入對話方塊的標題、內容、提示輸入資訊、按鈕數目及其文字。 彈出的輸入對話方塊為非阻塞模式,其中包含編輯框供使用者輸入內容,使用者點選輸入對話方塊上的按鈕後自動關閉,並通過promptCB回撥函式返回使用者點選的按鈕及輸入的內容。
// 引數:
// message: ( String ) 必選 輸入對話方塊上顯示的內容
// promptCB: ( PromptCallback ) 可選 關閉輸入對話方塊的回撥函式 回撥函式中包括Event引數,可通過其index屬性(Number型別)獲取使用者點選按鈕的索引值,通過其value屬性(String型別)獲取使用者輸入的內容。
// title: ( String ) 可選 輸入對話方塊上顯示的標題
// tip: ( String ) 可選 輸入對話方塊上編輯框顯示的提示文字
// buttons: ( Array[ String ] ) 可選 輸入對話方塊上顯示的按鈕陣列
// plus.nativeUI.prompt('您的姓名',function(e){
// //可通過event.index(Number型別)獲取使用者關閉輸入對話方塊點選按鈕的索引值,索引值從0開始
// //通過event.value(String型別)獲取使用者輸入的內容,如果沒有輸入則返回空字串。
// if(e.index == 0){
// alert(e.value);
// }
// },'hcoder','請輸入...',['提交','取消']);
// 6、toast顯示自動消失的提示訊息
// void plus.nativeUI.toast( message, options );
// 說明: 建立並顯示系統樣式提示訊息,彈出的提示訊息為非阻塞模式,顯示指定時間後自動消失。 提示訊息顯示時間可通過options的duration屬性控制,長時間提示訊息顯示時間約為3.5s,短時間提示訊息顯示時間約為2s。
// 引數:
// message: ( String ) 必選 提示訊息上顯示的文字內容
// options: ( ToastOption ) 可選 提示訊息的引數 可設定提示訊息顯示的圖示、持續時間、位置等。
// plus.nativeUI.toast("我會自動離開",{
// align: "center", // 提示訊息框在螢幕中的水平位置 "left"、"center"、"right"
// duration: "long", // 提示訊息框顯示的時間 "long"、"short",值為"long"時顯示時間約為3.5s,值為"short"時顯示時間約為2s,未設定時預設值為"short"。
// icon: 'images/60x60.gif', // 提示訊息框上顯示的圖示
// style: "inline", // 提示訊息框上顯示的樣式 "block"表示圖示與文字分兩行顯示,上面顯示圖示,下面顯示文字; "inline"表示圖示與文字在同一行顯示,左邊顯示圖示,右邊顯示文字。 預設值為"block"。
// type: 'text', // "text" - 顯示的訊息內容為文字字串; "richtext" - 顯示的訊息內容為富文字內容。 預設值為"text"。
// richTextStyle: {
// align:'center'
// }, // 富文字樣式
// verticalAlign: "bottom" // 提示訊息在螢幕中的垂直位置 可選值為"top"、"center"、"bottom",分別為垂直居頂、居中、居底,未設定時預設值為"bottom"。
// });
// 7、根據手冊改造loading
// 手冊地址:http://www.html5plus.org/doc/zh_cn/nativeui.html
// plus.nativeUI.showWaiting('載入中...',{padding:'10px', loading:{display:'inline'}});
// – storage本地資料儲存
// Storage模組管理應用本地資料儲存區,用於應用資料的儲存和讀取。應用本地資料與localStorage、sessionStorage的區別在於資料有效域不同,前者可在應用內跨域操作,資料儲存期是持久化的,並且沒有容量限制。通過plus.storage可獲取應用本地資料管理物件。
// getLength: 獲取應用儲存區中儲存的鍵值對的個數
// var total = plus.storage.getLength();
// alert(total);
// setItem: 修改或新增鍵值(key-value)對資料到應用資料儲存中
// plus.storage.setItem('name','和大喵!');
// getItem: 通過鍵(key)檢索獲取應用儲存的值
// var name = plus.storage.getItem('name');
// mui.toast(name);
// removeItem: 通過key值刪除鍵值對儲存的資料
// plus.storage.removeItem('name');
// clear: 清除應用所有的鍵值對儲存資料
// plus.storage.clear();
// createPlayer()建立音訊物件
// var player = plus.audio.createPlayer('_www/audios/1.mp3');
//
// player.play(function(){
// //播放完畢
// alert("Audio play success !!");
// }, function (e){
// alert("Audio play error: " + e.message);
// });
//
// // stop: 停止播放音訊
// setTimeout(function () {
// player.stop();
// },10000)