iOS开发 蓝牙技术4.0详解

前言

前端时间,同学在做项目过程中遇到关于蓝牙方面的问题,今天我就给大家进行详细的进行讲解下蓝牙在iOS开发中的具体实现.在介绍蓝牙前,大家要搞清楚什么是蓝牙?

什么是蓝牙?

随着蓝牙低功耗技术BLE(Bluetooth Low Energy)的发展,蓝牙技术正在一步步成熟,如今的大部分移动设备都配备有蓝牙4.0,相比之前的蓝牙技术耗电量大大降低。从iOS的发展史也不难看出苹果目前对蓝牙技术也是越来越关注,例如苹果于2013年9月发布的iOS7就配备了iBeacon技术,这项技术完全基于蓝牙传输。但是众所周知苹果的设备对于权限要求也是比较高的,因此在iOS中并不能像Android一样随意使用蓝牙进行文件传输(除非你已经越狱)。知道什么是蓝牙之后,那么在iOS中进行蓝牙传输应用开发常用的框架有哪几种呢?

蓝牙在开发中的框架有哪些?

  1. GameKit.framework:iOS7之前的蓝牙通讯框架,从iOS7开始过期,但是目前多数应用还是基于此框架。
  2. MultipeerConnectivity.framework:iOS7开始引入的新的蓝牙通讯开发框架,用于取代GameKit。
  3. CoreBluetooth.framework:功能强大的蓝牙开发框架,要求设备必须支持蓝牙4.0。

蓝牙在开发中的框架优缺点?

现在就给大家来总结下这三种框架的优缺点. 
前两个框架使用起来比较简单,但是缺点也比较明显:仅仅支持iOS设备,传输内容仅限于沙盒或者照片库中用户选择的文件,并且第一个框架只能在同一个应用之间进行传输(一个iOS设备安装应用A,另一个iOS设备上安装应用B是无法传输的)。当然CoreBluetooth就摆脱了这些束缚,它不再局限于iOS设备之间进行传输,你可以通过iOS设备向Android、Windows Phone以及其他安装有蓝牙4.0芯片的智能设备传输,因此也是目前智能家居、无线支付等热门智能设备所推崇的技术。

蓝牙框架之GameKit框架

其实从名称来看这个框架并不是专门为了支持蓝牙传输而设计的,它是为游戏设计的。而很多游戏中会用到基于蓝牙的点对点信息传输,因此这个框架中集成了蓝牙传输模块。前面也说了这个框架本身有很多限制,但是在iOS7之前的很多蓝牙传输都是基于此框架的,所以有必要对它进行了解。GameKit中的蓝牙使用设计很简单,并没有给开发者留有太多的复杂接口,而多数连接细节开发者是不需要关注的。GameKit中提供了两个关键类来操作蓝牙连接:

GKPeerPickerController:蓝牙查找、连接用的视图控制器,通常情况下应用程序A打开后会调用此控制器的show方法来展示一个蓝牙查找的视图,一旦发现了另一个同样在查找蓝牙连接的客户客户端B就会出现在视图列表中,此时如果用户点击连接B,B客户端就会询问用户是否允许A连接B,如果允许后A和B之间建立一个蓝牙连接。

GKSession:连接会话,主要用于发送和接受传输数据。一旦A和B建立连接GKPeerPickerController的代理方法会将A、B两者建立的会话(GKSession)对象传递给开发人员,开发人员拿到此对象可以发送和接收数据。

其实理解了上面两个类之后,使用起来就比较简单了,下面就以一个图片发送程序来演示GameKit中蓝牙的使用。此程序一个客户端运行在模拟器上作为客户端A,另一个运行在iPhone真机上作为客户端B(注意A、B必须运行同一个程序,GameKit蓝牙开发是不支持两个不同的应用传输数据的)。两个程序运行之后均调用GKPeerPickerController来发现周围蓝牙设备,一旦A发现了B之后就开始连接B,然后iOS会询问用户是否接受连接,一旦接受之后就会调用GKPeerPickerController的-(void)peerPickerController:(GKPeerPickerController )picker didConnectPeer:(NSString )peerID toSession:(GKSession *)session代理方法,在此方法中可以获得连接的设备id(peerID)和连接会话(session);此时可以设置会话的数据接收句柄(相当于一个代理)并保存会话以便发送数据时使用;一旦一端(假设是A)调用会话的sendDataToAllPeers: withDataMode: error:方法发送数据,此时另一端(假设是B)就会调用句柄的 
- (void) receiveData:(NSData )data fromPeer:(NSString )peer inSession: (GKSession )session context:(void )context方法,在此方法可以获得发送数据并处理。下面是程序代码:

#import "ViewController.h"
#import <GameKit/GameKit.h>@interface ViewController ()<GKPeerPickerControllerDelegate,UIImagePickerControllerDelegate,UINavigationBarDelegate>@property (weak, nonatomic) IBOutlet UIImageView *imageView;//照片显示视图
@property (strong,nonatomic) GKSession *session;//蓝牙连接会话@end@implementation ViewController#pragma mark - 控制器视图方法
- (void)viewDidLoad {[super viewDidLoad];GKPeerPickerController *pearPickerController=[[GKPeerPickerController alloc]init];pearPickerController.delegate=self;[pearPickerController show];
}#pragma mark - UI事件
- (IBAction)selectClick:(UIBarButtonItem *)sender {UIImagePickerController *imagePickerController=[[UIImagePickerController alloc]init];imagePickerController.delegate=self;[self presentViewController:imagePickerController animated:YES completion:nil];
}- (IBAction)sendClick:(UIBarButtonItem *)sender {NSData *data=UIImagePNGRepresentation(self.imageView.image);NSError *error=nil;[self.session sendDataToAllPeers:data withDataMode:GKSendDataReliable error:&error];if (error) {NSLog(@"发送图片过程中发生错误,错误信息:%@",error.localizedDescription);}
}#pragma mark - GKPeerPickerController代理方法
/***  连接到某个设备**  @param picker  蓝牙点对点连接控制器*  @param peerID  连接设备蓝牙传输ID*  @param session 连接会话*/
-(void)peerPickerController:(GKPeerPickerController *)picker didConnectPeer:(NSString *)peerID toSession:(GKSession *)session{self.session=session;NSLog(@"已连接客户端设备:%@.",peerID);//设置数据接收处理句柄,相当于代理,一旦数据接收完成调用它的-receiveData:fromPeer:inSession:context:方法处理数据[self.session setDataReceiveHandler:self withContext:nil];[picker dismiss];//一旦连接成功关闭窗口
}#pragma mark - 蓝牙数据接收方法
- (void) receiveData:(NSData *)data fromPeer:(NSString *)peer inSession: (GKSession *)session context:(void *)context{UIImage *image=[UIImage imageWithData:data];self.imageView.image=image;UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);NSLog(@"数据发送成功!");
}
#pragma mark - UIImagePickerController代理方法
-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{self.imageView.image=[info objectForKey:UIImagePickerControllerOriginalImage];[self dismissViewControllerAnimated:YES completion:nil];
}-(void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{[self dismissViewControllerAnimated:YES completion:nil];
}
@end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

运行效果(左侧是真机,右侧是模拟器,程序演示了两个客户端互发图片的场景:首先是模拟器发送图片给真机,然后真机发送图片给模拟器) 
这里写图片描述

蓝牙框架之MultipeerConnectivity框架

前面已经说了GameKit相关的蓝牙操作类从iOS7已经全部过期,苹果官方推荐使用MultipeerConnectivity代替。但是应该了解,MultipeerConnectivity.framework并不仅仅支持蓝牙连接,准确的说它是一种支持Wi-Fi网络、P2P Wi-Fi已经蓝牙个人局域网的通信框架,它屏蔽了具体的连接技术,让开发人员有统一的接口编程方法。通过MultipeerConnectivity连接的节点之间可以安全的传递信息、流或者其他文件资源而不必通过网络服务。此外使用MultipeerConnectivity进行近场通信也不再局限于同一个应用之间传输,而是可以在不同的应用之间进行数据传输(当然如果有必要的话你仍然可以选择在一个应用程序之间传输)。

要了解MultipeerConnectivity的使用必须要清楚一个概念:广播(Advertisting)和发现(Disconvering),这很类似于一种Client-Server模式。假设有两台设备A、B,B作为广播去发送自身服务,A作为发现的客户端。一旦A发现了B就试图建立连接,经过B同意二者建立连接就可以相互发送数据。在使用GameKit框架时,A和B既作为广播又作为发现,当然这种情况在MultipeerConnectivity中也很常见。

A.广播

无论是作为服务器端去广播还是作为客户端去发现广播服务,那么两个(或更多)不同的设备之间必须要有区分,通常情况下使用MCPeerID对象来区分一台设备,在这个设备中可以指定显示给对方查看的名称(display name)。另外不管是哪一方,还必须建立一个会话MCSession用于发送和接受数据。通常情况下会在会话的-(void)session:(MCSession )session peer:(MCPeerID )peerID didChangeState:(MCSessionState)state代理方法中跟踪会话状态(已连接、正在连接、未连接);在会话的-(void)session:(MCSession )session didReceiveData:(NSData )data fromPeer:(MCPeerID *)peerID代理方法中接收数据;同时还会调用会话的-(void)sendData: toPeers:withMode: error:方法去发送数据。

广播作为一个服务器去发布自身服务,供周边设备发现连接。在MultipeerConnectivity中使用MCAdvertiserAssistant来表示一个广播,通常创建广播时指定一个会话MCSession对象将广播服务和会话关联起来。一旦调用广播的start方法周边的设备就可以发现该广播并可以连接到此服务。在MCSession的代理方法中可以随时更新连接状态,一旦建立了连接之后就可以通过MCSession的connectedPeers获得已经连接的设备。

B.发现

前面已经说过作为发现的客户端同样需要一个MCPeerID来标志一个客户端,同时会拥有一个MCSession来监听连接状态并发送、接受数据。除此之外,要发现广播服务,客户端就必须要随时查找服务来连接,在MultipeerConnectivity中提供了一个控制器MCBrowserViewController来展示可连接和已连接的设备(这类似于GameKit中的GKPeerPickerController),当然如果想要自己定制一个界面来展示设备连接的情况你可以选择自己开发一套UI界面。一旦通过MCBroserViewController选择一个节点去连接,那么作为广播的节点就会收到通知,询问用户是否允许连接。由于初始化MCBrowserViewController的过程已经指定了会话MCSession,所以连接过程中会随时更新会话状态,一旦建立了连接,就可以通过会话的connected属性获得已连接设备并且可以使用会话发送、接受数据。

下面用两个不同的应用程序来演示使用MultipeerConnectivity的使用过程,其中一个应用运行在模拟器中作为广播节点,另一个运行在iPhone真机上作为发现节点,并且实现两个节点的图片互传。

首先看一下作为广播节点的程序:

界面: 
这里写图片描述 
点击“开始广播”来发布服务,一旦有节点连接此服务就可以使用“选择照片”来从照片库中选取一张图片并发送到所有已连接节点。 
程序:

#import "ViewController.h"
#import <MultipeerConnectivity/MultipeerConnectivity.h>@interface ViewController ()<MCSessionDelegate,MCAdvertiserAssistantDelegate, UIImagePickerControllerDelegate,UINavigationControllerDelegate>
@property (strong,nonatomic) MCSession *session;
@property (strong,nonatomic) MCAdvertiserAssistant *advertiserAssistant;
@property (strong,nonatomic) UIImagePickerController *imagePickerController;@property (weak, nonatomic) IBOutlet UIImageView *photo;@end@implementation ViewController#pragma mark - 控制器视图事件
- (void)viewDidLoad {[super viewDidLoad];//创建节点,displayName是用于提供给周边设备查看和区分此服务的MCPeerID *peerID=[[MCPeerID alloc]initWithDisplayName:@"KenshinCui_Advertiser"];_session=[[MCSession alloc]initWithPeer:peerID];_session.delegate=self;//创建广播_advertiserAssistant=[[MCAdvertiserAssistant alloc]initWithServiceType:@"cmj-stream" discoveryInfo:nil session:_session];_advertiserAssistant.delegate=self;}#pragma mark - UI事件
- (IBAction)advertiserClick:(UIBarButtonItem *)sender {//开始广播[self.advertiserAssistant start];
}
- (IBAction)selectClick:(UIBarButtonItem *)sender {_imagePickerController=[[UIImagePickerController alloc]init];_imagePickerController.delegate=self;[self presentViewController:_imagePickerController animated:YES completion:nil];
}#pragma mark - MCSession代理方法
-(void)session:(MCSession *)session peer:(MCPeerID *)peerID didChangeState:(MCSessionState)state{NSLog(@"didChangeState");switch (state) {case MCSessionStateConnected:NSLog(@"连接成功.");break;case MCSessionStateConnecting:NSLog(@"正在连接...");break;default:NSLog(@"连接失败.");break;}
}
//接收数据
-(void)session:(MCSession *)session didReceiveData:(NSData *)data fromPeer:(MCPeerID *)peerID{NSLog(@"开始接收数据...");UIImage *image=[UIImage imageWithData:data];[self.photo setImage:image];//保存到相册UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);}
#pragma mark - MCAdvertiserAssistant代理方法#pragma mark - UIImagePickerController代理方法
-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{UIImage *image=[info objectForKey:UIImagePickerControllerOriginalImage];[self.photo setImage:image];//发送数据给所有已连接设备NSError *error=nil;[self.session sendData:UIImagePNGRepresentation(image) toPeers:[self.session connectedPeers] withMode:MCSessionSendDataUnreliable error:&error];NSLog(@"开始发送数据...");if (error) {NSLog(@"发送数据过程中发生错误,错误信息:%@",error.localizedDescription);}[self.imagePickerController dismissViewControllerAnimated:YES completion:nil];
}
-(void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{[self.imagePickerController dismissViewControllerAnimated:YES completion:nil];
}
@end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82

再看一下作为发现节点的程序:

界面:

这里写图片描述 
点击“查找设备”浏览可用服务,点击服务建立连接;一旦建立了连接之后就可以点击“选择照片”会从照片库中选择一张图片并发送给已连接的节点。

程序:

#import "ViewController.h"
#import <MultipeerConnectivity/MultipeerConnectivity.h>@interface ViewController ()<MCSessionDelegate,MCBrowserViewControllerDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate>
@property (strong,nonatomic) MCSession *session;
@property (strong,nonatomic) MCBrowserViewController *browserController;
@property (strong,nonatomic) UIImagePickerController *imagePickerController;@property (weak, nonatomic) IBOutlet UIImageView *photo;
@end@implementation ViewController#pragma mark - 控制器视图事件
- (void)viewDidLoad {[super viewDidLoad];//创建节点MCPeerID *peerID=[[MCPeerID alloc]initWithDisplayName:@"KenshinCui"];//创建会话_session=[[MCSession alloc]initWithPeer:peerID];_session.delegate=self;}
#pragma mark- UI事件
- (IBAction)browserClick:(UIBarButtonItem *)sender {_browserController=[[MCBrowserViewController alloc]initWithServiceType:@"cmj-stream" session:self.session];_browserController.delegate=self;[self presentViewController:_browserController animated:YES completion:nil];
}
- (IBAction)selectClick:(UIBarButtonItem *)sender {_imagePickerController=[[UIImagePickerController alloc]init];_imagePickerController.delegate=self;[self presentViewController:_imagePickerController animated:YES completion:nil];
}#pragma mark - MCBrowserViewController代理方法
-(void)browserViewControllerDidFinish:(MCBrowserViewController *)browserViewController{NSLog(@"已选择");[self.browserController dismissViewControllerAnimated:YES completion:nil];
}
-(void)browserViewControllerWasCancelled:(MCBrowserViewController *)browserViewController{NSLog(@"取消浏览.");[self.browserController dismissViewControllerAnimated:YES completion:nil];
}#pragma mark - MCSession代理方法
-(void)session:(MCSession *)session peer:(MCPeerID *)peerID didChangeState:(MCSessionState)state{NSLog(@"didChangeState");switch (state) {case MCSessionStateConnected:NSLog(@"连接成功.");[self.browserController dismissViewControllerAnimated:YES completion:nil];break;case MCSessionStateConnecting:NSLog(@"正在连接...");break;default:NSLog(@"连接失败.");break;}
}
//接收数据
-(void)session:(MCSession *)session didReceiveData:(NSData *)data fromPeer:(MCPeerID *)peerID{NSLog(@"开始接收数据...");UIImage *image=[UIImage imageWithData:data];[self.photo setImage:image];//保存到相册UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);}
#pragma mark - UIImagePickerController代理方法
-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{UIImage *image=[info objectForKey:UIImagePickerControllerOriginalImage];[self.photo setImage:image];//发送数据给所有已连接设备NSError *error=nil;[self.session sendData:UIImagePNGRepresentation(image) toPeers:[self.session connectedPeers] withMode:MCSessionSendDataUnreliable error:&error];NSLog(@"开始发送数据...");if (error) {NSLog(@"发送数据过程中发生错误,错误信息:%@",error.localizedDescription);}[self.imagePickerController dismissViewControllerAnimated:YES completion:nil];
}
-(void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{[self.imagePickerController dismissViewControllerAnimated:YES completion:nil];
}
@end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90

在两个程序中无论是MCBrowserViewController还是MCAdvertiserAssistant在初始化的时候都指定了一个服务类型“cmj-photo”,这是唯一标识一个服务类型的标记,可以按照官方的要求命名,应该尽可能表达服务的作用。需要特别指出的是,如果广播命名为“cmj-photo”那么发现节点只有在MCBrowserViewController中指定为“cmj-photo”才能发现此服务。

运行效果: 
这里写图片描述

蓝牙框架之CoreBluetooth框架

无论是GameKit还是MultipeerConnectivity,都只能在iOS设备之间进行数据传输,这就大大降低了蓝牙的使用范围,于是从iOS6开始苹果推出了CoreBluetooth.framework,这个框架最大的特点就是完全基于BLE4.0标准并且支持非iOS设备。当前BLE应用相当广泛,不再仅仅是两个设备之间的数据传输,它还有很多其他应用市场,例如室内定位、无线支付、智能家居等等,这也使得CoreBluetooth成为当前最热门的蓝牙技术。

CoreBluetooth设计同样也是类似于客户端-服务器端的设计,作为服务器端的设备称为外围设备(Peripheral),作为客户端的设备叫做中央设备(Central),CoreBlueTooth整个框架就是基于这两个概念来设计的。

这里写图片描述 
外围设备和中央设备在CoreBluetooth中使用CBPeripheralManager和CBCentralManager表示。

CBPeripheralManager:外围设备通常用于发布服务、生成数据、保存数据。外围设备发布并广播服务,告诉周围的中央设备它的可用服务和特征。

CBCentralManager:中央设备使用外围设备的数据。中央设备扫描到外围设备后会就会试图建立连接,一旦连接成功就可以使用这些服务和特征。

外围设备和中央设备之间交互的桥梁是服务(CBService)和特征(CBCharacteristic),二者都有一个唯一的标识UUID(CBUUID类型)来唯一确定一个服务或者特征,每个服务可以拥有多个特征,下面是他们之间的关系: 
这里写图片描述 
一台iOS设备(注意iPhone4以下设备不支持BLE,另外iOS7.0、8.0模拟器也无法模拟BLE)既可以作为外围设备又可以作为中央设备,但是不能同时即是外围设备又是中央设备,同时注意建立连接的过程不需要用户手动选择允许,这一点和前面两个框架是不同的,这主要是因为BLE应用场景不再局限于两台设备之间资源共享了。 
A.外围设备

创建一个外围设备通常分为以下几个步骤: 
1. 创建外围设备CBPeripheralManager对象并指定代理。 
2. 创建特征CBCharacteristic、服务CBSerivce并添加到外围设备 
3. 外围设备开始广播服务(startAdvertisting:)。 
4. 和中央设备CBCentral进行交互。 
下面是简单的程序示例,程序有两个按钮“启动”和“更新”,点击启动按钮则创建外围设备、添加服务和特征并开始广播,一旦发现有中央设备连接并订阅了此服务的特征则通过更新按钮更新特征数据,此时已订阅的中央设备就会收到更新数据。 
这里写图片描述

#import "ViewController.h"
#import <CoreBluetooth/CoreBluetooth.h>
#define kPeripheralName @"Kenshin Cui's Device" //外围设备名称
#define kServiceUUID @"C4FB2349-72FE-4CA2-94D6-1F3CB16331EE" //服务的UUID
#define kCharacteristicUUID @"6A3E4B28-522D-4B3B-82A9-D5E2004534FC" //特征的UUID@interface ViewController ()<CBPeripheralManagerDelegate>@property (strong,nonatomic) CBPeripheralManager *peripheralManager;//外围设备管理器@property (strong,nonatomic) NSMutableArray *centralM;//订阅此外围设备特征的中心设备@property (strong,nonatomic) CBMutableCharacteristic *characteristicM;//特征
@property (weak, nonatomic) IBOutlet UITextView *log; //日志记录@end@implementation ViewController
#pragma mark - 视图控制器方法
- (void)viewDidLoad {[super viewDidLoad];
}#pragma mark - UI事件
//创建外围设备
- (IBAction)startClick:(UIBarButtonItem *)sender {_peripheralManager=[[CBPeripheralManager alloc]initWithDelegate:self queue:nil];
}
//更新数据
- (IBAction)transferClick:(UIBarButtonItem *)sender {[self updateCharacteristicValue];
}#pragma mark - CBPeripheralManager代理方法
//外围设备状态发生变化后调用
-(void)peripheralManagerDidUpdateState:(CBPeripheralManager *)peripheral{switch (peripheral.state) {case CBPeripheralManagerStatePoweredOn:NSLog(@"BLE已打开.");[self writeToLog:@"BLE已打开."];//添加服务[self setupService];break;default:NSLog(@"此设备不支持BLE或未打开蓝牙功能,无法作为外围设备.");[self writeToLog:@"此设备不支持BLE或未打开蓝牙功能,无法作为外围设备."];break;}
}
//外围设备添加服务后调用
-(void)peripheralManager:(CBPeripheralManager *)peripheral didAddService:(CBService *)service error:(NSError *)error{if (error) {NSLog(@"向外围设备添加服务失败,错误详情:%@",error.localizedDescription);[self writeToLog:[NSString stringWithFormat:@"向外围设备添加服务失败,错误详情:%@",error.localizedDescription]];return;}//添加服务后开始广播NSDictionary *dic=@{CBAdvertisementDataLocalNameKey:kPeripheralName};//广播设置[self.peripheralManager startAdvertising:dic];//开始广播NSLog(@"向外围设备添加了服务并开始广播...");[self writeToLog:@"向外围设备添加了服务并开始广播..."];
}
-(void)peripheralManagerDidStartAdvertising:(CBPeripheralManager *)peripheral error:(NSError *)error{if (error) {NSLog(@"启动广播过程中发生错误,错误信息:%@",error.localizedDescription);[self writeToLog:[NSString stringWithFormat:@"启动广播过程中发生错误,错误信息:%@",error.localizedDescription]];return;}NSLog(@"启动广播...");[self writeToLog:@"启动广播..."];
}
//订阅特征
-(void)peripheralManager:(CBPeripheralManager *)peripheral central:(CBCentral *)central didSubscribeToCharacteristic:(CBCharacteristic *)characteristic{NSLog(@"中心设备:%@ 已订阅特征:%@.",central,characteristic);[self writeToLog:[NSString stringWithFormat:@"中心设备:%@ 已订阅特征:%@.",central.identifier.UUIDString,characteristic.UUID]];//发现中心设备并存储if (![self.centralM containsObject:central]) {[self.centralM addObject:central];}/*中心设备订阅成功后外围设备可以更新特征值发送到中心设备,一旦更新特征值将会触发中心设备的代理方法:-(void)peripheral:(CBPeripheral *)peripheral didUpdateValueForCharacteristic:(CBCharacteristic *)characteristic error:(NSError *)error*///    [self updateCharacteristicValue];
}
//取消订阅特征
-(void)peripheralManager:(CBPeripheralManager *)peripheral central:(CBCentral *)central didUnsubscribeFromCharacteristic:(CBCharacteristic *)characteristic{NSLog(@"didUnsubscribeFromCharacteristic");
}
-(void)peripheralManager:(CBPeripheralManager *)peripheral didReceiveWriteRequests:(CBATTRequest *)request{NSLog(@"didReceiveWriteRequests");
}
-(void)peripheralManager:(CBPeripheralManager *)peripheral willRestoreState:(NSDictionary *)dict{NSLog(@"willRestoreState");
}
#pragma mark -属性
-(NSMutableArray *)centralM{if (!_centralM) {_centralM=[NSMutableArray array];}return _centralM;
}#pragma mark - 私有方法
//创建特征、服务并添加服务到外围设备
-(void)setupService{/*1.创建特征*///创建特征的UUID对象CBUUID *characteristicUUID=[CBUUID UUIDWithString:kCharacteristicUUID];//特征值
//    NSString *valueStr=kPeripheralName;
//    NSData *value=[valueStr dataUsingEncoding:NSUTF8StringEncoding];//创建特征/** 参数* uuid:特征标识* properties:特征的属性,例如:可通知、可写、可读等* value:特征值* permissions:特征的权限*/CBMutableCharacteristic *characteristicM=[[CBMutableCharacteristic alloc]initWithType:characteristicUUID properties:CBCharacteristicPropertyNotify value:nil permissions:CBAttributePermissionsReadable];self.characteristicM=characteristicM;
//    CBMutableCharacteristic *characteristicM=[[CBMutableCharacteristic alloc]initWithType:characteristicUUID properties:CBCharacteristicPropertyRead value:nil permissions:CBAttributePermissionsReadable];
//    characteristicM.value=value;/*创建服务并且设置特征*///创建服务UUID对象CBUUID *serviceUUID=[CBUUID UUIDWithString:kServiceUUID];//创建服务CBMutableService *serviceM=[[CBMutableService alloc]initWithType:serviceUUID primary:YES];//设置服务的特征[serviceM setCharacteristics:@[characteristicM]];/*将服务添加到外围设备*/[self.peripheralManager addService:serviceM];
}
//更新特征值
-(void)updateCharacteristicValue{//特征值NSString *valueStr=[NSString stringWithFormat:@"%@ --%@",kPeripheralName,[NSDate   date]];NSData *value=[valueStr dataUsingEncoding:NSUTF8StringEncoding];//更新特征值[self.peripheralManager updateValue:value forCharacteristic:self.characteristicM onSubscribedCentrals:nil];[self writeToLog:[NSString stringWithFormat:@"更新特征值:%@",valueStr]];
}
/***  记录日志**  @param info 日志信息*/
-(void)writeToLog:(NSString *)info{self.log.text=[NSString stringWithFormat:@"%@\r\n%@",self.log.text,info];
}
@end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156

流程如下(图中蓝色代表外围设备操作,绿色部分表示中央设备操作): 
这里写图片描述

B.中央设备

中央设备的创建一般可以分为如下几个步骤:

  1. 创建中央设备管理对象CBCentralManager并指定代理。
  2. 扫描外围设备,一般发现可用外围设备则连接并保存外围设备。
  3. 查找外围设备服务和特征,查找到可用特征则读取特征数据。 
    下面是一个简单的中央服务器端实现,点击“启动”按钮则开始扫描周围的外围设备,一旦发现了可用的外围设备则建立连接并设置外围设备的代理,之后开始查找其服务和特征。一旦外围设备的特征值做了更新,则可以在代理方法中读取更新后的特征值。 
    这里写图片描述
#import "ViewController.h"
#import <CoreBluetooth/CoreBluetooth.h>
#define kServiceUUID @"C4FB2349-72FE-4CA2-94D6-1F3CB16331EE" //服务的UUID
#define kCharacteristicUUID @"6A3E4B28-522D-4B3B-82A9-D5E2004534FC" //特征的UUID@interface ViewController ()<CBCentralManagerDelegate,CBPeripheralDelegate>@property (strong,nonatomic) CBCentralManager *centralManager;//中心设备管理器
@property (strong,nonatomic) NSMutableArray *peripherals;//连接的外围设备
@property (weak, nonatomic) IBOutlet UITextView *log;//日志记录@end@implementation ViewController
#pragma mark - 控制器视图事件
- (void)viewDidLoad {[super viewDidLoad];
}#pragma mark - UI事件
- (IBAction)startClick:(UIBarButtonItem *)sender {//创建中心设备管理器并设置当前控制器视图为代理_centralManager=[[CBCentralManager alloc]initWithDelegate:self queue:nil];
}#pragma mark - CBCentralManager代理方法
//中心服务器状态更新后
-(void)centralManagerDidUpdateState:(CBCentralManager *)central{switch (central.state) {case CBPeripheralManagerStatePoweredOn:NSLog(@"BLE已打开.");[self writeToLog:@"BLE已打开."];//扫描外围设备
//            [central scanForPeripheralsWithServices:@[[CBUUID UUIDWithString:kServiceUUID]] options:@{CBCentralManagerScanOptionAllowDuplicatesKey:@YES}];[central scanForPeripheralsWithServices:nil options:@{CBCentralManagerScanOptionAllowDuplicatesKey:@YES}];break;default:NSLog(@"此设备不支持BLE或未打开蓝牙功能,无法作为外围设备.");[self writeToLog:@"此设备不支持BLE或未打开蓝牙功能,无法作为外围设备."];break;}
}
/***  发现外围设备**  @param central           中心设备*  @param peripheral        外围设备*  @param advertisementData 特征数据*  @param RSSI              信号质量(信号强度)*/
-(void)centralManager:(CBCentralManager *)central didDiscoverPeripheral:(CBPeripheral *)peripheral advertisementData:(NSDictionary *)advertisementData RSSI:(NSNumber *)RSSI{NSLog(@"发现外围设备...");[self writeToLog:@"发现外围设备..."];//停止扫描[self.centralManager stopScan];//连接外围设备if (peripheral) {//添加保存外围设备,注意如果这里不保存外围设备(或者说peripheral没有一个强引用,无法到达连接成功(或失败)的代理方法,因为在此方法调用完就会被销毁if(![self.peripherals containsObject:peripheral]){[self.peripherals addObject:peripheral];}NSLog(@"开始连接外围设备...");[self writeToLog:@"开始连接外围设备..."];[self.centralManager connectPeripheral:peripheral options:nil];}}
//连接到外围设备
-(void)centralManager:(CBCentralManager *)central didConnectPeripheral:(CBPeripheral *)peripheral{NSLog(@"连接外围设备成功!");[self writeToLog:@"连接外围设备成功!"];//设置外围设备的代理为当前视图控制器peripheral.delegate=self;//外围设备开始寻找服务[peripheral discoverServices:@[[CBUUID UUIDWithString:kServiceUUID]]];
}
//连接外围设备失败
-(void)centralManager:(CBCentralManager *)central didFailToConnectPeripheral:(CBPeripheral *)peripheral error:(NSError *)error{NSLog(@"连接外围设备失败!");[self writeToLog:@"连接外围设备失败!"];
}#pragma mark - CBPeripheral 代理方法
//外围设备寻找到服务后
-(void)peripheral:(CBPeripheral *)peripheral didDiscoverServices:(NSError *)error{NSLog(@"已发现可用服务...");[self writeToLog:@"已发现可用服务..."];if(error){NSLog(@"外围设备寻找服务过程中发生错误,错误信息:%@",error.localizedDescription);[self writeToLog:[NSString stringWithFormat:@"外围设备寻找服务过程中发生错误,错误信息:%@",error.localizedDescription]];}//遍历查找到的服务CBUUID *serviceUUID=[CBUUID UUIDWithString:kServiceUUID];CBUUID *characteristicUUID=[CBUUID UUIDWithString:kCharacteristicUUID];for (CBService *service in peripheral.services) {if([service.UUID isEqual:serviceUUID]){//外围设备查找指定服务中的特征[peripheral discoverCharacteristics:@[characteristicUUID] forService:service];}}
}
//外围设备寻找到特征后
-(void)peripheral:(CBPeripheral *)peripheral didDiscoverCharacteristicsForService:(CBService *)service error:(NSError *)error{NSLog(@"已发现可用特征...");[self writeToLog:@"已发现可用特征..."];if (error) {NSLog(@"外围设备寻找特征过程中发生错误,错误信息:%@",error.localizedDescription);[self writeToLog:[NSString stringWithFormat:@"外围设备寻找特征过程中发生错误,错误信息:%@",error.localizedDescription]];}//遍历服务中的特征CBUUID *serviceUUID=[CBUUID UUIDWithString:kServiceUUID];CBUUID *characteristicUUID=[CBUUID UUIDWithString:kCharacteristicUUID];if ([service.UUID isEqual:serviceUUID]) {for (CBCharacteristic *characteristic in service.characteristics) {if ([characteristic.UUID isEqual:characteristicUUID]) {//情景一:通知/*找到特征后设置外围设备为已通知状态(订阅特征):*1.调用此方法会触发代理方法:-(void)peripheral:(CBPeripheral *)peripheral didUpdateNotificationStateForCharacteristic:(CBCharacteristic *)characteristic error:(NSError *)error*2.调用此方法会触发外围设备的订阅代理方法*/[peripheral setNotifyValue:YES forCharacteristic:characteristic];//情景二:读取
//                [peripheral readValueForCharacteristic:characteristic];
//                    if(characteristic.value){
//                    NSString *value=[[NSString alloc]initWithData:characteristic.value encoding:NSUTF8StringEncoding];
//                    NSLog(@"读取到特征值:%@",value);
//                }}}}
}
//特征值被更新后
-(void)peripheral:(CBPeripheral *)peripheral didUpdateNotificationStateForCharacteristic:(CBCharacteristic *)characteristic error:(NSError *)error{NSLog(@"收到特征更新通知...");[self writeToLog:@"收到特征更新通知..."];if (error) {NSLog(@"更新通知状态时发生错误,错误信息:%@",error.localizedDescription);}//给特征值设置新的值CBUUID *characteristicUUID=[CBUUID UUIDWithString:kCharacteristicUUID];if ([characteristic.UUID isEqual:characteristicUUID]) {if (characteristic.isNotifying) {if (characteristic.properties==CBCharacteristicPropertyNotify) {NSLog(@"已订阅特征通知.");[self writeToLog:@"已订阅特征通知."];return;}else if (characteristic.properties ==CBCharacteristicPropertyRead) {//从外围设备读取新值,调用此方法会触发代理方法:-(void)peripheral:(CBPeripheral *)peripheral didUpdateValueForCharacteristic:(CBCharacteristic *)characteristic error:(NSError *)error[peripheral readValueForCharacteristic:characteristic];}}else{NSLog(@"停止已停止.");[self writeToLog:@"停止已停止."];//取消连接[self.centralManager cancelPeripheralConnection:peripheral];}}
}
//更新特征值后(调用readValueForCharacteristic:方法或者外围设备在订阅后更新特征值都会调用此代理方法)
-(void)peripheral:(CBPeripheral *)peripheral didUpdateValueForCharacteristic:(CBCharacteristic *)characteristic error:(NSError *)error{if (error) {NSLog(@"更新特征值时发生错误,错误信息:%@",error.localizedDescription);[self writeToLog:[NSString stringWithFormat:@"更新特征值时发生错误,错误信息:%@",error.localizedDescription]];return;}if (characteristic.value) {NSString *value=[[NSString alloc]initWithData:characteristic.value encoding:NSUTF8StringEncoding];NSLog(@"读取到特征值:%@",value);[self writeToLog:[NSString stringWithFormat:@"读取到特征值:%@",value]];}else{NSLog(@"未发现特征值.");[self writeToLog:@"未发现特征值."];}
}#pragma mark - 属性
-(NSMutableArray *)peripherals{if(!_peripherals){_peripherals=[NSMutableArray array];}return _peripherals;
}#pragma mark - 私有方法
/***  记录日志**  @param info 日志信息*/
-(void)writeToLog:(NSString *)info{self.log.text=[NSString stringWithFormat:@"%@\r\n%@",self.log.text,info];
}@end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196

上面程序运行的流程图如下: 
这里写图片描述 
有了上面两个程序就可以分别运行在两台支持BLE的iOS设备上,当两个应用建立连接后,一旦外围设备更新特征之后,中央设备就可以立即获取到更新后的值。需要强调的是使用CoreBluetooth开发的应用不仅仅可以和其他iOS设备进行蓝牙通信,还可以同其他第三方遵循BLE规范的设备进行蓝牙通讯,这里就不再赘述。

总结

源码下载网址: 
http://download.csdn.net/detail/baihuaxiu123/9507802 
请关注:http://blog.csdn.net/baihuaxiu123/article/details/51289499

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端面试题(五)

position的属性有哪些&#xff1f; 1、absolute生成绝对定位的元素&#xff0c;相对于值不为 static的第一个父元素进行定位。 2、fixed &#xff08;老IE不支持&#xff09;生成绝对定位的元素&#xff0c;相对于浏览器窗口进行定位。 3、relative生成相对定位的元素&#xff…

qrcode.js 二维码生成器

二维码生成 并显示&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml" xml:lang"ko" …

AVPlayer设置从哪儿开始播放

avplayer 播放视频 首先介绍几个方法吧和属性吧。 - (id)addPeriodicTimeObserverForInterval:(CMTime)interval queue:(dispatch_queue_t)queue usingBlock:(void (^)(CMTime time))block 这个方法可以用于跟新进度条。 - (void)seekToTime:(CMTime)time completionHandler:(v…

老男孩爬虫实战密训课第一季,2018.6,初识爬虫训练-实战1-爬取汽车之家新闻数据...

1.爬虫介绍 编写程序&#xff0c;根据URL获取网站信息 2.用到的库 requests库 bs4库 3.内容及步骤 4.代码 import requests import os from bs4 import BeautifulSoup # 1.下载页面 ret requests.get(urlhttps://www.autohome.com.cn/news/) ret.encoding ret.apparent_encod…

Table 表格导出功能

<Card class"clearfix"><p slot"title"><Icon type"ios-list"></Icon>收入信息</p><!-- 导出1 --><div class"daochu1"><!-- 导出按钮 --><div class"search"><B…

动态添加后的数据转换 — 后台接收数据

let data this.projectPersonnel.map(item > {let obj {}obj.member item.people.map(info > {return info.id})obj.member JSON.stringify(obj.member)obj.projectId idobj.teamId item.name.idreturn obj})

iOS开发--地图与定位

iOS开发--地图与定位 概览 现在很多社交、电商、团购应用都引入了地图和定位功能&#xff0c;似乎地图功能不再是地图应用和导航应用所特有的。的确&#xff0c;有了地图和定位功能确实让我们的生活更加丰富多彩&#xff0c;极大的改变了我们的生活方式。例如你到了一个陌生的地…

iview组件库 - 穿梭栏设置

<Modalv-model"modal1"title"项目药品上下架维护"width"1020":mask-closable"false"on-ok"addOk()"><Col span"36"><Selectfilterableon-change"onChangeProject"placeholder"请先…

如何优雅地使用Sublime Text3

Sublime Text&#xff1a;一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件&#xff0c;不仅具有华丽的界面&#xff0c;还支持插件扩展机制&#xff0c;用她来写代码&#xff0c;绝对是一种享受。相比于难于上手的Vim&#xff0c;浮肿沉重的Eclipse&#xff0c;VS…

Windows 聚焦的锁屏壁纸设置为桌面壁纸

需求&#xff1a; Windows的锁屏壁纸偶尔遇到非常喜欢的壁纸&#xff0c;想设置为桌面壁纸。 步骤如下&#xff1a; 1. “Windows 聚焦”的锁屏壁纸都保存在隐藏文件夹 --- Assets里。 a. 打开“资源管理器 b. 在地址栏复制粘贴下方路径后按回车键&#xff0c;即可快速跳转至这…

Chrome 控制台的console用法收集

Chrome 控制台console的用法 大家都有用过各种类型的浏览器&#xff0c;每种浏览器都有自己的特色&#xff0c;本人拙见&#xff0c;在我用过的浏览器当中&#xff0c;我是最喜欢Chrome的&#xff0c;因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。…

pycharm安装lxml

今天下午刚学爬虫&#xff0c;要安好多库的感觉&#xff0c;崩溃 requests 首先我们用pip安装完成后&#xff0c;在pycharm里面还要导入进去&#xff0c;没有的话是会报错的 文件--设置--Project Interpreter 然后点击pip进去&#xff0c;搜索requests&#xff0c;再安装进去就…

6.1团队第二阶段冲刺(七)

燃尽图&#xff1a; 任务板: 会议照片&#xff1a; 昨天完成了管理员对发布人的查询功能&#xff0c;条件查询功能以及一系列常用小功能 今天完成了功能说明部分及其那部分界面美化&#xff0c;所有界面的退出以及回到首页的功能及首页美化等 明天打算做信息分页显示&#xff0…

在vue项目中使用树形结构的穿梭框

先看一下最后的效果&#xff1a; 一个基于elementui的穿梭框组件&#xff1a;el-tree-transfer 第一步&#xff1a;安装组件 npm install el-tree-transfer --save 第二步&#xff1a;写代码 // 使用树形穿梭框组件<tree-transfer :title"title" :from_datafromDa…

导航跳转后保持选中状态 jquery高亮当前选中菜单

功能需求&#xff1a; 今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后&#xff0c;高亮当前菜单样式。 简单的说&#xff0c;就是我点击导航菜单中的一个栏目&#xff0c;跳转到该栏目下&#xff0c;该栏目菜单也同时高亮&#xff08;可以是背景色也可以是背景图片…

eacharts中国地图省市区点击显示

1.安装echarts.js 相关模块 npm i echarts2. 在 main.js 文件中搭建全局 // 引入echarts import echarts from echarts Vue.prototype.$echarts echarts3.vue文件种引入相关文档 import echarts from "echarts"; import "./china.js"; // 引入中国地图…

中英翻译(基于百度翻译)

先来看效果图 只做了简单的在线翻译&#xff0c;语音翻译和图片翻译都要钱&#xff0c;哈哈 市面上有名气的翻译公司就是有道和百度了&#xff0c;有道尝试了一下&#xff0c;分为API和SDK两种&#xff0c;但是demo下载下来跑不了 百度的就是API&#xff0c;也很简单&#xff0…

Vue中使用input简易的上传图片

<div class"boximg"><div class"topimg"><!-- <img :src"filePath" width"200px" height"170px" /> --></div><div class"botimg" click"imgClick()">上传logo<…

jQuery选择器之层级选择器

文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述&#xff0c;可以把文档树当作一个家谱&#xff0c;那么节点与节点直接就会存在父子&#xff0c;兄弟&#xff0c;祖孙的关系了。 选择器中的层级选择器就是用来处理这种关…

bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色

在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的&#xff0c;其默认值是undefined 类型是function&#xff0c;function(value, row, index), value&#xff1a;该cell本来的值&#xff0c;row&#xff1a;该行数据&#xff0c;index&#xff1a;该行序号&am…