Events

Events模块管理客户端事件，包括系统事件，如扩展API加载完毕、程序前后台切换等。

常量：

方法：

回调方法：

"plusready"

扩展API加载完成事件

  3. document.addEventListener("plusready", function(){
  4.     //扩展API加载完成事
  5. }, false);
  7.

说明：

String类型

为了保证HTML5扩展API的有效调用，页面加载扩展API完成后会触发此事件。通常应该在页面开始加载时监听此事件，当此事件触发后，就可以安全的调用HTML5扩展API。如果应用使用多页面，每个都会收到此事件。注意：uni-app不需要关心此事件，框架已经封装确保5+ API能够有效调用。

示例：

  3. // 监听plusready事件 
  4. // uni-app项目中不要监听此事件，uni-app中不存在document对象，调用此方法会引起js错误
  5. document.addEventListener("plusready", function(){
  6.     // 扩展API加载完毕，现在可以正常调用扩展API
  7.     // ...... 
  8. }, false);  
  10.

uni-app使用plus注意事项

"pause"

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

  3. document.addEventListener("pause", function(){
  4.     //从前台切换到后台
  5. }, false);
  7.

说明：

String类型

当程序从前台切换到后台时会触发此事件。若应用需要处理从前台切换到后台的事件行为，可通过注册“pause”事件监听。注意：此事件可能早于"plusready"事件触发，如果在回调事件中需要调用5+API，建议在plusready回调事件触发后再监听。

示例：

  3. <!DOCTYPE html>
  4. <html>
  5.     <meta charset="utf-8">
  6.     <title>Events Example</title>
  7.     <script type="text/javascript" >
  8. // 扩展API加载完毕后调用onPlusReady回调函数 
  9. document.addEventListener("plusready", onPlusReady, false); 
  10. function onPlusReady(){
  11.     document.addEventListener("pause", onAppPause, false);
  12. }
  13. function onAppPause(){
  14.     console.log("Application paused!"); 
  15. }
  16.     </script>
  17.     </head>
  18.     <body >
  19.     </body>
  20. </html>
  22.

uni-app使用plus注意事项

"resume"

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

  3. document.addEventListener("resume", function(){
  4.     //从后台切换到前台
  5. }, false);
  7.

说明：

String类型

当程序从后台切换到前台时会触发此事件。若应用需要处理从后台切换到前台的事件行为，可通过注册“resume”事件监听。注意：此事件可能早于"plusready"事件触发，如果在回调事件中需要调用5+API，建议在plusready回调事件触发后再监听。

示例：

  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.     <meta charset="utf-8">
  7.     <title>Events Example</title>
  8.     <script type="text/javascript" >
  9. // 扩展API加载完毕后调用onPlusReady回调函数 
  10. document.addEventListener("plusready", onPlusReady, false); 
  11. function onPlusReady(){
  12.     document.addEventListener("resume", onAppReume, false);
  13. }
  14. function onAppReume(){
  15.     alert("Application resumed!"); 
  16. }
  17.     </script>
  18.     </head>
  19.     <body >
  20.     </body>
  21. </html>
  23.

uni-app使用plus注意事项

"netchange"

设备网络状态变化事件

  3. document.addEventListener("netchange", function(){
  4.     //网络状态变化
  5. }, false);
  7.

说明：

String类型

设备的网络状态发生时会触发此事件。若应用需要根据网络状态变化进行业务处理，可通过注册“netchange”事件监听。注意：此事件可能早于"plusready"事件触发，如果在回调事件中需要调用5+API，建议在plusready回调事件触发后再监听。

示例：

  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.     <meta charset="utf-8">
  7.     <title>Events Example</title>
  8.     <script type="text/javascript" >
  9. // 扩展API加载完毕后调用onPlusReady回调函数 
  10. document.addEventListener("plusready", onPlusReady, false);
  11. function onPlusReady(){
  12.     document.addEventListener("netchange", onNetChange, false);  
  13. }
  14. function onNetChange(){
  15.     var nt = plus.networkinfo.getCurrentType();
  16.     switch (nt){
  17.         case plus.networkinfo.CONNECTION_ETHERNET:
  18.         case plus.networkinfo.CONNECTION_WIFI:
  19.         alert("Switch to Wifi networks!"); 
  20.         break; 
  21.         case plus.networkinfo.CONNECTION_CELL2G:
  22.         case plus.networkinfo.CONNECTION_CELL3G:
  23.         case plus.networkinfo.CONNECTION_CELL4G:
  24.         alert("Switch to Cellular networks!");  
  25.         break; 
  26.         default:
  27.         alert("Not networks!"); 
  28.         break;
  29.     }
  30. }
  31.     </script>
  32.     </head>
  33.     <body >
  34.     </body>
  35. </html>
  37.

uni-app使用plus注意事项

"newintent"

