HTML5+API device

Device Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI、IMSI、型号、厂商等。通过plus.device获取设备信息管理对象。

对象: networkinfo

  • networkinfo模块用于获取网络信息

networkinfo

常量

  • CONNECTION_UNKNOW: 网络连接状态未知
  • CONNECTION_NONE: 未连接网络
  • CONNECTION_ETHERNET: 有线网络
  • CONNECTION_WIFI: 无线WIFI网络
  • CONNECTION_CELL2G: 蜂窝移动2G网络
  • CONNECTION_CELL3G: 蜂窝移动3G网络
  • CONNECTION_CELL4G: 蜂窝移动4G网络

方法

  • getCurrentType: 获取设备当前连接的网络类型

演示代码

<div class="mui-content">
<button type="button" id="btn1">获取设备信息</button>
</div>
</body>
<script type="text/javascript">
mui.init();
document.getElementById("btn1").addEventListener('tap', function(){
mui.alert(plus.networkinfo.getCurrentType());
});
</script>

使用网络前建议先判断网络情况

<script type="text/javascript">
mui.init();
document.getElementById("btn1").addEventListener('tap', function(){
var connectionStatus = plus.networkinfo.getCurrentType();
if(connectionStatus == 0 || connectionStatus == 1){
mui.toast('无法连接网络');
}else if(connectionStatus == 3){
mui.toast('使用wifi');
}
//......................
});
</script>

检测网络状态变化

<script type="text/javascript">
mui.init();
mui.plusReady(function(){
document.addEventListener("netchange", function(){
var nt = plus.networkinfo.getCurrentType();
switch ( nt ) {
case plus.networkinfo.CONNECTION_ETHERNET: //网络状态常量,当前设备连接到有线网络,固定值2
case plus.networkinfo.CONNECTION_WIFI: //网络状态常量,当前设备连接到无线WIFI网络,固定值3
alert("切换到wifi!");
break;
case plus.networkinfo.CONNECTION_CELL2G: //网络状态常量,当前设备连接到蜂窝移动2G网络,固定值为4。
alert('切换到2G网络!')
case plus.networkinfo.CONNECTION_CELL3G: //网络状态常量,当前设备连接到蜂窝移动3G网络,固定值为5。
alert('切换到3G网络!')
case plus.networkinfo.CONNECTION_CELL4G: //网络状态常量,当前设备连接到蜂窝移动4G网络,固定值为6。
alert("切换到4G网络!");
break;
default:
alert("无网络!");
break;
}
}, false );
});
</script>

HTML5+ - 窗口事件及原生dom事件

addEventListener 添加事件监听函数

  • document.addEventListener(event,callback,capture);

参数

  • event: (DOMString) 必选要添加监听的事件类型,可取下面列出的所有事件常量
  • callback: (EventTrigCallback) 必选扩展API加载完毕触发的回调函数
  • capture:(Boolean) 可选 事件流捕获顺序,可忽略

事件常量

  • 'plusready': 扩展API加载完成事件
  • 'pause': 运行环境从前台切换到后台事件
  • 'resume': 运行环境从后台切换到前台事件
  • 'netchange': 设备网络状态变化事件
  • 'newintent': 新意图事件
  • 'plusscrollbottom': 窗口滚动到底部事件
  • 'error': 页面加载错误事件
  • 'background': 应用切换到后台运行事件
  • 'foreground': 应用切换到前台运行事件
  • 'trimmemory': 应用需要清理内存事件
  • 'splashclosed':应用启动界面已关闭事件

plusready: 扩展API加载完成事件

  • document.addEventListener( "plusready", plusreadyCallback, capture )

  • 说明:

      String 类型
    为了保证扩展API的有效调用,所有应用页面都会用到的重要事件。
    应用页面显示时需要首先加载扩展和API代码库,当扩展API代码库加载完成时会触发pluseready事件,
    当设备触发该事件后,用户就可以安全的调用扩展API。 如果程序中打开多个页面,每个都会收到此事件。
  • 示例:

      // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener( "plusready", onPlusReady, false );
    function onPlusReady() {
    // 扩展API加载完毕,现在可以正常调用扩展API
    }

pause: 运行环境从前台切换到后台事件

  • document.addEventListener( "pause", pauseCallback, capture );

  • 当程序从前台切换到后台时会触发此事件。 若应用需要处理从前台切换到后台的事件行为,

    可通过注册事件监听器来监听“pause”事件,此事件需要在plusready事件后通过document进行注册。

     mui.plusReady(function(){
    document.addEventListener('pause',function(){
    mui.toast('app 在后端运行');
    },false)
    });

