H5+ API详解之设备信息、电话、唤醒、震动、网络及事件

这是H5+ API详解的地址,http://www.hcoder.net/tutorials/info_97.html
最近有点事就看了这几个,更多的就去这个↑↑↑网站看教程,讲的都很详细,不懂的可以去百度一下应该可以解决你的问题。
接下来说说标题上的这些API

H5+ 介绍

首先,请原谅我复制他们的介绍

HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载。
业内之前有phonegap/Cordova方案,但是他们自带js api太少了,扩展api需要用原生语言开发,更致命的是这类方案的性能不足。
封装成跨平台的HTML5plus规范,并将规范公开于 www.HTML5plus.org,不做厂商私有API。包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API,可以方便简单的编写,并且可跨平台。

获取设备信息

这些 alert 都是我自己测试过的API(只是iPhone,本人没有安卓机所以没有测试,看来是时候入手安卓机了),想要测试的朋友直接复制👇我已经写好的 alert 就行

imei: 设备的国际移动设备身份码
alert('获取设备的国际移动设备身份码:'+plus.device.imei+'; \n 由于iPhone不允许过去身份码,所以只能获取安卓的!');

imsi: 设备的国际移动用户识别码
alert('获取设备的国际移动用户识别码:'+plus.device.imsi+'; \n 由于iPhone不允许过去识别码,所以只能获取安卓的!');

model: 设备的型号
alert('获取设备的型号:'+plus.device.model);

vendor: 设备的生产厂商
alert('获取设备的生产厂商:'+plus.device.vendor);

uuid: 设备的唯一标识
alert('获取设备的唯一标识:'+plus.device.uuid);

* OS 底层系统信息

language: 系统语言信息
alert('获取设备的系统语言信息:'+plus.os.language);

version: 系统版本信息
alert('获取设备的系统版本信息:'+plus.os.version);

name: 系统的名称
alert('获取设备的系统名称:'+plus.os.name);

vendor: 系统的供应商信息
alert('获取设备的系统供应商信息:'+plus.os.vendor);

Screen模块管理设备屏幕信息

resolutionHeight: 设备屏幕高度分辨率

设备屏幕区域包括系统状态栏显示区域和应用显示区域,screen获取的是设备屏幕总区域的逻辑分辨率,单位为px。 如果需要获取实际分辨率则需要乘以比例值scale。

获取高度

alert('设备屏幕高度分辨率 resolutionHeight: '+plus.screen.resolutionHeight);

获取屏幕高度比例值

alert('设备屏幕高度比例值 scale: '+plus.screen.scale);

同时使用高度和比例值

alert('设备屏幕高度实际分辨率则需要乘以scale,所以 resolutionHeight*scale=: '+plus.screen.resolutionHeight * plus.screen.scale+'px');

resolutionWidth: 设备屏幕宽度分辨率

设备屏幕区域包括系统状态栏显示区域和应用显示区域,screen获取的是设备屏幕总区域的分辨率,单位为px。 如果需要获取实际分辨率则需要乘以比例值scale。

获取宽度

alert('设备屏幕宽度分辨率 resolutionWidth: '+plus.screen.resolutionWidth);

获取宽度比例值

alert('设备屏幕宽度比例值 scale: '+plus.screen.scale);

同时使用宽度和比例值

alert('设备屏幕宽度实际分辨率则需要乘以scale,所以 resolutionWidth*scale=: '+plus.screen.resolutionWidth * plus.screen.scale+'px');

scale: 逻辑分辨率与实际分辨率的比例

Display模块管理应用可使用的显示区域信息

应用可使用的屏幕高度逻辑分辨率

使用display获取的高度比下面使用screen获取的高度少20,那是因为手机屏幕顶部有20的状态栏,也就是4G、WiFi、电池等标志所显示的区域

获取高度

alert('设备屏幕可使用高度逻辑分辨: ' + plus.display.resolutionHeight);

获取宽度

alert('设备屏幕可使用宽度逻辑分辨: ' + plus.display.resolutionWidth);

屏幕亮度

 //获取亮度0 - 1之间的数值
plus.screen.getBrightness();
//设置
plus.screen.setBrightness( 0.5 );

 //使用range滑块设置屏幕亮度的实例
<div class="mui-content">
    <div style="height:50px;"></div>
    <div style="padding:20px;">
        <div class="mui-input-row mui-input-range">
            <label>Range</label>
            <input type="range" min="0" max="100" value="1" onchange="setLight(this.value);">
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
mui.init();
function setLight(val){
    plus.screen.setBrightness(val/100);
}
</script>

下面是我写的小功能

//这是控件,所绑定的事件类型是 oninput 可以实时监控

//这是控件
<div style="padding:20px;">
    <label id="la">0</label>
    <div class="mui-input-row mui-input-range" style="margin-top: 10px;">
        <label>Range</label>
        <input id="in" type="range" min="0" max="100000" value="0" oninput="setLight(this.value);">
    </div>
</div>

//这是JS代码,代码分为获取手机屏幕亮度值并赋值给控件、设置滑块位置
第二部分是点击手动滑块来控制调节屏幕亮度

//调节屏幕亮度
var ints = 100000;
//获取手机屏亮度,并设置滑块的位置
var a = plus.screen.getBrightness();
plus.screen.setBrightness(a);
document.getElementById('la').innerHTML = a;
document.getElementById('in').value = a * ints;
                        
//手动调节屏幕亮度
function setLight(val) {
    plus.screen.setBrightness(val / ints);
    document.getElementById('la').innerHTML = val / ints;
}

屏幕方向

锁定屏幕方向