新意图事件

  3. document.addEventListener("newintent", function(){
  4.     //新意图
  5. }, false);
  7.

说明：

String类型

程序切换到后台后被第三方程序激活到前台时触发此事件。若应用需要根据第三方程序调用时进行业务处理（如判断传入的参数打开指定页面），可通过注册“newintent”事件监听。注意：此事件可能早于"plusready"事件触发，如果在回调事件中需要调用5+API，建议在plusready回调事件触发后再监听。

示例：

  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.         <meta charset="utf-8">
  7.         <title>Events Example</title>
  8.         <script type="text/javascript" >
  9. // 扩展API加载完毕后调用onPlusReady回调函数
  10. document.addEventListener("plusready", onPlusReady, false);
  11. function onPlusReady(){
  12.     document.addEventListener("newintent", onNetIntent, false);
  13. }
  14. function onNetIntent(){
  15.     // 获取新意图传入的参数
  16.     var args = plus.runtime.arguments;
  17.     // 处理意图事件
  18. }
  19.         </script>
  20.     </head>
  21.     <body >
  22.     </body>
  23. </html>
  25.

uni-app使用plus注意事项

"plusscrollbottom"

页面滚动到底部事件

  3. document.addEventListener("plusscrollbottom", function(){
  4.     //页面滚动到底部
  5. }, false);
  7.

说明：

String类型

当滚动Webview窗口页面到底部时触发此事件。

示例：

  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.         <meta charset="utf-8">
  7.         <title>Events Example</title>
  8.         <script type="text/javascript" >
  9. // 扩展API加载完毕后调用onPlusReady回调函数
  10. document.addEventListener("plusready", onPlusReady, false);
  11. function onPlusReady(){
  12.     document.addEventListener("plusscrollbottom", onScrollToBottom, false);
  13. }
  14. function onScrollToBottom(){
  15.     // 处理滚动到窗口底部事件
  16. }
  17.         </script>
  18.     </head>
  19.     <body >
  20.     </body>
  21. </html>
  23.

uni-app使用plus注意事项

"error"

页面加载错误事件

  3. document.addEventListener("error", function(e){
  4. }, false);
  6.

说明：

String类型

当Webview窗口加载页面失败后打开错误页面时触发此事件。注意：此事件仅在错误页面中才触发。

示例：

  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="utf-8"/>
  7.     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  8.     <meta name="HandheldFriendly" content="true"/>
  9.     <meta name="MobileOptimized" content="320"/>
  10.     <title>Error</title>
  11.     <script type="text/javascript">
  12. // H5 plus事件处理
  13. var ws=null;
  14. function plusReady(){
  15.     // Android处理返回键
  16.     plus.key.addEventListener('backbutton',function(){
  17.         (history.length==1)&&ws.close();
  18.         var c=setTimeout(function(){
  19.             ws.close();
  20.         },1000);
  21.         window.onbeforeunload=function(){
  22.             clearTimeout(c);
  23.         }
  24.         history.go(-2);
  25.     },false);
  26.     ws=plus.webview.currentWebview();
  27. }
  28. if(window.plus){
  29.     plusReady();
  30. }else{
  31.     document.addEventListener('plusready',plusReady,false);
  32. }
  33. document.addEventListener('touchstart',function(){
  34.     return false;
  35. },true);
  36. // 禁止选择
  37. document.oncontextmenu=function(){
  38.     return false;
  39. };
  40. // 获取错误信息
  41. document.addEventListener("error",function(e){
  42.     info.innerText="请求的页面（"+e.href+"）无法打开";
  43. },false);
  44.     </script>
  45.     <style>
  46. *{
  47.     -webkit-user-select: none;
  48. }
  49. html,body{
  50.     margin: 0px;
  51.     padding: 0px;
  52.     width: 100%;
  53.     height: 100%;
  54.     text-align: center;
  55.     -webkit-touch-callout:none;
  56.     -webkit-tap-highlight-color:rgba(0,0,0,0);
  57. }
  58. .button{
  59.     width: 50%;
  60.     font-size: 18px;
  61.     font-weight: normal;
  62.     text-decoration: none;
  63.     text-align: center;
  64.     padding: .5em 0em;
  65.     margin: .5em auto;
  66.     color: #333333;
  67.     background-color: #EEEEEE;
  68.     border: 1px solid #CCCCCC;
  69.     -webkit-border-radius: 5px;
  70.     border-radius: 5px;
  71. }
  72. .button:active{
  73.     background-color: #CCCCCC;
  74. }
  75.     </style>
  76. </head>
  77. <body>
  78.     <div style="width:100%;height:20%;"></div>
  79.     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" style="height:20%;"> 
  80.     <g id="icomoon-ignore">
  81.         <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
  82.     </g>
  83.     <path d="M256 0c-141.385 0-256 114.615-256 256s114.615 256 256 256 256-114.615 256-256-114.615-256-256-256zM352 128c17.673 0 32 14.327 32 32s-14.327 32-32 32-32-14.327-32-32 14.327-32 32-32zM160 128c17.673 0 32 14.327 32 32s-14.327 32-32 32-32-14.327-32-32 14.327-32 32-32zM352.049 390.37c-19.587-32.574-55.272-54.37-96.049-54.37s-76.462 21.796-96.049 54.37l-41.164-24.698c27.98-46.535 78.958-77.672 137.213-77.672s109.232 31.137 137.213 77.672l-41.164 24.698z" fill="#666666"></path>
  84.     </svg>
  85.     <p style="font-size:18px;font-weight:bolder;">We're sorry ...</p>
  86.     <p id="info" style="font-size:12px;"></p>
  87.     <!--<div class="button" onclick="history.back()">Retry</div>-->
  88.     <div class="button" onclick="if(history.length == 1){ws.close();}else{ws.back();ws.back();}">Back</div>
  89.     <div class="button" onclick="ws.close()">Close</div>
  90. </body>
  91. </html>
  93.