resume: 运行环境从后台切换到前台事件

document.addEventListener( "resume", resumeCallback, capture );
mui.plusReady(function(){
document.addEventListener('pause',function(){
mui.toast('app 在后端运行');
},false);
document.addEventListener('resume',function(){
mui.toast('app 在前端端运行');
},false)
});

netchange:设备网络状态变化事件

  • document.addEventListener("netchange", netchangeCallback, capture);

  • String 类型

  • 设备网络状态发生时会触发此事件。 若应用需要处理网络状态变化的事件行为,

    可通过注册事件监听器来监听“netchange”事件,此事件需要在plusready事件后通过document进行注册

      // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    document.addEventListener("netchange", onNetChange, false);
    }
    function onNetChange(){
    var nt = plus.networkinfo.getCurrentType();
    switch (nt){
    case plus.networkinfo.CONNECTION_ETHERNET:
    case plus.networkinfo.CONNECTION_WIFI:
    alert();
    break;
    case plus.networkinfo.CONNECTION_CELL2G:
    case plus.networkinfo.CONNECTION_CELL3G:
    case plus.networkinfo.CONNECTION_CELL4G:
    alert();
    break;
    default:
    alert();
    break;
    }
    }

newintent:新意图事件

  • document.addEventListener("newintent", newintentCallback, capture);

  • String 类型

  • 程序从后台被第三方程序调用并传入新意图事件。 此时程序将切换到前台运行,若应用需要处理新意图的事件行为,可通过注册事件监听器来监听“newintent”事件,此事件需要在plusready事件后通过document进行注册。

      // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    document.addEventListener("newintent", onNetIntent, false);
    }
    function onNetIntent(){
    // 获取新意图传入的参数
    var args = plus.runtime.arguments;
    // 处理意图事件
    }

plusscrollbottom: 窗口滚动到底部事件

document.addEventListener( "plusscrollbottom", eventCallback, capture );
当滚动Webview窗口到底部时触发此事件。
mui.plusReady(function(){
document.addEventListener( "plusscrollbottom", onScrollToBottom, false );
function onScrollToBottom() {
mui.toast('窗口滚动到底部');
}
});

background:应用切换到后台运行事件

  • document.addEventListener("background", backgroundCallback, capture);

  • String 类型

  • 在多应用运行环境(如流应用)中,启动一个新应用时,之前运行的应用将会自动切换到后台运行。 切换到后台运行的应用将会触发此事件。

      // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    document.addEventListener("background", onAppBackground, false);
    }
    function onAppBackground(){
    console.log("Application background!");
    }

foreground:应用切换到前台运行事件

  • document.addEventListener("foreground", foregroundCallback, capture);

  • String 类型

  • 在多应用运行环境(如流应用)中,应用切换到后台运行后再次被启动时,不会创建新的应用实例,而是将后台应用激活到前台运行。此时切换到前台运行的应用将会触发foreground事件。 回调函数原型为void onForeground(e){}其中e.active表明激活应用到

    前台来源,可取值:"default"-默认激活方式,通常表示通过应用列表启动激活,或者关闭前一个应用后自动激活等;"stream"-通过流应用api(plus.stream.open)激活;"scheme"-通过urlscheme方式触发激活; "push"-通过点击系统通知方式触发激活;"barcode"-通过二维码扫描激活; "myapp"-通过应用收藏列表([流应用]独立App中"我的"列表)触发激活。

       // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    document.addEventListener("foreground", onAppForeground, false);
    }
    function onAppForeground(e){
    console.log("Application foreground!");
    var activeType = e.active; // 获取激活到前台来源
    }

trimmemory:应用需要清理内存事件

  • document.addEventListener("trimmemory", trimmemoryCallback, capture);

  • String 类型

  • 在多应用运行环境(如流应用)中,可同时运行多个应用,当运行过多应用时会导致内存占用过多的情况,此时切换到后台运行的应用会收到清理内存事件。 此时应用应该释放资源来减少内存的使用(如关闭非必要的Webview窗口等)。

      // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    document.addEventListener("trimmemory", onAppTrimMemory, false);
    }
    function onAppTrimMemory(){
    console.log("Trim Memory!");
    }

splashclosed:应用启动界面已关闭事件

  • document.addEventListener("splashclosed", splashClosedCallback, capture);

  • String 类型

  • 应用启动后关闭启动界面时触发,不管是应用自动关闭还是调用plus.navigator.closeSplashscreen方法,都会触发此事件。

      // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    document.addEventListener("splashclosed", onSplashClosed, false);
    }
    function onSplashClosed(){
    console.log("Splash closed!");
    }

