PhoneGap 通知

转载 2013年12月03日 11:59:24

通知

可視、 可聽,和觸覺設備通知

方法

訪問功能

從 3.0 版,科爾多瓦作為外掛程式實現了設備級 Api。 使用 CLI 的 plugin 命令,描述在命令列介面,可以添加或刪除一個專案,為此功能:

    $ cordova plugin add org.apache.cordova.dialogs
    $ cordova plugin add org.apache.cordova.vibration
    $ cordova plugin ls
    [ 'org.apache.cordova.dialogs',
      'org.apache.cordova.vibration' ]
    $ cordova plugin rm org.apache.cordova.dialogs
    $ cordova plugin rm org.apache.cordova.vibration

這些命令適用于所有有針對性的平臺,但修改如下所述的特定于平臺的配置設置:

  • Android 系統

    (in app/res/xml/config.xml)
    <feature name="Notification">
        <param name="android-package" value="org.apache.cordova.Notification" />
    </feature>
    
    
    (in app/AndroidManifest.xml)
    <uses-permission android:name="android.permission.VIBRATE" />
    
  • 黑莓手機 WebWorks

    (in www/plugins.xml)
    <feature name="Notification">
        <param name="blackberry-package" value="org.apache.cordova.notification.Notification" />
    </feature>
    
    
    (in www/config.xml)
    <feature id="blackberry.ui.dialog" />
    
  • (在 iOSconfig.xml)

    <feature name="Notification">
        <param name="ios-package" value="CDVNotification" />
    </feature>
    

一些平臺可能支援此功能,而無需任何特殊的配置。請參見在概述部分中的平臺支援

notification.alert

顯示一個自訂的警報或對話方塊框。

navigator.notification.alert(message, alertCallback, [title], [buttonName])
  • 消息: 消息對話方塊。(字串)

  • alertCallback: 當警報對話方塊的被解雇時要調用的回(函數)

  • 標題: 標題對話方塊。(字串)(可選,預設值為Alert)

  • buttonName: 按鈕名稱。(字串)(可選,預設值為OK)

說明

大多數科爾多瓦實現使用本機對話方塊中的此項功能,但一些平臺使用瀏覽器的 alert 函數,這是通常不那麼可自訂。

支援的平臺

  • Android 系統
  • 黑莓手機 WebWorks (OS 5.0 和更高)
  • iOS
  • Tizen
  • Windows Phone 7 和 8
  • Windows 8

快速的示例

// Android / BlackBerry WebWorks (OS 5.0 and higher) / iOS / Tizen
//
function alertDismissed() {
    // do something
}

navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>Notification Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        // Empty
    }

    // alert dialog dismissed
        function alertDismissed() {
            // do something
        }

    // Show a custom alertDismissed
    //
    function showAlert() {
        navigator.notification.alert(
            'You are the winner!',  // message
            alertDismissed,         // callback
            'Game Over',            // title
            'Done'                  // buttonName
        );
    }

    </script>
  </head>
  <body>
    <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
  </body>
</html>

Windows Phone 7 和 8 怪癖

  • 有沒有內置瀏覽器警報,但你可以綁定一個,如下所示調用 alert() 在全球範圍內:

    window.alert = navigator.notification.alert;
    
  • 兩個 alertconfirm 的非阻塞的調用,其中的結果才是可用的非同步。

notification.confirm

顯示一個可自訂的確認對話方塊。

navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])
  • 消息: 消息對話方塊。(字串)

  • confirmCallback: 要用索引 (1、 2 或 3) 按下的按鈕,或者在沒有按下按鈕 (0) 駁回了對話方塊中時調用的回(函數)

  • 標題: 標題對話方塊。(字串)(可選,預設值為Confirm)

  • buttonLabels: 指定按鈕標籤的字串陣列。(陣列)(可選,預設值為 [ OK,Cancel ])

說明

notification.confirm方法顯示一個本機的對話方塊,更可自訂的瀏覽器比 confirm 函數。

confirmCallback

confirmCallback當使用者按下確認對話方塊中的按鈕之一的時候執行。

將參數 buttonIndex (編號),它是按下的按鈕的索引。 請注意索引使用基於 1 的索引,所以值是 123 ,等等。

支援的平臺

  • Android 系統
  • 黑莓手機 WebWorks (OS 5.0 和更高)
  • iOS
  • Tizen
  • Windows Phone 7 和 8
  • Windows 8

快速的示例

// process the confirmation dialog result
function onConfirm(buttonIndex) {
    alert('You selected button ' + buttonIndex);
}