uni-app使用plus注意事项

"background"

应用切换到后台运行事件



document.addEventListener("background", function(){
    //应用切换到后台运行
}, false);

说明：

String类型

在多应用运行环境（如流应用）中，启动一个新应用时，之前运行的应用将会自动切换到后台运行。切换到后台运行的应用将会触发此事件。注意：此事件可能早于"plusready"事件触发，如果在回调事件中需要调用5+API，建议在plusready回调事件触发后再监听。

示例：



<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Events Example</title>
    <script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    document.addEventListener("background", onAppBackground, false);
}
function onAppBackground(){
    console.log("Application background!"); 
}
    </script>
    </head>
    <body >
    </body>
</html>

uni-app使用plus注意事项

"foreground"

应用切换到前台运行事件



document.addEventListener("foreground", function(e){
    //应用切换到前台运行
}, false);

说明：

String类型

在多应用运行环境（如流应用）中，应用切换到后台运行后再次被启动时，不会创建新的应用实例，而是将后台应用激活到前台运行。此时切换到前台运行的应用将会触发foreground事件。回调函数原型为void onForeground(e){}其中e.active表明激活应用到前台来源，可取值："default"-默认激活方式，通常表示通过应用列表启动激活，或者关闭前一个应用后自动激活等；"stream"-通过流应用api（plus.stream.open）激活；"scheme"-通过urlscheme方式触发激活； "push"-通过点击系统通知方式触发激活； "barcode"-通过二维码扫描激活； "myapp"-通过应用收藏列表（[流应用]独立App中"我的"列表）触发激活。

示例：



<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Events Example</title>
    <script type="text/javascript" >
// 扩展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;    // 获取激活到前台来源
}
    </script>
    </head>
    <body >
    </body>
</html>

uni-app使用plus注意事项

"trimmemory"

应用需要清理内存事件



document.addEventListener("trimmemory", function(){
    //应用需要清理内存
}, false);

说明：

String类型

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

示例：



<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Events Example</title>
    <script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    document.addEventListener("trimmemory", onAppTrimMemory, false);
}
function onAppTrimMemory(){
    console.log("Trim Memory!"); 
}
    </script>
    </head>
    <body >
    </body>
</html>

uni-app使用plus注意事项

"splashclosed"

应用启动界面已关闭事件



document.addEventListener("splashclosed", function(){
}, false);

说明：

String类型

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

示例：



<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Events Example</title>
    <script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    document.addEventListener("splashclosed", onSplashClosed, false);
}
function onSplashClosed(){
    console.log("Splash closed!"); 
}
    </script>
    </head>
    <body >
    </body>
</html>

uni-app使用plus注意事项

addEventListener

添加事件监听函数



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

说明：

通过Html中标准document对象的addEventListener方法添加扩展事件监听器，当指定事件发生时，将触发对应额监听回调函数。

参数：

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

返回值：

void: 无

EventTrigCallback

事件触发回调函数



void onTrig(){
    // Event trig code
}

说明：

指定事件触发时的回调函数，在指定的事件已经发生时调用。

参数：

无

返回值：

void: 无

ErrorEventTrigCallback

页面加载错误事件回调函数



void onErrorTrig(Event event){
    // Event trig code
    var url = event.url;  // 加载错误的页面路径，API中传入的url值
    var href = event.href;  // 加载错误的页面完整路径，通常以“file://”开头的路径
}

说明：

当Webview窗口加载页面失败后打开错误页面时触发此事件。

参数：

  • event: (Event)可选 加载页面失败信息可通过event.url（String类型）获取加载页面的url值，如“./test/html”；可通过event.href（String类型）加载错误的页面完整路径，包括完整的协议头，如Android平台“file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/test.html”，iOS平台“file:///var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/www/test.html”。

返回值：

void: 无