Question

许多原生app的按钮都有本机点击声。任何人都可以告诉我如何为Ionic 2中的所有按钮添加原生点击声。

Answer 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'），您的代码将在浏览器中使用时中断。

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

Answer 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）。它注册一个文档范围的事件处理程序来检查被点击的元素及其祖先，如果找到nativeclick则手动触发<button>：

// ↓↓↓ 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>元素对我来说已经足够了，但可能需要注意更多标记名称。根据需要进行调整。

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

2 个答案: