美文网首页移动端h5开发H5前端技术分享H5学习笔记
H5+ API详解之设备信息、电话、唤醒、震动、网络及事件

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

作者: 我常常问自己我是谁 | 来源:发表于2019-01-02 14:14 被阅读3次

    这是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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/kwbalqtx.html