void plus.screen.lockOrientation( String orientation );
//参数
orientation: ( String ) 必选 要锁定的屏幕方向值
锁定屏幕方向可取以下值: 
"portrait-primary": 竖屏正方向; 
"portrait-secondary": 竖屏反方向,屏幕正方向按顺时针旋转180°; 
"landscape-primary": 横屏正方向,屏幕正方向按顺时针旋转90°; 
"landscape-secondary": 横屏方向,屏幕正方向按顺时针旋转270°; 
"portrait": 竖屏正方向或反方向,根据设备重力感应器自动调整;
"landscape": 横屏正方向或反方向,根据设备重力感应器自动调整;

//使用:锁定屏幕方向
void plus.screen.lockOrientation("landscape");

解除锁定屏幕方向

void plus.screen.unlockOrientation();

拨打电话

参数:
number: ( String ) 必选 要拨打的电话号码
confirm: ( Boolean ) 可选 是否需要用户确认后开始拨打电话
设置为true表示打开系统拨打电话界面,需用户点击拨号按钮后才开始拨打电话,false则无需确认直接拨打电话,默认值为true
iPhone手机默认是必须确认 呼叫 才可以打电话。
返回值:
void : 无
平台支持:
Android - 2.2+ (支持),iOS - 5.1+ (支持): 忽略confirm参数,调用直接拨打电话。

function dial(){
    plus.device.dial('114', true);
}

保持屏幕唤醒

参数:
lock: ( Boolean ) 必选 是否设置程序一直保持唤醒状态
可取值true或false,true表示设定程序一直保持唤醒状态,false表示关闭程序一直保持唤醒状态。程序退出后将恢复默认状态,默认为关闭程序保持唤醒状态。

plus.device.setWakelock( lock );

isWakelock 获取程序是否一直保持唤醒(屏幕常亮)状态

/****
 * 下面这个判断是与上面那一句代码相辅相成的
* ***/
if(plus.device.isWakelock()) {
    alert('屏幕保存唤醒状态');
} else {
    alert('no');
}

设备震动

plus.device.vibrate( milliseconds );

参数:
milliseconds: ( Number ) 必选 设备振动持续的时间
数值类型,单位为ms,默认为500ms。iOS只能震动一次,安卓未测试

//plus调用
plus.device.vibrate( 500 );
plus.device.vibrate([500, 300, 400, 300]);

//window调用
window.vibrate([3000,2000,1000,2000,1000,2000,1000]);

网络及网络状态获取

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。

  • 使用网络前建议先判断网络情况
document.addEventListener("netchange", function() {
                var nt = plus.networkinfo.getCurrentType();
                switch(nt) {
                    case plus.networkinfo.CONNECTION_ETHERNET:
                    case plus.networkinfo.CONNECTION_WIFI:
                        alert("切换到wifi!");
                        break;
                    case plus.networkinfo.CONNECTION_CELL2G:
                        alert("切换到2G网络!");
                        break;
                    case plus.networkinfo.CONNECTION_CELL3G:
                        alert("切换到3G网络!");
                        break;
        case plus.networkinfo.CONNECTION_CELL4G:
            alert("切换到4G网络!");
            break;
        default:
                alert("无网络!");
                break;
    }
}, false);

事件相关(窗口事件及原生dom事件)

原生dom事件没有写

//addEventListener 添加事件监听函数
            /*
             * 参数:
                event: ( DOMString ) 必选 要添加监听的事件类型,可取下面面列出的所有事件常量
                callback: ( EventTrigCallback ) 必选 扩展API加载完毕触发的回调函数
                capture: ( Boolean ) 可选 事件流捕获顺序,可忽略
                
               事件常量
                "plusready": 扩展API加载完成事件
                "pause": 运行环境从前台切换到后台事件
                "resume": 运行环境从后台切换到前台事件
                "netchange": 设备网络状态变化事件
                "newintent": 新意图事件
                "plusscrollbottom": 窗口滚动到底部事件
                "error": 页面加载错误事件

             */

            //plusready:扩展API加载完成事件
            /*
             * plusready:是指每次APP进入界面都会第一时间触发,如果它前面没有代码时,会被第一时间被触发
             * 所有预加载的方法可以放到这个事件中。
             * 注意:按钮或者点击事件就不用写在此方法内,因为按钮事件是点击之后才会触发自身的事件
             */
            document.addEventListener('plusready', function() {

                console.log("第一时间触发");
                //pause:监听APP是否进入后台
                document.addEventListener('pause', function() {
                    /*
                     * pause:是指当APP进入后台运行时,才会触发;
                     * 例如,当前运行的是APP-1,在你回到桌面时,这个APP-1的pause监听事件才会被触发此方法
                     */
                    console.log("切换到进入后台");
                });
                //resume:监听APP是否从后台切换到前台(就是当前运行)
                document.addEventListener('resume', function() {
                    /*
                     * resume:是指APP从后台运行进入当前运行;
                     * 例如,APP-1处于后台运行,当APP-1切换到当前运行时,才会被触发此方法
                     * 作用:可以作为唤醒APP时,请求数据或者刷新数据
                     */
                    console.log("切换到当前运行");
                });
                //plusscrollbottom:界面向上↑滑动
                document.addEventListener('plusscrollbottom', function() {
                    /*
                     * plusscrollbottom:是指界面向上↑滑动到底后才会被触发此方法
                     * 适用于上拉刷新或加载更多功能
                     */
                    console.log("已经向上滑动到底了");
                });
                
            }, false);

目前只有这几个API,过段时间在把这些看完,并接着再写几篇其他API。

希望能帮助到一些初学者,如想自己看API详解,请前往此网页查看,

http://www.hcoder.net/tutorials/info_97.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容