美文网首页
Ionic+ngCorodva 实现手机震动功能

Ionic+ngCorodva 实现手机震动功能

作者: 誓词倾城 | 来源:发表于2015-11-14 19:34 被阅读1474次

    ngCordova安装

    • 安装bower(方便安装ngCordova):npm install -g bower
    • 安装ngCordova: bower install ngCordova

    提示: 对于ENOGIT git is not installed or not in the PATH的错误,是因为没有找到git,你需要:

    1. 安装git,通过git bash执行上述命令
    2. 如果已经安装了git,可以配置git环境变量, 如:C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd 加入path,配置完成,重新启动cmd

    安装震动插件:

    • 进入项目文件执行:
    //查看目录testApp(项目名称)\platforms\android\assets\www\plugins\
    //有没有 cordova-plugin-vibration
    //有就是添加成功cordova plugin add org.apache.cordova.vibration ```
    - **编译项目:**
    
    ![编译.png](https://img.haomeiwen.com/i935378/1051a09d990ec22c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    - 编译成功后:
    ``` java
    //查看 testApp\platforms\android\AndroidManifest.xml 中有没有添加
    <uses-permission android:name="android.permission.VIBRATE" /> 权限
    //查看 G:\Ionic\testApp\platforms\android\res\xml\config.xml 有没有
    <feature name="Vibration">
    <param name="android-package" value="org.apache.cordova.vibration.Vibration" />
    </feature>
    //有就是添加成功,没有则需要 重新 build```
    ##添加代码
    - 编辑controller.js 传入参数 **$cordovaVibration**
    ``` javascript
    .controller('VibrationCtrl', function($scope, $cordovaVibration)
     { 
      //设置调用函数 startVib 
      $scope.startVib=function(){ 
        // 震动 1000ms 
        $cordovaVibration.vibrate(1000); 
      };
    })
    
    • 编辑app.js,给绑定controller与html
    //切记添加参数 ngCordova
    angular.module('starter', ['ionic', 'ngCordova','starter.controllers', 'starter.services'])
    //找到相应的路由
    .state('tab.dash', 
    { 
        url: '/dash', 
        views: { 
            'tab-dash': { 
                 templateUrl: 'templates/tab-dash.html', 
                 //绑定controller 
                 controller: 'VibrationCtrl' 
            } 
        } 
    })
    
    • 编辑tab-dash.html
    <!-- 设置点击的action为函数startVib( )--> 
    <button ng-click='startVib()' class="button button-block button-royal padding-top">震动</button>
    

    小结

    至此,震动功能就添加成功了,连接真机测试即可。
    ngCordova中其他插件使用方式与本文相差无几,可以参考本文章的使用方法

    相关文章

      网友评论

          本文标题:Ionic+ngCorodva 实现手机震动功能

          本文链接:https://www.haomeiwen.com/subject/cfrkhttx.html