// Show a custom confirmation dialog
//
function showConfirm() {
    navigator.notification.confirm(
        'You are the winner!', // message
         onConfirm,            // callback to invoke with index of button pressed
        'Game Over',           // title
        ['Restart','Exit']         // buttonLabels
    );
}

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>Notification Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        // Empty
    }

    // process the confirmation dialog result
    function onConfirm(buttonIndex) {
        alert('You selected button ' + buttonIndex);
    }

    // Show a custom confirmation dialog
    //
    function showConfirm() {
        navigator.notification.confirm(
            'You are the winner!', // message
             onConfirm,            // callback to invoke with index of button pressed
            'Game Over',           // title
            ['Restart','Exit']         // buttonLabels
        );
    }

    </script>
  </head>
  <body>
    <p><a href="#" onclick="showConfirm(); return false;">Show Confirm</a></p>
  </body>
</html>

Windows Phone 7 和 8 怪癖

  • 有沒有內置的瀏覽器功能的 window.confirm ,但你可以將它綁定通過分配:

    window.confirm = navigator.notification.confirm;
    
  • 調用到 alertconfirm 的非阻塞,所以結果就是只可用以非同步方式。

notification.prompt

顯示一個可自訂的提示對話方塊。

navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText])
  • 消息: 消息對話方塊。(字串)

  • promptCallback: 當按下按鈕時要調用的回(函數)

  • 標題: 對話方塊的標題(字串) (可選,預設值為Prompt)

  • buttonLabels: 陣列,這些字串指定按鈕標籤(陣列) (可選,預設值為["OK","Cancel"])

  • defaultText: 預設文字方塊中輸入值 ( String ) (可選,預設值: 空字串)

說明

notification.prompt方法顯示一個本機的對話方塊,更可自訂的瀏覽器比 prompt 函數。

promptCallback

promptCallback當使用者按下一個提示對話方塊中的按鈕時執行。results物件傳遞給回的包含以下屬性:

  • buttonIndex: 按下的按鈕的索引。(人數)請注意索引使用基於 1 的索引,所以值是 123 ,等等。

  • 輸入 1: 在提示對話方塊中輸入的文本。(字串)

支援的平臺

  • Android 系統
  • iOS

快速的示例

// process the promp dialog results
function onPrompt(results) {
    alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
}

// Show a custom prompt dialog
//
function showPrompt() {
    navigator.notification.prompt(
        'Please enter your name',  // message
        onPrompt,                  // callback to invoke
        'Registration',            // title
        ['Ok','Exit'],             // buttonLabels
        'Jane Doe'                 // defaultText
    );
}

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>Notification Prompt Dialog Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        // Empty
    }

    // process the promptation dialog result
    function onPrompt(results) {
        alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
    }

    // Show a custom prompt dialog
    //
    function showPrompt() {
        navigator.notification.prompt(
            'Please enter your name',  // message
            onPrompt,                  // callback to invoke
            'Registration',            // title
            ['Ok','Exit'],             // buttonLabels
            'Jane Doe'                 // defaultText
        );
    }

    </script>
  </head>
  <body>
    <p><a href="#" onclick="showPrompt(); return false;">Show Prompt</a></p>
  </body>
</html>

Android 的怪癖

  • Android 支援最多的三個按鈕,並忽略任何更多。

  • 關於 Android 3.0 及更高版本,使用全息主題的設備按相反的順序顯示按鈕。

notification.beep

設備播放提示音聲音。

navigator.notification.beep(times);
  • 時間: 的次數重複發出蜂鳴音。(人數)

支援的平臺

  • Android 系統
  • 黑莓手機 WebWorks (OS 5.0 和更高)
  • iOS
  • Tizen
  • Windows Phone 7 和 8

快速的示例

// Beep twice!
navigator.notification.beep(2);

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>Notification Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        // Empty
    }

    // Show a custom alert
    //
    function showAlert() {
        navigator.notification.alert(
            'You are the winner!',  // message
            'Game Over',            // title
            'Done'                  // buttonName
        );
    }

    // Beep three times
    //
    function playBeep() {
        navigator.notification.beep(3);
    }

    // Vibrate for 2 seconds
    //
    function vibrate() {
        navigator.notification.vibrate(2000);
    }

    </script>
  </head>
  <body>
    <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
    <p><a href="#" onclick="playBeep(); return false;">Play Beep</a></p>
    <p><a href="#" onclick="vibrate(); return false;">Vibrate</a></p>
  </body>
</html>

Android 的怪癖

  • Android 系統播放的預設通知鈴聲*設置/聲音和顯示*面板下指定。

Windows Phone 7 和 8 怪癖

  • 依賴泛型蜂鳴音從科爾多瓦分佈。

Tizen 怪癖

  • Tizen 通過播放音訊檔通過媒體 API 實現會發出蜂鳴聲。

  • 蜂鳴音必須很短,必須設在 sounds 子目錄中的應用程式的根目錄中,並且必須命名beep.wav.

notification.vibrate

