如何添加 Ionic2 原生按钮点击声音？答案

【问题标题】：How to add Ionic2 native button click sound?如何添加 Ionic2 原生按钮点击声音？
【发布时间】：2017-10-16 19:49:05
【问题描述】：

许多原生应用的按钮都有原生的点击声音。谁能告诉我如何为 Ionic 2 中的所有按钮添加原生点击声音。

【问题讨论】：

Native Click Sound Cordova Plugin by @matimenich 就是这样做的（Android 和 iOS）——但 我也在努力让它在 Ionic 2 中工作（所有文档/示例都是对于较旧的离子/角度）。所以这并不是一个完整的答案，更多的是（希望）一个好的方向的指针。

标签： cordova angular typescript npm ionic2

【解决方案1】：

在 Ionic 2 中使用 Nativeclick 插件：

安装插件：

cordova plugin add cordova-plugin-nativeclicksound

添加必要的导入：

import { Platform } from 'ionic-angular';

在@Component装饰器之前声明一个变量：

declare var nativeclick;

这样，TypeScript 就不会抱怨未定义“nativeclick”。

在构造函数中，使用以下代码：

constructor(private platform: Platform) {

this.platform.ready().then( (val) => {
    if (val === 'cordova'){
      var clickyClasses = ['button', 'a']; // add other classes that should make a sound when clicked on
      nativeclick.watch(clickyClasses);
    }
});

如果您不使用平台检查 (==='cordova')，您的代码在浏览器中使用时会中断。

如果有人能指出我们可以使用的其他一些类的名称（例如单选按钮、列表项、导航上的后退按钮等），我将不胜感激。

【讨论】：

一个词我想说“哇”。
很高兴我能帮上忙。 :)
为什么不在 try catch 块中使用而不是在检查平台中使用
我想这也可以在try...catch 块中完成。我更喜欢这种方法，因为在现实生活中通常有更多的事情要做/初始化取决于平台，在我看来这是更具可读性的代码。无论如何，这个检查只在每个应用程序启动时进行一次，所以在使用时对性能没有任何影响。这取决于个人喜好。
请注意，nativeclick.watch 函数仅采用 classes （而不是此答案中给出的代码所建议的标签名称）。

【解决方案2】：

虽然这个问题专门询问 Ionic 2，但 it's currently still the top Google result 即使在搜索 Ionic 3 时也是如此。

The accepted answer 不适用于 Ionic 3； Ionic 3 组件可能为 Ionic 2 组件分配了不同的类名。

以下解决方案适用于 Ionic 3（也可能适用于 Ionic 2）。它注册一个文档范围的事件处理程序来检查单击的元素及其祖先，如果找到<button>，则手动触发nativeclick：

// ↓↓↓ BEGIN ADDITION 1 OF 2 ////////////////////////////////////////////////////

declare var nativeclick: { trigger: () => void };

// ↑↑↑ END ADDITION /////////////////////////////////////////////////////////////

// @Component({ templateUrl: 'app.html' })
// class MyApp

constructor(
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
) {
    platform.ready().then(() => {

// ↓↓↓ BEGIN ADDITION 2 OF 2 ////////////////////////////////////////////////////

        const nativeClickListener = (event: Event) => {
            // Traverse through the clicked element and all ancestors.
            for (
                let curElement = <Element> event.target;
                curElement != null;
                curElement = curElement.parentElement
            ) {
                // If a BUTTON element is encountered, trigger a click and stop.
                if (curElement.tagName === 'BUTTON') {
                  // ‘nativeclick’ doesn't exist outside Cordova's environment.
                  typeof nativeclick !== 'undefined' && nativeclick.trigger();
                  break;
                }
            }
        };
        // Call the above listener whenever anything is clicked, ensuring that it
        // is called before more specific EventTargets (or else clicks won't be
        // heard on e.g. <ion-datetime> components or <ion-navbar> back buttons).
        document.addEventListener('click', nativeClickListener, true);

// ↑↑↑ END ADDITION /////////////////////////////////////////////////////////////

        statusBar.styleDefault();
        splashScreen.hide();
    });
}

以上代码假设你已经安装了cordova-plugin-nativeclicksound插件：

$ cordova plugin add cordova-plugin-nativeclicksound

虽然只查找<button> 元素对我来说已经足够了，但可能需要注意更多的标签名称。根据需要进行调整。

【讨论】：