原生dom事件

  • 1、利用dom元素的 onclick="" 属性

      <input type="button" id="btn" value="test" onclick="test();"></input>
    //js代码
    function test(){alert(1);}
  • 2、获取dom对象,从写dom元素的 onclick 方法

      <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属性

      <a href="javascript:test();">test</a>
    //js代码
    function test(){alert(1);}
  • 原文地址:https://blog.csdn.net/yzp0112/article/details/80386818

  • 官网地址: http://www.html5plus.org/doc/zh_cn/events.html

plus.networkinfo.getCurrentType()的更多相关文章

  1. 本地缓存下载文件,download的二次封装

    来源:http://ask.dcloud.net.cn/article/524 源码下载链接 说明: (1)由于平时项目中大量用到了附件下载等功能,所以就花了一个时间,把plus的downlaod进行 ...

  2. MUI判断网络连接以及监听网络变化JS

    来源:netChange问题:怎么判断网络状态 MUI用于获取当前设备的网络类型 function plusReady(){ var types = {}; types[plus.networkinf ...

  3. mui 访问手机自带是否连接网络

    //mui检测是否连接网络 function getSysInfo() { //  var str = ""; //  str += "名称:" + plus. ...

  4. mui开发app之多图压缩与上传(仿qq空间说说发表)

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

  5. 第一个 HTML5Plus 移动应用

    什么是 HTML5Plus 移动应用 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生 ...

  6. 基于Html5 Plus + Vue + Mui 移动App 开发(二)

    基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...

  7. [转] HTML5+规范:device(管理设备信息)

    http://blog.csdn.net/qq_27626333/article/details/51815310 Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI.IMSI.型号 ...

  8. mui---获取设备的网络状态

    在用mui做音乐或视频播放器的时候,往往会考虑当前音乐+视频的播放环境.例如是4G ,WIFI,无网络,给出特定的提示: 具体做法:根据 getCurrentType来进行获取当前网络的类型: plu ...

  9. mui框架(三)

    1.Ajax-get请求 // get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0 mui.get(' ...

随机推荐

  1. Linq里where出现null的问题

    今天遇到一个问题,怎么在where里判断一个字段是否为null,并且这个字段不是字符串string类型,而是int和GUID类型,折腾了半天终于搞明白了.(由于项目是我半路接手的,问题是前期的同事给我 ...

  2. Python替换字符串中的反斜杠\

    s = 'cdp\nd' result = eval(repr(s).replace('\\', '@')) print(result) repr() 函数可以将字符串转换为python的原始字符串( ...

  3. (转)把hadoop源码关联到eclipse工程

    把hadoop源码关联到eclipse工程     转:http://www.superwu.cn/2013/08/04/355 在eclipse中阅读源码非常方便,利于我们平时的学习,下面讲述如何把 ...

  4. CentOS 文本操作命令

    1.cat 用于查看纯文本文件,显示行号,加-n参数,适合内容较少的情况 2.more 用于查看纯文本文件,适合内容较多的情况 3.less 用于查看纯文本文件,可以上下翻页 4.head 用于查看纯 ...

  5. BZOJ3771:Triple——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3771 大意:给n把不同价值的斧子,从中选一把/两把/三把,所构成的每种价值和的可能情况有多少. 生 ...

  6. 51nod 1273 旅行计划(思维题)

    一开始看到这题真的有点懵逼...一直在想着套算法,结果题解除了sort和dfs其他什么都没用到 显然每次到达的一定都是叶子,先从根节点dfs一遍,按深度对叶子降序排序,按这个顺序向根节点dfs,路径上 ...

  7. [BZOJ3523][Poi2014]KLO-Bricks——全网唯一 一篇O(n)题解+bzoj最优解

    Description 有n种颜色的砖块,第i种颜色的砖块有a[i]个,你需要把他们放成一排,使得相邻两个砖块的颜色不相同,限定第一个砖块的颜色是start,最后一个砖块的颜色是end,请构造出一种合 ...

  8. 【神仙题】【P1600】【NOIP2016D1T2】天天爱跑步

    传送门 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游 ...

  9. 高效率JavaScript代码的编写技巧

    使用DocumentFragment优化多次append 添加多个dom元素时,先将元素append到DocumentFragment中,最后统一将DocumentFragment添加到页面.该做法可 ...

  10. BZOJ1878: [SDOI2009]HH的项链 (离线查询+树状数组)

    1878: [SDOI2009]HH的项链 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 Description: HH有一串由 ...