為指定的時間量振動設備

navigator.notification.vibrate(milliseconds)
  • 時間: 毫秒為單位) 在震動的設備,其中 1000年毫秒等於 1 秒。(人數)

支援的平臺

  • Android 系統
  • 黑莓手機 WebWorks (OS 5.0 和更高)
  • iOS
  • Windows Phone 7 和 8

快速的示例

// Vibrate for 2.5 seconds
//
navigator.notification.vibrate(2500);

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>Notification Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        // Empty
    }

    // Show a custom alert
    //
    function showAlert() {
        navigator.notification.alert(
            'You are the winner!',  // message
            'Game Over',            // title
            'Done'                  // buttonName
        );
    }

    // Beep three times
    //
    function playBeep() {
        navigator.notification.beep(3);
    }

    // Vibrate for 2 seconds
    //
    function vibrate() {
        navigator.notification.vibrate(2000);
    }

    </script>
  </head>
  <body>
    <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
    <p><a href="#" onclick="playBeep(); return false;">Play Beep</a></p>
    <p><a href="#" onclick="vibrate(); return false;">Vibrate</a></p>
  </body>
</html>

iOS 的怪癖

BB10 的怪癖

震動功能導航器物件所擁有的

    navigator.vibrate(1000);  // vibrate for 1 second

通过 PhoneGap 使用 Apple 推送通知

要求 其他必要产品 本文至少需要具备中级 PhoneGap 开发经验。 用户级别 中级 范例文件 PhoneGap Apple Push Notifications...
  • hanbing861210
  • hanbing861210
  • 2013年12月11日 16:51
  • 3335

PhoneGap开发对策:如何通过苹果审核

有开发者将之归咎于用户界面设计基于HTML。其实被拒绝也没那么难理解,苹果有一套严格的审查程序,那问题到底出在哪?又该如何处理?首先要了解PhoneGap是什么,这是一个开源的移动开发框架,能真正实现...
  • niejiafa_131
  • niejiafa_131
  • 2015年07月13日 16:04
  • 830

PhoneGap的学习第三讲-通讯录信息的获取

PhoneGap把相关通讯录的信息封装在一个Contact类中,因此在对通讯录进行操作前首先要创建一个Contact对象。 这个例子不仅可以学习如何操作通讯录,而且还可以学习如何在PhoneGap中使...
  • zfy865628361
  • zfy865628361
  • 2015年12月03日 18:49
  • 1499

Hybrid开发框架搭建(一)PhoneGap简介

本系列博客将介绍采用PhoneGap、Backbone、Seajs、Ratchet和SPM等js库或工具搭建一个Web主体型的Hybrid模式的移动应用开发框架。   Phonegap是一款开源的开发...
  • zhang1314wen2008
  • zhang1314wen2008
  • 2015年01月18日 00:50
  • 1474

PhoneGap2.9.0本地将html打包成Android应用

参考: 1.开发环境设置 http://www.cnblogs.com/zoupeiyang/p/4034517.html http://www.cnblogs.com/Random/archi...
  • u014345282
  • u014345282
  • 2016年03月28日 14:20
  • 1501

使用PhoneGap开发Android程序

不得不说,正是因为HTML5/CSS3/JS的强大才促成了PhoneGap的伟大。可以做出那么酷的应用,然后变成本地应用才有意义。 简介 PhoneGap是一款开源的手机应用开发平台,它仅...
  • jdfkldjlkjdl
  • jdfkldjlkjdl
  • 2013年08月10日 20:13
  • 3464

基于phonegap开发app的实践

app开发告一段落,期间遇到不少问题,写篇文章记录一下。 为虾米要用phonegap 开发app,至少要考虑android和ios两个版本吧,android偶可以应付,ios表示完全木有接触过...
  • xiebaochun
  • xiebaochun
  • 2014年07月08日 23:20
  • 5942

安装配置PhoneGap开发环境(二)——使用Cordova代替PhoneGap创建项目

PhoneGap的官方文档说的很清楚。Cordova是PhoneGap的引擎,这两者的关系类似于WebKit与Chrome浏览器的关系。所以一些核心的基础操作对于Cordova与PhoneGap是相通...
  • dongdong9223
  • dongdong9223
  • 2015年06月24日 10:21
  • 1698

PhoneGap与Cordova之间的关系

There has been some confusion in the PhoneGap community and to complement Simeon Bateman’s recent bl...
  • dipolar
  • dipolar
  • 2014年07月05日 15:49
  • 892

H5 开发ap 框架PhoneGap(cordova)的应用详解

PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台。官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表。但是有一条跨平台,却是很明显的...
  • u013378306
  • u013378306
  • 2017年02月10日 11:16
  • 784
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:PhoneGap 通知
举报原因:
原因补充:

(最多只允许输入30个字)