下面是效果图：
1、安装插件
cordova plugin add /EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
2、测试使用
&a href="#"class="btn"onclick="window.plugins.socialsharing.share('Message only')"&Share Message&/a&
&a href="#"class="btn"onclick="window.plugins.socialsharing.share(null, null, '/img/bdlogo.gif', null)"&Share Image&/a&
&a href="#"class="btn"onclick="window.plugins.socialsharing.shareViaSMS('My cool message', null, function(msg) {console.log('ok: ' + msg)}, function(msg) {alert('error: ' + msg)})"&Share via SMS&/a&
插件下载地址：
注意：插件中默认配置的是我自己的key，如果想测试效果，请将ionic应用的config.xml里的widget中ID 设置为
id="com.byxx.test"
先看效果：
关键代码：
&div style="text-align: center"&
&button class="button button-assertive" ng-click="bdvoice()"&语音测试&/button&
controller
$scope.vm = {
str: "我是一个好人，这是一个cordova百度语音插件"
$scope.bdvoice = function () {
if (window.plugins.BdVoice) {
window.plugins.BdVoice.speakout($scope.vm.str, function (success) {
}, function (fail) {
这是插件代码截图：
下面来看使用方法：
下载完插件后
1、修改bdvoice\src\android\Keys.java下面的App ID、API Key、Secret Key。获取key请移步：
2、安装。在项目下打开cmd，执行 cordova plugin add D:\WebStormWorkSpace\ionic\plugin\bdvoice(这是你的插件下载后存放地址)
if (window.plugins.BdVoice) {
window.plugins.BdVoice.speakout($scope.vm.str, function (success) {
}, function (fail) {
使用ionic开发的一大问题就是有些需要调用原生的东西，还是需要自己去动手编写插件，关于插件的开发，可以参考我的
下面我将介绍如何开发出支付宝支付插件：
先看下图效果：
1、获取支付宝的PID和Key
这里省略不说，需要技术支持的联系我。
2、客户端cordova插件开发
这里以Android版为例说明，IOS的大同小异
在电脑上创建一个文件夹(这里选择D盘，命名为IonicAlipay)
在IonicAlipay中创建src、www、plugin.xml 两个文件夹及一个xml描述文件
在src文件夹中创建一个android文件夹(里面再创建一个lib文件夹来存储支付宝的包文件)，www文件夹中创建ionicalipay.js文件。
以上步骤可以使用pluginman来快捷实现，这里我就不说了。
下面就是插件开发的核心了
1、下载支付宝的demo
2、复制支付宝的jar包(支付宝钱包支付接口开发包2.0标准版()\DEMO\客户端demo\alipay-sdk-common)到IonicAlipay\src\android\lib文件目录下。我这里使用的是alipaySdk-.jar
3、复制支付宝Demo中的几个公共类(SignUtils.java、PayResult.java、Base64.java)到IonicAlipay\src\android目录下并修改对应的package名称
4、修改Demo中PayDemoActivity.java文件的代码，主要是让其继承CordovaPlugin实现
execute方法，便于js的调用。
这里的调用代码主要是以下一段：具体业务逻辑代码这里就不啰嗦了，可以自己修改。
Runnable payRunnable = new Runnable() {
public void run() {
PayTask alipay = new PayTask(cordova.getActivity());
String result = alipay.pay(payInfo);
Log.i(TAG, "result = " + result);
callbackContext.success(result); // Thread-safe.
Message msg = new Message();
msg.what = SDK_PAY_FLAG;
mHandler.sendMessage(msg);
5、编写IonicAlipay\plugin.xml文件。
这里主要要注意如下代码
&config-file target="AndroidManifest.xml" parent="/manifest/application"&
android:name="com.alipay.sdk.app.H5PayActivity"
android:configChanges="orientation|keyboardHidden|navigation"
android:exported="false"
android:screenOrientation="behind" &
&/activity&
android:name="com.alipay.sdk.auth.AuthActivity"
android:configChanges="orientation|keyboardHidden|navigation"
android:exported="false"
android:screenOrientation="behind" &
&/activity&
&/config-file&
最后我们得到以下几个调用支付宝接口的文件：
点击下载：
这里主要说明下Keys.java和IonicAlipay.java两个文件，其他的不需要动
Keys.java：这个很简单主要是放了四个静态常量，按照注释说明填上即可。
IonicAlipay.java：这里主要注意自定义参数及支付成功回调地址的修改。自定义参数：可以通过url拼接上去，支付宝回调地址：支付宝在支付成功后会回调你传给它的URL地址，反馈回调结果给你的服务器，虽然客户端也有返回，但不能作为支付成功的依据。
下面看下js文件：
这个文件很简单，就是定义了一个IonicAlipay的对象在window.plugins上。
最后，就是插件的描述文件plugin.xml。
至此，整个插件就算完结了。
cordova plugin add /cordova-sms/cordova-sms-plugin.git
&div class="col col-25 whiteFore redBackGround" style="padding: 0text-align:line-height:1"
ng-click="sendMsg()"&
&img ng-src="img/shop/dx.png" height="20px" width="20px" style="margin-top:0.3rem"&&br&
$scope.sendMsg = function (mobilePhone) {
console.log("发送消息:" + mobilePhone);
var options = {
replaceLineBreaks: false, // true to replace \n by a new line, false by default
android: {
intent: 'INTENT'
// send SMS with the native android SMS messaging
//intent: '' // send SMS without open any other app
$cordovaSms.send(mobilePhone, '内容', options)
参考资料：
在ionic的应用中，经常会使用到点击直接拨打电话功能，这个在ionic中是如下实现的：
调用部分：
&div class="col col-25 whiteFore" style="padding: 0text-align:line-height:1;background: #ff9402;"
ng-click="callPhone()"&
&img ng-src="img/shop/tel.png" height="20px" width="20px" style="margin-top:0.3rem"&&br&
$scope.callPhone = function (mobilePhone) {
console.log("拨打:" + mobilePhone);
$window.location.href = "tel:" + mobileP
效果如下：
注意：需要在ionic项目的config文件中添加如下代码
&access launch-external=”yes” origin=”tel:*”/&
短信发送功能参照此处：
主要用来监控网络的连接状态插件，使用方法：
安装插件：
cordova plugin add org.apache.cordova.network-information
在app.js的run方法中加入以下代码：
//检查网络状态
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function (event, networkState) {
$cordovaToast.showShortBottom('已通过' + $cordovaNetwork.getNetwork() + '连接至网络！');
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function (event, networkState) {
//提醒用户的网络异常
$cordovaToast.showShortBottom('网络连接异常，请检查网络！');
效果如下：
可以修改ioniccss的样式，但那样比较麻烦，建议在自己的css样式里面添加：
ion-tabs.tabs-color-active-positive .tab-item.tab-item-active, ion-tabs.tabs-color-active-positive .tab-item.active, ion-tabs.tabs-color-active-positive .tab-item.activated{
$ionicPlatform
一个angular抽象的。
用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。
onHardwareBackButton(callback)
一些平台有硬件的后退按钮，因此可以用这种方法绑定到它。
当该事件发生时，触发回调函数。
offHardwareBackButton(callback)
移除一个后退按钮的监听事件。
最初绑定的监视器函数。
registerBackButtonAction(callback, priority, [actionId])
注册一个硬件后退按钮动作。当点击按钮时，只有一个动作会执行，因此该方法决定了注册的后退按钮动作具有最高的优先级。
例如，如果一个动作表已经显示，后退按钮应该关闭这个动作表，但是它不应该还能返回一个页面视图或关闭一个打开的模型。
当点击返回按钮时触发，如果该监视器具有最高的优先级。
仅最高优先级的会执行。
该id指定这个动作。默认：一个随机且唯一的id。
返回: function 一个被触发的函数，将会注销该后退按钮动作。
ready([callback])
一旦设备就绪，则触发一个回调函数，或如果该设备已经就绪，则立即调用。
触发的函数。
返回: promise 当设备就绪后，就会解决一个 promise。
ionic.Platform
ready(callback)
设备就绪后触发一个回调函数，或如果设备已经就绪理解触发。该方法可以随处运行而无需通过任何附加方法封装。当一个app包含一个web视图（Cordova），当设备就绪后它将会触发回调函数。如果该app包含一个web浏览器，它会在window.load之后触发回调。
调用的函数
返回当前设备（通过cordova提供）。
返回: 对象设备对象。
isWebView()
返回: boolean验证我们是否附带web视图运行（比如Cordova）。
返回: boolean 是否在iPad上运行。
返回: boolean 是否在iOS上运行。
isAndroid()
返回: boolean 是否在Android上运行。
isWindowsPhone()
返回: boolean 是否在Windows手机上运行。
platform()
返回: string 当前平台的名字。
返回: string 当前设备平台的版本。
showStatusBar(shouldShow)
显示或隐藏设备状态栏（用Cordova）。
shouldShow
是否显示状态栏。
fullScreen([showFullScreen], [showStatusBar])
设置app是否全屏（用Cordova）。
showFullScreen
是否设置app全屏。默认为true。
showStatusBar
是否显示设备状态栏。默认为false。
boolean isReady
设备是否就绪。
boolean isFullScreen
设备是否全屏。
Array(string) platforms
一个所有平台的数组。
string grade
当前平台是什么级别的。
ionic.DomUtil
requestAnimationFrame(callback)(别号: ionic.requestAnimationFrame)
触发，或一个polyfill如果不可用。
触发下一个框架时，调用该函数。
animationFrameThrottle(callback)(别号: ionic.animationFrameThrottle)
当给定一个回调函数时，如果在框架动画之间，被调用100次，添加 Throttle 将会使它只运行最后的100次调用。
一个函数会被requestAnimationFrame终止。
返回: function 一个函数会传递一个回调。回调传递接收的内容返回给被调用的函数。
getPositionInParent(element)
获取一个元素在容器内滚动的偏移。
DOMElement
找到便宜的元素。
返回: object一个位置对象具有如下属性：
{number} left 元素的左偏移。
{number} top 元素的上偏移。
ready(callback)
当DOM就绪后调用一个函数，或如果它已经就行则立即调用。
被掉用的函数。
getTextBounds(textNode)
获取一个矩形占用的textNode给定的边界。
DOMElement
textNode查找的边界。
返回: object 一个对象占据边界的节点。属性：
{number} left textNode左侧位置。
{number} right textNode右侧位置。
{number} top textNode上位置。
{number} bottom textNode下位置。
{number} width textNode的宽度。
{number} height textNode的高度。
getChildIndex(element, type)
在给定的元素的指定类型内获取第一个子节点的索引。
DOMElement
找到索引的元素。
与子元素对应的节点名称。
返回: number 索引，或-1，匹配类型的子节点名称。
getParentWithClass(element, className)
DOMElement
返回: DOMElement 匹配最近的父元素类名，或为空。
getParentWithClass(element, className)
DOMElement
返回: DOMElement 匹配最近的父元素或自身，或为空。
rectContains(x, y, x1, y1, x2, y2)
返回: boolean 由{x1,y1,x2,y2}定义的矩形内部是否与{x,y}匹配。
ionic.EventController
trigger(eventType, data, [bubbles], [cancelable])(别号: ionic.trigger)
触发的事件。
事件的数据。提示： 通过{target: targetElement}传递。
事件是否在DOM中冒泡。
cancelable
事件是否能被取消。
on(type, callback, element)(别号: ionic.on)
监听一个元素上的事件。
监听的事件。
触发监听器。
DOMElement
监听该事件的元素。
off(type, callback, element)(别号: ionic.off)
移除一个事件的监听器。
DOMElement
onGesture(eventType, callback, element)(别号: ionic.onGesture)
在一个元素上添加一个手势事件监听器。
可用的事件类型（来自）：
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown,
dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight,
transform, transformstart, transformend, rotate, pinch, pinchin, pinchout,
touch, release
监听的手势事件。
function(e)
当手势发生时，触发的函数。
DOMElement
监听事件的angular元素。
offGesture(eventType, callback, element)(别号: ionic.offGesture)
移除一个元素上的事件监听器。
function(e)
之前添加的监听器。
DOMElement
被监听的元素。
在Android 和 iOS中, Ionic会试图阻止键盘的模糊输入以及聚焦元素，当在视图中滚动出现的时候。为了这项工作，任何可以获取焦点的元素必须在一个或一个类似于带有滚动视图的指令内。
在获取焦点时，它会试图阻止原生的滚动溢出，这可能会导致布局问题，比如将header挤到上面，并超出视野。
键盘修复可以和最好的协同工作，尽管没有它，也会执行良好。然而，如果你使用Cordova的话，就没有理由用该插件。
当键盘显示的时候隐藏
当键盘被打开的时候，要隐藏一个元素，添加hide-on-keyboard-open类。
&div class="hide-on-keyboard-open"&
&div id="google-map"&&/div&
使用该插件的用法可以参考 。
Android平台注意事项
如果你的app全屏运行，即config.xml文件内有&preference name="Fullscreen" value="true" /&，你需要手动设置ionic.Platform.isFullScreen = true。
你可以配置web视图的行为，通过设置或adjustPan来显示键盘，在你app中AndroidManifest.xml的adjustResize 或 adjustNothing行为。 adjustResize为Ionic推荐设置，但是如果处于一些原因你使用了adjustPan，那么你需要设置ionic.Platform.isFullScreen = true。
&activity android:windowSoftInputMode="adjustResize"&
iOS平台注意事项
如果在input获取焦点时，你app的内容（包含header）被挤到上面或视图以外，就需要尝试设置cordova.plugins.Keyboard.disableScroll(true)。这并不会在Ionic滚动视图中禁用滚动，相反，它会禁用原生的滚动溢出，当自动发生input获取焦点在键盘之后时。
keyboard-attach
keyboard-attach是一个属性指令，在键盘显示时，它会导致一个元素悬浮在键盘上方。目前仅支持指令。
该指令依赖。
Android设备未全屏模式中，即，在你的config.xml文件里设置了&preference name="Fullscreen" value="true" /&，该指令是不必要的，因为她默认的行为。
在iOS中，在你的footer中有一个input，你需要设置cordova.plugins.Keyboard.disableScroll(true)。
&ion-footer-bar align-title="left" keyboard-attach class="bar-assertive"&
&h1 class="title"&标题!&/h1&
&/ion-footer-bar&
首先编写一个storage的指令，代码如下：
* localStorage使用
utilCtrlModule.factory('Storage', function () {
set: function (key, data) {
return window.localStorage.setItem(key, window.JSON.stringify(data));
get: function (key) {
return window.JSON.parse(window.localStorage.getItem(key));
remove: function (key) {
return window.localStorage.removeItem(key);
接下来就可以轻松使用localStorage了，创建模块时依赖注入Storage，使用时即可调用Storage.set(key, data)、Storage.(key)、Storage.remove(key)方法来操纵localStorage了。
长按 : on-hold
在屏幕同一位置按住超过500ms，将触发on-hold事件：
你可以在任何元素上使用这个指令挂接监听函数：
on-hold=“…”…
示例代码：
ng-controller=”ezCtrl”&
&ion-header-bar class=”bar-positive”
on-hold=”show_delete();”&
&h1 class=”title”&on-hold&/h1&
&/ion-header-bar&
&ion-content&
&ion-list ng-repeat=”item in items”&
&ion-item&
&ion-delete-button class=”ion-minus-circled”&&/ion-delete-button&
&ion-reorder-button class=”ion-navicon”&&/ion-reorder-button&
&/ion-item&
&/ion-list&
&/ion-content&
&ion-footer-bar class=”bar-positive”&&/ion-footer-bar&
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicListDelegate) {
$scope.items=[“China”,”Japan”,”India”,”Russian”];
$scope.show_delete = function(){
$ionicListDelegate.showDelete(true);
敲击 : on-tap
在屏幕上快速点击一次（停留时间不超过250ms），将触发on-tap事件：
可以在任何元素上使用这个指令挂接事件监听函数：
on-tap=“…”…
示例代码：
&meta name=”viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height”&
&script src=”ionic.bundle.min.js”&&/script&
&link rel=”stylesheet” type=”text/css” href=”ionic.min.css”&
ng-controller=”ezCtrl”&
&ion-header-bar class=”bar-positive”&
&h1 class=”title”&on-tap&/h1&
&/ion-header-bar&
&ion-content&
&ion-list ng-repeat=”item in items”&
&ion-item on-tap=”show(item);”&
&ion-reorder-button class=”ion-navicon”&&/ion-reorder-button&
&/ion-item&
&/ion-list&
&/ion-content&
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicPopup) {
$scope.items=[“England”,”Japan”,”India”,”Russian”];
$scope.show = function(item){
$ionicPopup.alert({
title : “警告!”,
template : “为什么要敲 “+ item + “?”
双击 : on-double-tap
在屏幕上快速敲击两次，将触发on-double-tap事件：
可以在任何元素上使用这个指令挂接事件监听函数：
on-double-tap=“…”…
示例代码：
ng-controller=”ezCtrl”&
&ion-header-bar class=”bar-positive” on-double-tap=”title=’I am double tapped!'”&
&h1 class=”title”&{{title}}&/h1&
&/ion-header-bar&
&ion-content&
&p ng-include=”‘txt/xiyouji.txt'”&&/p&
&/ion-content&
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
$scope.title = “on-double-tap”;
按下/松开 on-touch/on-release
在屏幕上按下手指或鼠标键时，会立即触发on-touch事件；当手指抬起或鼠标键松开时， 会立即触发on-release事件。
可以在任何元素上挂接响应的事件监听函数：
on-touch=“…” on-release=“…”…
示例代码：
ng-controller=”ezCtrl”&
&ion-header-bar class=”bar-positive” ng-class=”[style]”
on-touch=”style=’bar-assertive'” on-release=”style=’bar-positive'”&
&h1 class=”title”&on-touche/on-release&/h1&
&/ion-header-bar&
&ion-content&
&img src=”img/0021.png”&
&/ion-content&
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
拖拽 : on-drag
在屏幕上按住并移动时，触发on-drag拖拽事件：
根据运动方向的不同，可以细分为以下几种事件：
on-drag – 向所有方向拖动时都触发此事件
on-drag-up – 向上拖动时触发此事件
on-drag-down – 向下拖动时触发此事件
on-drag-left – 向左拖动时触发此事件
on-drag-right – 向右拖动时触发此事件
可以在任意元素上使用这些指令挂接对应的事件监听函数：
on-drag=“…”…
示例代码：
ng-controller=”ezCtrl”&
&ion-header-bar class=”bar-positive”&
&h1 class=”title”&on-drag&/h1&
&/ion-header-bar&
&div class=”scroll-content has-header padding”&
&img src=”img/baymax.png” on-touch=”onTouch($event)” on-drag=”onDrag($event);”&
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
$scope.onTouch = function($event){
ox = $event.target.offsetL
oy = $event.target.offsetT
$scope.onDrag = function($event){
var el = $event.target,
dx = $event.gesture.deltaX,
dy = $event.gesture.deltaY;
el.style.left = ox + dx + “px”;
el.style.top = oy + dy + “px”;
划动 : on-swipe
在屏幕上按住并快速拖动时，将触发on-swipe划动事件：
根据划动方向的不同，可细分为以下指令：
on-swipe – 向任何方向的划动都触发事件
on-swipe-up – 向上划动时触发事件
on-swipe-down – 向下划动时触发事件
on-swipe-left – 向左划动时触发事件
on-swipe-right – 向右划动时触发事件
可以在任何元素上使用这些指令挂接事件监听函数：
on-swipe=“…”…
示例代码：
&body ng-controller=”ezCtrl”&
&div class=”scroll-content padding”
on-swipe-up=”onSwipeUp()”
on-swipe-down=”onSwipeDown()”
on-swipe-left=”onSwipeLeft()”
on-swipe-right=”onSwipeRight()”&
&p class=”padding”&按住鼠标快速划！&/p&
&i class=”icon {{icon}}”&&/i&
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope){
$scope.icon=”ion-arrow-expand”;
$scope.onSwipeUp = function(){
$scope.icon=”ion-arrow-up-a”;
$scope.onSwipeDown = function(){
$scope.icon=”ion-arrow-down-a”;
$scope.onSwipeLeft = function(){
$scope.icon=”ion-arrow-left-a”;
$scope.onSwipeRight = function(){
$scope.icon=”ion-arrow-right-a”;
脚本接口 : $ionicGesture
除了使用之前介绍的特定指令实现手势事件的监听，也可以使用$ionicGesture服务 注册/解除手势事件监听：
on(eventType,callback,$element,options) – 注册手势事件监听函数
参数eventType是支持的事件类型，参看下面介绍；参数callback指定监听函数； 参数$element是要绑定事件的jqLite元素。
on()方法返回的是一个ionic.gesture对象，可供解除监听用。
off(gesture,eventType,callback) – 解除手势事件监听函数
参数gesture是on()方法返回的结果对象，参数callback是要移除的监听函数。
$ionicGesture服务支持的事件类型有：
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release
示例代码：
ng-controller=”ezCtrl”&
&ion-header-bar class=”bar-positive”&
&h1 class=”title”&$ionicGesture&/h1&
&/ion-header-bar&
&ion-content class=”padding”&
&button class=”button” id=”test”&test&/button&
&/ion-content&
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup) {
var el = document.querySelector(“#test”);
$ionicGesture.on(“tap”,function(){
$ionicPopup.alert({
title : “提醒”,
template : “这个监听是用$ionicGesture服务注册的！”
},angular.element(el));1167人阅读
移动web（10）
ionic（2）
最近用ionic2写input autofocus事件，发现无论是autofocus还是focus()事件，在浏览器中测试，都没有效果，更别说在真机上了。纠结了一天，终于找到了解决方案。
在ngAfterViewInit事件后执行setTimeout事件，比如这样：
ngAfterViewInit(){
let input = this.myInput.nativeE
setTimeout(function(){
input.focus();
这样就没问题了，如果有些同学在真机测试时仍有问题，可以再在config.xml文件中加上以下代码：
&preference name="KeyboardDisplayRequiresUserAction" value="false" /&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：52768次
排名：千里之外
原创：35篇
(2)(7)(1)(6)(6)(1)(2)(2)(2)(2)(4)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'