本文详细介绍H5+移动端开发的基础知识，包括扩展API加载、设备信息获取、屏幕管理等功能，以及如何使用nativeUI实现系统级交互，如弹窗、提示、等待对话框等。
写在前面
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)
扫一扫
5590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
