在微信小程序里实现聊天室

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

继续阅读 »
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

收起阅读 »

(客服云)iOS访客端集成常见问题(非报错)

1、UI上很多地方显示英文,比如聊天页面的工具栏
显示英文1.png

把客服demo中配置的国际化文件添加到您自己的工程中。拖之前要打开国际化文件,全部选中这三个,再进行拖入。
显示英文2.png

 
2、进入聊天页面没有加载聊天记录
这种情况一般出现在只使用了 HDMessageViewController 没有使用 HDChatViewController 的时候
在HDMessageViewController 的 viewDidLoad 方法中, 将 [self tableViewDidTriggerHeaderRefresh]; 的注释打开,再在这之前
加上 self.showRefreshHeader = YES; 这句代码
 
3、发送表情却显示字符串
访客端表情符号.png

把下面这段代码添加到appdelegate中就可以了
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapePattern:@"\\[[^\\[\\]]{1,3}\\]"];
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapeDictionary:[HDConvertToCommonEmoticonsHelper emotionsDictionary]];
 
4、客服能收到访客的消息,访客收不到客服的消息
(1)客服和im同时使用的话,初始化sdk、登录、登出用的是im的api会出现这种情况。必须使用客服的api。
(2)IM sdk升级为客服sdk,不兼容导致的,这种情况可以线上发起会话咨询。
     
5、发送的消息,出现在聊天页面的左侧
一般是由于当前访客没有登录或者登录失败,断点仔细检查下。
继续阅读 »
1、UI上很多地方显示英文,比如聊天页面的工具栏
显示英文1.png

把客服demo中配置的国际化文件添加到您自己的工程中。拖之前要打开国际化文件,全部选中这三个,再进行拖入。
显示英文2.png

 
2、进入聊天页面没有加载聊天记录
这种情况一般出现在只使用了 HDMessageViewController 没有使用 HDChatViewController 的时候
在HDMessageViewController 的 viewDidLoad 方法中, 将 [self tableViewDidTriggerHeaderRefresh]; 的注释打开,再在这之前
加上 self.showRefreshHeader = YES; 这句代码
 
3、发送表情却显示字符串
访客端表情符号.png

把下面这段代码添加到appdelegate中就可以了
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapePattern:@"\\[[^\\[\\]]{1,3}\\]"];
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapeDictionary:[HDConvertToCommonEmoticonsHelper emotionsDictionary]];
 
4、客服能收到访客的消息,访客收不到客服的消息
(1)客服和im同时使用的话,初始化sdk、登录、登出用的是im的api会出现这种情况。必须使用客服的api。
(2)IM sdk升级为客服sdk,不兼容导致的,这种情况可以线上发起会话咨询。
     
5、发送的消息,出现在聊天页面的左侧
一般是由于当前访客没有登录或者登录失败,断点仔细检查下。 收起阅读 »

(客服云)iOS访客端集成常见报错(总有一款适合你)

注意:向自己工程中添加环信SDK和UI文件的时候,不要直接向xcode中拖拽添加,先把SDK和UI文件粘贴到自己工程的finder目录中,再从finder中向xcode中拖拽添加,避免出现找不到SDK或者UI文件的情况。
 
1、如果工程中引入的是不带音视频版本的sdk:HyphenateLite.framework和HelpDeskLite.framework,#import <HelpDeskLite/HelpDeskLite.h> 头文件报错的话,那么把HDMessage.h中的#import <Hyphenate/Hyphenate.h>改成#import <HyphenateLite/HyphenateLite.h>即可(HDMessage.h 用xcode全局搜索不到,需要到sdk里面去找)。
 
2、很多同学在首次“导入SDK”或“更新SDK重新导入SDK”后,Xcode运行报以下的error:
dyld: Library not loaded: @rpath/Hyphenate.framework/Hyphenate
  Referenced from: /Users/shenchong/Library/Developer/CoreSimulator/Devices/C768FE68-6E79-40C8-8AD1-FFFC434D51A9/data/Containers/Bundle/Application/41EA9A48-4DD5-4AA4-AB3F-139CFE036532/CallBackTest.app/CallBackTest
  Reason: image not found
       这个原因是工程未加载到 framework,正确的处理方式是在TARGETS → General → Embedded Binaries 中添加HelpDesk.framework和Hyphenate.framework依赖库,且 Linked Frameworks and Libraries中依赖库的Status必须是Required。
访客端_image_not_found.png

 
3、运行之后,自变量为nil,这就有可能是因为上面所说的依赖库的status设置为了Optional,需要改成Required。
访客端自变量为nil.png

 
4、打包后上传到appstore报错
(1)ERROR ITMS-90535: "Unexpected CFBundleExecutable Key. The bundle at 'Payload/toy.app/HelpDeskUIResource.bundle' does not contain a bundle executable. If this bundle intentionally does not contain an executable, consider removing the CFBundleExecutable key from its Info.plist and using a CFBundlePackageType of BNDL. If this bundle is part of a third-party framework, consider contacting the developer of the framework for an update to address this issue."
方法:把HelpDeskUIResource.bundle里的Info.plist删掉就即可。
访客端打包90535.png

(2)This bundle is invalid. The value for key CFBundleShortVersionString ‘1.2.2.1’in the Info.plist must be a period-separated list of at most three non-negative integers. 
访客端打包90060.png

把sdk里的plist文件的版本号改成3位数即可
访客端打包1.2_.2_.1位置_.png

(3)还有很多同学打包失败,看不出什么原因,那么可以先看看有没有按照文档剔除x86_64 i386两个平台
文档链接:http://docs.easemob.com/cs/300visitoraccess/iossdk#%E4%B8%8A%E4%BC%A0appstore%E4%BB%A5%E5%8F%8A%E6%89%93%E5%8C%85ipa%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
 
5、那么剔除x86_64 i386时会遇到can't open input file的错误,这是因为cd的路径错误,把“/HelpDesk.framework”删掉。是cd到framework所在的路径,不是cd到framework
访客端剔除cd错误.png

 
6、下图中的报错,需要在pch文件添加如下判断,环信的和自己的头文件都引入到#ifdef内部
   #ifdef __OBJC__
   #endif
   
pch加判断1.png

   
pch加判断2.png

 
7、集成环信HelpDeskUI的时候,由于HelpDeskUI内部使用了第三方库,如果与开发者第三方库产生冲突,可将HelpDeskUI中冲突的第三方库删除,如果第三方库中的接口有升级的部分,请酌情进行升级。
第三方库冲突.png

 
8、集成1.2.2版本demo中的HelpDeskUI,Masonry报错:Passing ‘CGFloat’(aka ‘double’) to parameter of incompatible type ‘__strong id’
需要在pch中添加#define MAS_SHORTHAND_GLOBALS
访客端Masonry报错.png

 
继续阅读 »
注意:向自己工程中添加环信SDK和UI文件的时候,不要直接向xcode中拖拽添加,先把SDK和UI文件粘贴到自己工程的finder目录中,再从finder中向xcode中拖拽添加,避免出现找不到SDK或者UI文件的情况。
 
1、如果工程中引入的是不带音视频版本的sdk:HyphenateLite.framework和HelpDeskLite.framework,#import <HelpDeskLite/HelpDeskLite.h> 头文件报错的话,那么把HDMessage.h中的#import <Hyphenate/Hyphenate.h>改成#import <HyphenateLite/HyphenateLite.h>即可(HDMessage.h 用xcode全局搜索不到,需要到sdk里面去找)。
 
2、很多同学在首次“导入SDK”或“更新SDK重新导入SDK”后,Xcode运行报以下的error:
dyld: Library not loaded: @rpath/Hyphenate.framework/Hyphenate
  Referenced from: /Users/shenchong/Library/Developer/CoreSimulator/Devices/C768FE68-6E79-40C8-8AD1-FFFC434D51A9/data/Containers/Bundle/Application/41EA9A48-4DD5-4AA4-AB3F-139CFE036532/CallBackTest.app/CallBackTest
  Reason: image not found
       这个原因是工程未加载到 framework,正确的处理方式是在TARGETS → General → Embedded Binaries 中添加HelpDesk.framework和Hyphenate.framework依赖库,且 Linked Frameworks and Libraries中依赖库的Status必须是Required。
访客端_image_not_found.png

 
3、运行之后,自变量为nil,这就有可能是因为上面所说的依赖库的status设置为了Optional,需要改成Required。
访客端自变量为nil.png

 
4、打包后上传到appstore报错
(1)ERROR ITMS-90535: "Unexpected CFBundleExecutable Key. The bundle at 'Payload/toy.app/HelpDeskUIResource.bundle' does not contain a bundle executable. If this bundle intentionally does not contain an executable, consider removing the CFBundleExecutable key from its Info.plist and using a CFBundlePackageType of BNDL. If this bundle is part of a third-party framework, consider contacting the developer of the framework for an update to address this issue."
方法:把HelpDeskUIResource.bundle里的Info.plist删掉就即可。
访客端打包90535.png

(2)This bundle is invalid. The value for key CFBundleShortVersionString ‘1.2.2.1’in the Info.plist must be a period-separated list of at most three non-negative integers. 
访客端打包90060.png

把sdk里的plist文件的版本号改成3位数即可
访客端打包1.2_.2_.1位置_.png

(3)还有很多同学打包失败,看不出什么原因,那么可以先看看有没有按照文档剔除x86_64 i386两个平台
文档链接:http://docs.easemob.com/cs/300visitoraccess/iossdk#%E4%B8%8A%E4%BC%A0appstore%E4%BB%A5%E5%8F%8A%E6%89%93%E5%8C%85ipa%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
 
5、那么剔除x86_64 i386时会遇到can't open input file的错误,这是因为cd的路径错误,把“/HelpDesk.framework”删掉。是cd到framework所在的路径,不是cd到framework
访客端剔除cd错误.png

 
6、下图中的报错,需要在pch文件添加如下判断,环信的和自己的头文件都引入到#ifdef内部
   #ifdef __OBJC__
   #endif
   
pch加判断1.png

   
pch加判断2.png

 
7、集成环信HelpDeskUI的时候,由于HelpDeskUI内部使用了第三方库,如果与开发者第三方库产生冲突,可将HelpDeskUI中冲突的第三方库删除,如果第三方库中的接口有升级的部分,请酌情进行升级。
第三方库冲突.png

 
8、集成1.2.2版本demo中的HelpDeskUI,Masonry报错:Passing ‘CGFloat’(aka ‘double’) to parameter of incompatible type ‘__strong id’
需要在pch中添加#define MAS_SHORTHAND_GLOBALS
访客端Masonry报错.png

  收起阅读 »

(客服云)iOS访客端怎么判断会话是否结束

1、联系商务开通【会话创建、接起、结束】功能
2、在 cmdMessagesDidReceive 方法中做如下判断,返回ServiceSessionClosedEvent,则是会话已结束,如图:
判断会话是否结束.png

代码:
if ([message.body isKindOfClass:[EMCmdMessageBody class]]) {
EMCmdMessageBody *_bb = (EMCmdMessageBody *)message.body;
if ([_bb.action isEqualToString:@"ServiceSessionCreatedEvent"]) {
NSLog(@"hhhhh--Creat");
} else if ([_bb.action isEqualToString:@"ServiceSessionOpenedEvent"]) {
NSLog(@"hhhhh--Open");
} else if ([_bb.action isEqualToString:@"ServiceSessionClosedEvent"]) {
NSLog(@"hhhhh--Close");
}
}
 
继续阅读 »
1、联系商务开通【会话创建、接起、结束】功能
2、在 cmdMessagesDidReceive 方法中做如下判断,返回ServiceSessionClosedEvent,则是会话已结束,如图:
判断会话是否结束.png

代码:
if ([message.body isKindOfClass:[EMCmdMessageBody class]]) {
EMCmdMessageBody *_bb = (EMCmdMessageBody *)message.body;
if ([_bb.action isEqualToString:@"ServiceSessionCreatedEvent"]) {
NSLog(@"hhhhh--Creat");
} else if ([_bb.action isEqualToString:@"ServiceSessionOpenedEvent"]) {
NSLog(@"hhhhh--Open");
} else if ([_bb.action isEqualToString:@"ServiceSessionClosedEvent"]) {
NSLog(@"hhhhh--Close");
}
}
  收起阅读 »

(客服云)iOS访客端点击订单消息

1、在HDMessageCell.m 的
- (void)_setupSubviewsWithType:(EMMessageBodyType)messageType
                      isSender:(BOOL)isSender
                         model:(id<HDIMessageModel>)model
方法中给orderBgView 添加手势
点击订单消息1.png

代码:
UITapGestureRecognizer *tapRecognizer3 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(orderImageViewTapAction:)];
[_bubbleView.orderBgView addGestureRecognizer:tapRecognizer3];
 
2、在HDMessageCell.m 中添加手势点击事件
点击订单消息2.png

代码:
- (void)orderImageViewTapAction:(UITapGestureRecognizer *)tapRecognizer
{
    if ([_delegate respondsToSelector:@selector(messageCellSelected:)]) {
        [_delegate messageCellSelected:_model];
    }
}
 
3、在HDMessageViewController的 
   - (void)messageCellSelected:(id<HDIMessageModel>)model 方法中添加订单消息的判断
点击订单消息3.png

代码:
if ([HDMessageHelper getMessageExtType:model.message] == HDExtOrderMsg) {
                // 订单消息携带的扩展
                NSDictionary *dic = model.message.ext;
                NSLog(@"点击了订单消息");
}
 
 
继续阅读 »
1、在HDMessageCell.m 的
- (void)_setupSubviewsWithType:(EMMessageBodyType)messageType
                      isSender:(BOOL)isSender
                         model:(id<HDIMessageModel>)model
方法中给orderBgView 添加手势
点击订单消息1.png

代码:
UITapGestureRecognizer *tapRecognizer3 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(orderImageViewTapAction:)];
[_bubbleView.orderBgView addGestureRecognizer:tapRecognizer3];
 
2、在HDMessageCell.m 中添加手势点击事件
点击订单消息2.png

代码:
- (void)orderImageViewTapAction:(UITapGestureRecognizer *)tapRecognizer
{
    if ([_delegate respondsToSelector:@selector(messageCellSelected:)]) {
        [_delegate messageCellSelected:_model];
    }
}
 
3、在HDMessageViewController的 
   - (void)messageCellSelected:(id<HDIMessageModel>)model 方法中添加订单消息的判断
点击订单消息3.png

代码:
if ([HDMessageHelper getMessageExtType:model.message] == HDExtOrderMsg) {
                // 订单消息携带的扩展
                NSDictionary *dic = model.message.ext;
                NSLog(@"点击了订单消息");
}
 
  收起阅读 »

(客服云)IOS访客端设置访客昵称头像

1.在HDMessageViewController.h 中添加访客昵称、头像的属性
// 访客昵称
@property (nonatomic, strong) NSString *sendName;
// 访客头像(url)
@property (nonatomic, strong) NSString *sendAvatarUrl;
// 访客头像(本地图片)
@property (nonatomic, strong) UIImage *sendAvatarImage;

1.png


 
2.在HDMessageViewController.m   - (NSArray *)formatMessages:(NSArray *)messages 方法中添加判断

2.png


if (isSender) {
            if (self.sendName) {
                model.nickname = self.sendName;
            }
            // 加载网络头像
            if (self.sendAvatarUrl) {
                model.avatarURLPath = self.sendAvatarUrl;
            }
            // 加载本地头像
            if (self.sendAvatarImage) {
                model.avatarImage = self.sendAvatarImage;
                model.avatarURLPath = nil;
            }
        }
 
3.在初始化聊天页面的时候,传入访客的昵称、头像即可。
(可选择url或者本地头像图片)

3.png


ctrl.sendName = @"访客昵称";
ctrl.sendAvatarImage = [UIImage imageNamed:@"测试图片"];
//    chat.sendAvatarUrl = @"";
继续阅读 »
1.在HDMessageViewController.h 中添加访客昵称、头像的属性
// 访客昵称
@property (nonatomic, strong) NSString *sendName;
// 访客头像(url)
@property (nonatomic, strong) NSString *sendAvatarUrl;
// 访客头像(本地图片)
@property (nonatomic, strong) UIImage *sendAvatarImage;

1.png


 
2.在HDMessageViewController.m   - (NSArray *)formatMessages:(NSArray *)messages 方法中添加判断

2.png


if (isSender) {
            if (self.sendName) {
                model.nickname = self.sendName;
            }
            // 加载网络头像
            if (self.sendAvatarUrl) {
                model.avatarURLPath = self.sendAvatarUrl;
            }
            // 加载本地头像
            if (self.sendAvatarImage) {
                model.avatarImage = self.sendAvatarImage;
                model.avatarURLPath = nil;
            }
        }
 
3.在初始化聊天页面的时候,传入访客的昵称、头像即可。
(可选择url或者本地头像图片)

3.png


ctrl.sendName = @"访客昵称";
ctrl.sendAvatarImage = [UIImage imageNamed:@"测试图片"];
//    chat.sendAvatarUrl = @""; 收起阅读 »

(客服云)iOS访客端设置客服系统头像

0、在客服系统内 管理员模式--设置--企业基本信息 处上传企业logo
   在 管理员模式--设置--系统开关--系统开关--访客端显示客服昵称 处打开开关
客服系统头像1.png

客服系统头像2.png

1、在HDIMessageModel.h 中添加客服系统头像url属性
@property (strong, nonatomic) NSString *officialAccountURL;
客服系统头像3.png

 
2、在HDMessageModel.h 中添加客服系统头像url属性
@property (strong, nonatomic) NSString *officialAccountURL;
客服系统头像4.png

 
3、在HDMessageModel.m类  - (instancetype)initWitMessage:(HDMessage *)message方法中添加  

            NSDictionary *officialAccount = [NSDictionary dictionary];
                if ([weichat objectForKey:@"official_account"]) {
                    officialAccount = [weichat valueForKey:@"official_account"];
                    if ([officialAccount objectForKey:@"img"]) {
                        self.officialAccountURL = [[@"https:" stringByAppendingString:[officialAccount objectForKey:@"img"]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
                    }
                }
客服系统头像5.png

 
4、在HDBaseMessageCell.m类  - (void)setModel:(id<HDIMessageModel>)model方法中 修改代码 
(“系统消息”改成您自己客服系统中设置的调度员昵称)

    if (model.avatarURLPath) {
        if (model.nickname) {
            if ([model.nickname isEqualToString:@"系统消息"]) {
                if (model.officialAccountURL) {
                    [self.avatarView sd_setImageWithURL:[NSURL URLWithString:model.officialAccountURL] placeholderImage:model.avatarImage];
                }
            } else {
                    [self.avatarView sd_setImageWithURL:[NSURL URLWithString:model.avatarURLPath] placeholderImage:model.avatarImage];
            }
        }
    
    } else {
        self.avatarView.image = model.avatarImage;
    }
客服系统头像6.png
继续阅读 »
0、在客服系统内 管理员模式--设置--企业基本信息 处上传企业logo
   在 管理员模式--设置--系统开关--系统开关--访客端显示客服昵称 处打开开关
客服系统头像1.png

客服系统头像2.png

1、在HDIMessageModel.h 中添加客服系统头像url属性
@property (strong, nonatomic) NSString *officialAccountURL;
客服系统头像3.png

 
2、在HDMessageModel.h 中添加客服系统头像url属性
@property (strong, nonatomic) NSString *officialAccountURL;
客服系统头像4.png

 
3、在HDMessageModel.m类  - (instancetype)initWitMessage:(HDMessage *)message方法中添加  

            NSDictionary *officialAccount = [NSDictionary dictionary];
                if ([weichat objectForKey:@"official_account"]) {
                    officialAccount = [weichat valueForKey:@"official_account"];
                    if ([officialAccount objectForKey:@"img"]) {
                        self.officialAccountURL = [[@"https:" stringByAppendingString:[officialAccount objectForKey:@"img"]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
                    }
                }
客服系统头像5.png

 
4、在HDBaseMessageCell.m类  - (void)setModel:(id<HDIMessageModel>)model方法中 修改代码 
(“系统消息”改成您自己客服系统中设置的调度员昵称)

    if (model.avatarURLPath) {
        if (model.nickname) {
            if ([model.nickname isEqualToString:@"系统消息"]) {
                if (model.officialAccountURL) {
                    [self.avatarView sd_setImageWithURL:[NSURL URLWithString:model.officialAccountURL] placeholderImage:model.avatarImage];
                }
            } else {
                    [self.avatarView sd_setImageWithURL:[NSURL URLWithString:model.avatarURLPath] placeholderImage:model.avatarImage];
            }
        }
    
    } else {
        self.avatarView.image = model.avatarImage;
    }
客服系统头像6.png
收起阅读 »

(客服云)iOS访客端获取机器人欢迎语

注意:
1、此文档只支持获取单机器人的欢迎语,多机器人会获取第一个机器人的欢迎语。
2、此文档暂不支持获取图文消息类型的机器人欢迎语。
老版机器人与新版机器人集成方法不同,集成前需区分好。
机器人欢迎语1.png

机器人欢迎语2.png


一、先到客服系统配置机器人欢迎语
1、老版机器人设置方案:
管理员模式--智能机器人--机器人设置--自动回复--欢迎语,开启开关并添加欢迎语
机器人欢迎语3.png

2、新版(企业版)机器人设置方案:
(1)管理员模式--智能机器人--机器人设置--基础设置,点击“机器人管理”跳转到机器人管理页面
(2)机器人设置--自动回复--欢迎语,开启开关并添加欢迎语
机器人欢迎语4.png

 
二、iOS端获取、解析机器人欢迎语
在HDMessageViewController.m类的 -(void)viewDidLoad 方法最后调用robotWelcome或者newRobotWelcome 方法即可。

//获取老版机器人欢迎语
- (void)robotWelcome
{
    // kDefaultTenantId:租户id
    // kDefaultCustomerName:IM服务号 stringWithFormat:@"https://kefu.easemob.com/v1/Te ... ot%3B, kDefaultTenantId];
    NSString *newStr = [urlStr stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSURL *url = [NSURL URLWithString:newStr];
    NSURLRequest *requst = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:10];
    //异步链接(形式1,较少用)
    [NSURLConnection sendAsynchronousRequest:requst queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
        
        // 解析
        NSString *result  =[[ NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
        //同样的可以替换字符
        NSLog(@"result-----%@", result);
        NSString *str = [result stringByReplacingOccurrencesOfString:@"&quot;" withString:@"\""];
        NSString *str1 = [str stringByReplacingOccurrencesOfString:@"\"{" withString:@"{"];
        NSString *str2 = [str1 stringByReplacingOccurrencesOfString:@"}\"" withString:@"}"];
        // JSON字符串转字典
        NSDictionary *dic = [self dictionaryWithJsonString:str2];
        // 取消息的ext
        NSLog(@"dic---%@",dic);
        
        NSString *robotText = nil;
        NSDictionary *dicExt = [NSDictionary dictionary];
        if ([[dic objectForKey:@"greetingText"] isKindOfClass:[NSString class]]) {
           
            robotText = [dic objectForKey:@"greetingText"];
        } else {
             dicExt = [[dic objectForKey:@"greetingText"] objectForKey:@"ext"];
        }
        
                //构建消息
                EMTextMessageBody *bdy = [[EMTextMessageBody alloc] initWithText:robotText];
                NSString *from = [[HDClient sharedClient] currentUsername];

                    HDMessage *message = [[HDMessage alloc] initWithConversationID:kDefaultCustomerName from:from to:kDefaultCustomerName body:bdy];
                   message.ext = dicExt;
                    message.direction = 1;                
               message.status = HDMessageStatusSuccessed;
                // 消息添加到UI
                [self addMessageToDataSource:message progress:nil];
                // 消息插入到会话
                HDError *pError;
                [self.conversation addMessage:message error:&pError];
        
    }];
    
}

//获取新版(企业版)机器人欢迎语
- (void)newRobotWelcome
{
    [[HDClient sharedClient] accessToken];
    // 以下信息换成自己的
    // kDefaultTenantId:租户id
    // kDefaultOrgName:appkey中#的前半部分
    // kDefaultAppName:appkey中#的后半部分
    // kDefaultCustomerName:IM服务号
    NSString *imToken = [HDClient sharedClient].accessToken;
    NSString *urlStr = [NSString stringWithFormat:@"https://kefu.easemob.com/v1/we ... ot%3B,kDefaultTenantId, kDefaultOrgName, kDefaultAppName, kDefaultCustomerName, imToken];
    NSString *newStr = [urlStr stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSLog(@"newStr---%@", newStr);
    NSURL *url = [NSURL URLWithString:newStr];
    NSURLRequest *requst = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:10];
    //异步链接(形式1,较少用)
    [NSURLConnection sendAsynchronousRequest:requst queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
        // 解析
        NSString *result = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
        //同样的可以替换字符
        NSString *str = [result stringByReplacingOccurrencesOfString:@"&amp;quot;" withString:@"\""];
        NSString *str1 = [str stringByReplacingOccurrencesOfString:@"\"{" withString:@"{"];
        NSString *str2 = [str1 stringByReplacingOccurrencesOfString:@"}\"" withString:@"}"];
        // JSON字符串转字典
        NSDictionary *dic = [self dictionaryWithJsonString:str2];
        // 取消息的ext
        NSString *robotText = nil;
        NSDictionary *dicExt = [NSDictionary dictionary];
        if ([[[dic objectForKey:@"entity"] objectForKey:@"greetingText"] isKindOfClass:[NSString class]]) {
            robotText = [[dic objectForKey:@"entity"] objectForKey:@"greetingText"];
        } else {
            dicExt = [[[dic objectForKey:@"entity"] objectForKey:@"greetingText"] objectForKey:@"ext"];
        }  
        //构建消息
        NSLog(@"dicExt---%@",dicExt);
        EMTextMessageBody *bdy = [[EMTextMessageBody alloc] initWithText:robotText];
        NSString *from = [[HDClient sharedClient] currentUsername];
        
        HDMessage *message = [[HDMessage alloc] initWithConversationID:kDefaultCustomerName from:from to:kDefaultCustomerName body:bdy];
        message.ext = dicExt;
        message.direction = 1;
        message.status = HDMessageStatusSuccessed;
        // 消息添加到UI
        [self addMessageToDataSource:message progress:nil];
        // 消息插入到会话
        HDError *pError;
        [self.conversation addMessage:message error:&pError];
    }];    
}

// JSON字符串转化为字典
- (NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString
{
    if (jsonString == nil) {
        return nil;
    }
    NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
    NSError *err;
    NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:jsonData
                                                        options:NSJSONReadingMutableContainers
                                                          error:&err];
    if(err)
    {
        NSLog(@"json解析失败:%@",err);
        return nil;
    }
return dic;
}
 
继续阅读 »
注意:
1、此文档只支持获取单机器人的欢迎语,多机器人会获取第一个机器人的欢迎语。
2、此文档暂不支持获取图文消息类型的机器人欢迎语。
老版机器人与新版机器人集成方法不同,集成前需区分好。
机器人欢迎语1.png

机器人欢迎语2.png


一、先到客服系统配置机器人欢迎语
1、老版机器人设置方案:
管理员模式--智能机器人--机器人设置--自动回复--欢迎语,开启开关并添加欢迎语
机器人欢迎语3.png

2、新版(企业版)机器人设置方案:
(1)管理员模式--智能机器人--机器人设置--基础设置,点击“机器人管理”跳转到机器人管理页面
(2)机器人设置--自动回复--欢迎语,开启开关并添加欢迎语
机器人欢迎语4.png

 
二、iOS端获取、解析机器人欢迎语
在HDMessageViewController.m类的 -(void)viewDidLoad 方法最后调用robotWelcome或者newRobotWelcome 方法即可。

//获取老版机器人欢迎语
- (void)robotWelcome
{
    // kDefaultTenantId:租户id
    // kDefaultCustomerName:IM服务号 stringWithFormat:@"https://kefu.easemob.com/v1/Te ... ot%3B, kDefaultTenantId];
    NSString *newStr = [urlStr stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSURL *url = [NSURL URLWithString:newStr];
    NSURLRequest *requst = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:10];
    //异步链接(形式1,较少用)
    [NSURLConnection sendAsynchronousRequest:requst queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
        
        // 解析
        NSString *result  =[[ NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
        //同样的可以替换字符
        NSLog(@"result-----%@", result);
        NSString *str = [result stringByReplacingOccurrencesOfString:@"&quot;" withString:@"\""];
        NSString *str1 = [str stringByReplacingOccurrencesOfString:@"\"{" withString:@"{"];
        NSString *str2 = [str1 stringByReplacingOccurrencesOfString:@"}\"" withString:@"}"];
        // JSON字符串转字典
        NSDictionary *dic = [self dictionaryWithJsonString:str2];
        // 取消息的ext
        NSLog(@"dic---%@",dic);
        
        NSString *robotText = nil;
        NSDictionary *dicExt = [NSDictionary dictionary];
        if ([[dic objectForKey:@"greetingText"] isKindOfClass:[NSString class]]) {
           
            robotText = [dic objectForKey:@"greetingText"];
        } else {
             dicExt = [[dic objectForKey:@"greetingText"] objectForKey:@"ext"];
        }
        
                //构建消息
                EMTextMessageBody *bdy = [[EMTextMessageBody alloc] initWithText:robotText];
                NSString *from = [[HDClient sharedClient] currentUsername];

                    HDMessage *message = [[HDMessage alloc] initWithConversationID:kDefaultCustomerName from:from to:kDefaultCustomerName body:bdy];
                   message.ext = dicExt;
                    message.direction = 1;                
               message.status = HDMessageStatusSuccessed;
                // 消息添加到UI
                [self addMessageToDataSource:message progress:nil];
                // 消息插入到会话
                HDError *pError;
                [self.conversation addMessage:message error:&pError];
        
    }];
    
}

//获取新版(企业版)机器人欢迎语
- (void)newRobotWelcome
{
    [[HDClient sharedClient] accessToken];
    // 以下信息换成自己的
    // kDefaultTenantId:租户id
    // kDefaultOrgName:appkey中#的前半部分
    // kDefaultAppName:appkey中#的后半部分
    // kDefaultCustomerName:IM服务号
    NSString *imToken = [HDClient sharedClient].accessToken;
    NSString *urlStr = [NSString stringWithFormat:@"https://kefu.easemob.com/v1/we ... ot%3B,kDefaultTenantId, kDefaultOrgName, kDefaultAppName, kDefaultCustomerName, imToken];
    NSString *newStr = [urlStr stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSLog(@"newStr---%@", newStr);
    NSURL *url = [NSURL URLWithString:newStr];
    NSURLRequest *requst = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:10];
    //异步链接(形式1,较少用)
    [NSURLConnection sendAsynchronousRequest:requst queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
        // 解析
        NSString *result = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
        //同样的可以替换字符
        NSString *str = [result stringByReplacingOccurrencesOfString:@"&amp;quot;" withString:@"\""];
        NSString *str1 = [str stringByReplacingOccurrencesOfString:@"\"{" withString:@"{"];
        NSString *str2 = [str1 stringByReplacingOccurrencesOfString:@"}\"" withString:@"}"];
        // JSON字符串转字典
        NSDictionary *dic = [self dictionaryWithJsonString:str2];
        // 取消息的ext
        NSString *robotText = nil;
        NSDictionary *dicExt = [NSDictionary dictionary];
        if ([[[dic objectForKey:@"entity"] objectForKey:@"greetingText"] isKindOfClass:[NSString class]]) {
            robotText = [[dic objectForKey:@"entity"] objectForKey:@"greetingText"];
        } else {
            dicExt = [[[dic objectForKey:@"entity"] objectForKey:@"greetingText"] objectForKey:@"ext"];
        }  
        //构建消息
        NSLog(@"dicExt---%@",dicExt);
        EMTextMessageBody *bdy = [[EMTextMessageBody alloc] initWithText:robotText];
        NSString *from = [[HDClient sharedClient] currentUsername];
        
        HDMessage *message = [[HDMessage alloc] initWithConversationID:kDefaultCustomerName from:from to:kDefaultCustomerName body:bdy];
        message.ext = dicExt;
        message.direction = 1;
        message.status = HDMessageStatusSuccessed;
        // 消息添加到UI
        [self addMessageToDataSource:message progress:nil];
        // 消息插入到会话
        HDError *pError;
        [self.conversation addMessage:message error:&pError];
    }];    
}

// JSON字符串转化为字典
- (NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString
{
    if (jsonString == nil) {
        return nil;
    }
    NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
    NSError *err;
    NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:jsonData
                                                        options:NSJSONReadingMutableContainers
                                                          error:&err];
    if(err)
    {
        NSLog(@"json解析失败:%@",err);
        return nil;
    }
return dic;
}
  收起阅读 »

客服满意度评价设置


1、怎么设置会话结束时自动发送评价邀请
    管理员模式­----­­设置­­­----满意度评价邀请设置 第一项:会话结束自动发送满意度评价邀请,勾选需要设置的访客渠道

2、访客是否能多次评价
   访客的评价次数是不限制的,但是可以设置客服后台统计的评为为第一次还是最后一次,可以在管理员模式­----­­设置­­­----  满意度评价邀请设置 第三项:多次满意度评价只取第一次
3、系统结束的会话是否自动发送满意度评价
  管理员模式­----­­设置­­­----满意度评价邀请设置  开关打开时,因访客超时未回复、不活跃超时而自动结束的会话,系统不会自动推送满意度评价

4、如何设置满意度邀请提示语
管理员模式­----­­设置­­­----满意度评价邀请设置  第6项

 
继续阅读 »

1、怎么设置会话结束时自动发送评价邀请
    管理员模式­----­­设置­­­----满意度评价邀请设置 第一项:会话结束自动发送满意度评价邀请,勾选需要设置的访客渠道

2、访客是否能多次评价
   访客的评价次数是不限制的,但是可以设置客服后台统计的评为为第一次还是最后一次,可以在管理员模式­----­­设置­­­----  满意度评价邀请设置 第三项:多次满意度评价只取第一次
3、系统结束的会话是否自动发送满意度评价
  管理员模式­----­­设置­­­----满意度评价邀请设置  开关打开时,因访客超时未回复、不活跃超时而自动结束的会话,系统不会自动推送满意度评价

4、如何设置满意度邀请提示语
管理员模式­----­­设置­­­----满意度评价邀请设置  第6项

  收起阅读 »

android客服云如何获取机器人欢迎语

1.APP端要想获取到机器人菜单欢迎语,首先在移动客服管理员模式下,智能机器人,机器人设置——自动回复——欢迎语配置菜单欢迎语或者是欢迎语消息。
2、在会话分配规则中,渠道指定一定要指定机器人,APP端才能获取到机器人欢迎语,否则获取不到
具体的代码如下附件
图1中的
MyApplication.tenantId记得替换为自己的tenantId
new Thread(new Runnable() {
                    @Override
                    public void run() {
                        HttpClient httpClient = new DefaultHttpClient();
                        HttpGet httpGet = new HttpGet("http://kefu.easemob.com/v1/Ten ... 6quot;);
                        try {
                            HttpResponse response = httpClient.execute(httpGet);
                            int code = response.getStatusLine().getStatusCode();
                            if (code == 200) {
                                final String rev  = EntityUtils.toString(response.getEntity());

                                JSONObject obj = new JSONObject(rev);
                                int type = obj.getInt("greetingTextType");
                                final String rob_welcome = obj.getString("greetingText");
                                //type为0代表是文字消息的机器人欢迎语
                                //type为1代表是菜单消息的机器人欢迎语
                                if(type == 0){
                                    //把解析拿到的string保存在本地
                                    shareUtil.saveRobot(rob_welcome);
                                    runOnUiThread(new Runnable() {
                                        @Override
                                        public void run() {
                                            Toast.makeText(getApplicationContext(),"rob_welcome="+rob_welcome,Toast.LENGTH_SHORT).show();
                                        }
                                    });
                                }else if(type == 1){
                                    final String str = rob_welcome.replaceAll("&quot;","\"");
                                    JSONObject json = new JSONObject(str);
                                    JSONObject ext = json.getJSONObject("ext");
                                    final JSONObject msgtype = ext.getJSONObject("msgtype");
                                    //把解析拿到的string保存在本地
                                    shareUtil.saveRobot(msgtype.toString());
                                    runOnUiThread(new Runnable() {
                                        @Override
                                        public void run() {
                                            Toast.makeText(getApplicationContext(),"rob_welcome="+msgtype,Toast.LENGTH_SHORT).show();
                                        }
                                    });
                                }

                            }
                        }catch(final Exception e){
                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    Toast.makeText(getApplicationContext(),"exception="+e.getMessage(),Toast.LENGTH_SHORT).show();
                                }
                            });
                        }
                    }
                }).start();


图2中的:
//创建消息插入本地
            Message message = Message.createReceiveMessage(Message.Type.TXT);
            //从本地获取保存的string
            String str = shareUtil.getRobot();
            EMTextMessageBody body = null;
            //判断是否是菜单消息的string,这是自己实现的一个方法
            if(!isRobotMenu(str)){
                //文字消息直接去设置给消息
            body = new EMTextMessageBody(str);
            }else{
                //菜单消息需要设置给消息扩展
                try{
                    body = new EMTextMessageBody("");
                    JSONObject msgtype = new JSONObject(str);
                    message.setAttribute("msgtype",msgtype);
                }catch (Exception e){
                    Toast.makeText(this,"exception="+e.getMessage(),Toast.LENGTH_SHORT).show();
                }
}

            message.setFrom(MyApplication.imService);
            message.addBody(body);
            message.setMsgTime(System.currentTimeMillis());
            message.setStatus(Message.Status.SUCCESS);
            message.setMsgId(UUID.randomUUID().toString());
ChatClient.getInstance().chatManager().saveMessage(message);



图3中的:
private boolean isRobotMenu(String str){
        try {
            JSONObject json = new JSONObject(str);
            JSONObject obj = json.getJSONObject("choice");
        }catch (Exception e){
            return false;
        }
        return true;
}
 
 
继续阅读 »
1.APP端要想获取到机器人菜单欢迎语,首先在移动客服管理员模式下,智能机器人,机器人设置——自动回复——欢迎语配置菜单欢迎语或者是欢迎语消息。
2、在会话分配规则中,渠道指定一定要指定机器人,APP端才能获取到机器人欢迎语,否则获取不到
具体的代码如下附件
图1中的
MyApplication.tenantId记得替换为自己的tenantId
new Thread(new Runnable() {
                    @Override
                    public void run() {
                        HttpClient httpClient = new DefaultHttpClient();
                        HttpGet httpGet = new HttpGet("http://kefu.easemob.com/v1/Ten ... 6quot;);
                        try {
                            HttpResponse response = httpClient.execute(httpGet);
                            int code = response.getStatusLine().getStatusCode();
                            if (code == 200) {
                                final String rev  = EntityUtils.toString(response.getEntity());

                                JSONObject obj = new JSONObject(rev);
                                int type = obj.getInt("greetingTextType");
                                final String rob_welcome = obj.getString("greetingText");
                                //type为0代表是文字消息的机器人欢迎语
                                //type为1代表是菜单消息的机器人欢迎语
                                if(type == 0){
                                    //把解析拿到的string保存在本地
                                    shareUtil.saveRobot(rob_welcome);
                                    runOnUiThread(new Runnable() {
                                        @Override
                                        public void run() {
                                            Toast.makeText(getApplicationContext(),"rob_welcome="+rob_welcome,Toast.LENGTH_SHORT).show();
                                        }
                                    });
                                }else if(type == 1){
                                    final String str = rob_welcome.replaceAll("&quot;","\"");
                                    JSONObject json = new JSONObject(str);
                                    JSONObject ext = json.getJSONObject("ext");
                                    final JSONObject msgtype = ext.getJSONObject("msgtype");
                                    //把解析拿到的string保存在本地
                                    shareUtil.saveRobot(msgtype.toString());
                                    runOnUiThread(new Runnable() {
                                        @Override
                                        public void run() {
                                            Toast.makeText(getApplicationContext(),"rob_welcome="+msgtype,Toast.LENGTH_SHORT).show();
                                        }
                                    });
                                }

                            }
                        }catch(final Exception e){
                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    Toast.makeText(getApplicationContext(),"exception="+e.getMessage(),Toast.LENGTH_SHORT).show();
                                }
                            });
                        }
                    }
                }).start();


图2中的:
//创建消息插入本地
            Message message = Message.createReceiveMessage(Message.Type.TXT);
            //从本地获取保存的string
            String str = shareUtil.getRobot();
            EMTextMessageBody body = null;
            //判断是否是菜单消息的string,这是自己实现的一个方法
            if(!isRobotMenu(str)){
                //文字消息直接去设置给消息
            body = new EMTextMessageBody(str);
            }else{
                //菜单消息需要设置给消息扩展
                try{
                    body = new EMTextMessageBody("");
                    JSONObject msgtype = new JSONObject(str);
                    message.setAttribute("msgtype",msgtype);
                }catch (Exception e){
                    Toast.makeText(this,"exception="+e.getMessage(),Toast.LENGTH_SHORT).show();
                }
}

            message.setFrom(MyApplication.imService);
            message.addBody(body);
            message.setMsgTime(System.currentTimeMillis());
            message.setStatus(Message.Status.SUCCESS);
            message.setMsgId(UUID.randomUUID().toString());
ChatClient.getInstance().chatManager().saveMessage(message);



图3中的:
private boolean isRobotMenu(String str){
        try {
            JSONObject json = new JSONObject(str);
            JSONObject obj = json.getJSONObject("choice");
        }catch (Exception e){
            return false;
        }
        return true;
}
 
  收起阅读 »

(客服云)知识库添加了附件,怎么发送的时候附件没有发送出去?

附件需要单独发送给访客。发送知识时,图文消息仅包含知识标题和知识内容,不包含知识的附件。若发送知识中的附件,需打开知识详情,并点击附件右上角的“发送”按钮。
 
附件需要单独发送给访客。发送知识时,图文消息仅包含知识标题和知识内容,不包含知识的附件。若发送知识中的附件,需打开知识详情,并点击附件右上角的“发送”按钮。
 

(客服云)iOS访客端插入企业欢迎语

0、前提配置
(1)在客服系统内 管理员模式--设置--系统开关--企业欢迎语 处设置欢迎语,并开启开关
企业欢迎语0.png

(2)联系商务开通会话创建、接起、结束的透传事件功能

1、在HDMessageViewController.m中添加企业欢迎语属性
// 企业欢迎语
@property (nonatomic, strong) NSString *companyWelcome;
企业欢迎语1.png

 
2、在HDMessageViewController.m中的 viewdidload 方法的最后调用 [self judge]; 
// 这个方法是属于逻辑判断,用UD去记录参数,只有第一次进入聊天页面和会话结束之后再进入到聊天页面才插入消息。
- (void)judge
{
    // 判断会话中是否有消息
    if (self.conversation.latestMessage == nil) {
        // 如果会话中没有消息,那么UD的值变成NO
        [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isGetWelcome"];
    }
    // 根据以前的判断,如果UD值为NO则插入消息欢迎语
    if (![[NSUserDefaults standardUserDefaults] boolForKey:@"isGetWelcome"]) {
        // 插入企业欢迎语
        [self welcome];
    }
    
    [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"isGetWelcome"];
}
 
// 这个方法是构建消息以及向UI页面以及本地数据库插入消息
- (void)welcome
{
    // 此方法是SDK获取企业欢迎语的
    __weak typeof(self) weakself = self;
    [[HDClient sharedClient].chatManager getEnterpriseWelcomeWithCompletion:^(NSString *welcome, HDError *error) {
        // 判断客服系统中是否设置了企业欢迎语并且开关有没有打开,兼容误操作客服关闭了企业欢迎语开关,会插入一条空消息,那么自己选择是否插入一条默认的欢迎语,自行修改  ‘您好,欢迎光临!’ 的内容
        if (![welcome isEqualToString:@""]) {
            weakself.companyWelcome = welcome;
        } else {
            weakself.companyWelcome = @"您好,欢迎光临!";
        }
        // 构建消息
        EMTextMessageBody *bdy = [[EMTextMessageBody alloc] initWithText:weakself.companyWelcome];
        NSString *from = [[HDClient sharedClient] currentUsername];
        // _converID就是IM服务号,可以自己替换下
        HDMessage *message = [[HDMessage alloc] initWithConversationID:weakself.conversation.conversationId from:from to:weakself.conversation.conversationId body:bdy];
        // 构建的消息用ext来标记此条消息是插入的欢迎语,然后在cell里面根据消息的ext来修改插入消息的昵称和头像
        NSDictionary *welcomeExt = @{@"insertWelcome":@"插入的欢迎语"};
        [message addAttributeDictionary:welcomeExt];   
        message.direction = 1;
        message.status = HDMessageStatusSuccessed;
        // 更新UI
        dispatch_async(dispatch_get_main_queue(), ^{
            // 消息添加到数据源,刷新UI
            [weakself addMessageToDataSource:message progress:nil];
        });
        // 消息插入到会话
        HDError *pError;
        [weakself.conversation addMessage:message error:&pError];
        
    }];
}
企业欢迎语2.png

企业欢迎语3.png

 
3、在HDMessageViewController.m中的cmdMessagesDidReceive方法中调用 messageExtwithEventName
企业欢迎语4.png

这个方法是判断接收到客服消息的ext里面有没有ServiceSessionClosedEvent,如果有就把UD记录改变参数,下次进入聊天页面的时候插入欢迎语
如果是ServiceSessionOpenedEvent,客服系统接入了会话,那么就不插入欢迎语

这个方法是接收透传消息里面调用,客服系统会话被接入会给app端发送透传消息通知,如果没有接收到透传消息,那么找对接的环信商务开通这个功能
[self messageExtwithEventName:message];

- (void)messageExtwithEventName:(HDMessage *)message
{
    if (![[[message.ext objectForKey:@"weichat"] objectForKey:@"event"] isKindOfClass:[NSNull class]]) {
        NSDictionary *dict = [[message.ext objectForKey:@"weichat"] objectForKey:@"event"];
        if ([[dict objectForKey:@"eventName"] isEqualToString:@"ServiceSessionClosedEvent"]) {
            //如果接收到客服的消息ext中有 ServiceSessionClosedEvent,表示会话已经结束,那么UD的值变成NO
            [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isGetWelcome"];
        }
        if ([[dict objectForKey:@"eventName"] isEqualToString:@"ServiceSessionOpenedEvent"]) {
            //如果接收到客服的消息ext中有 ServiceSessionClosedEvent,表示会话已经结束,那么UD的值变成NO
            [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"isGetWelcome"];
        }
        
    }
}
 
4、在cell中设置插入消息的昵称头像,根据插入消息ext中的key去判断。
企业欢迎语5.png

if (!self.model.isSender) {
        if (![model.nickname isKindOfClass:[NSNull class]]) {
            // 判断此条消息是否为插入的企业欢迎语,是的话赋值昵称和头像
            if ([self.model.message.ext objectForKey:@"insertWelcome"]) {
                _nameLabel.text = @"系统消息";
                self.avatarView.image = [UIImage imageNamed:@"测试图片"];
            }
        }
}
 
效果图
企业欢迎语效果图.png

 
继续阅读 »
0、前提配置
(1)在客服系统内 管理员模式--设置--系统开关--企业欢迎语 处设置欢迎语,并开启开关
企业欢迎语0.png

(2)联系商务开通会话创建、接起、结束的透传事件功能

1、在HDMessageViewController.m中添加企业欢迎语属性
// 企业欢迎语
@property (nonatomic, strong) NSString *companyWelcome;
企业欢迎语1.png

 
2、在HDMessageViewController.m中的 viewdidload 方法的最后调用 [self judge]; 
// 这个方法是属于逻辑判断,用UD去记录参数,只有第一次进入聊天页面和会话结束之后再进入到聊天页面才插入消息。
- (void)judge
{
    // 判断会话中是否有消息
    if (self.conversation.latestMessage == nil) {
        // 如果会话中没有消息,那么UD的值变成NO
        [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isGetWelcome"];
    }
    // 根据以前的判断,如果UD值为NO则插入消息欢迎语
    if (![[NSUserDefaults standardUserDefaults] boolForKey:@"isGetWelcome"]) {
        // 插入企业欢迎语
        [self welcome];
    }
    
    [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"isGetWelcome"];
}
 
// 这个方法是构建消息以及向UI页面以及本地数据库插入消息
- (void)welcome
{
    // 此方法是SDK获取企业欢迎语的
    __weak typeof(self) weakself = self;
    [[HDClient sharedClient].chatManager getEnterpriseWelcomeWithCompletion:^(NSString *welcome, HDError *error) {
        // 判断客服系统中是否设置了企业欢迎语并且开关有没有打开,兼容误操作客服关闭了企业欢迎语开关,会插入一条空消息,那么自己选择是否插入一条默认的欢迎语,自行修改  ‘您好,欢迎光临!’ 的内容
        if (![welcome isEqualToString:@""]) {
            weakself.companyWelcome = welcome;
        } else {
            weakself.companyWelcome = @"您好,欢迎光临!";
        }
        // 构建消息
        EMTextMessageBody *bdy = [[EMTextMessageBody alloc] initWithText:weakself.companyWelcome];
        NSString *from = [[HDClient sharedClient] currentUsername];
        // _converID就是IM服务号,可以自己替换下
        HDMessage *message = [[HDMessage alloc] initWithConversationID:weakself.conversation.conversationId from:from to:weakself.conversation.conversationId body:bdy];
        // 构建的消息用ext来标记此条消息是插入的欢迎语,然后在cell里面根据消息的ext来修改插入消息的昵称和头像
        NSDictionary *welcomeExt = @{@"insertWelcome":@"插入的欢迎语"};
        [message addAttributeDictionary:welcomeExt];   
        message.direction = 1;
        message.status = HDMessageStatusSuccessed;
        // 更新UI
        dispatch_async(dispatch_get_main_queue(), ^{
            // 消息添加到数据源,刷新UI
            [weakself addMessageToDataSource:message progress:nil];
        });
        // 消息插入到会话
        HDError *pError;
        [weakself.conversation addMessage:message error:&pError];
        
    }];
}
企业欢迎语2.png

企业欢迎语3.png

 
3、在HDMessageViewController.m中的cmdMessagesDidReceive方法中调用 messageExtwithEventName
企业欢迎语4.png

这个方法是判断接收到客服消息的ext里面有没有ServiceSessionClosedEvent,如果有就把UD记录改变参数,下次进入聊天页面的时候插入欢迎语
如果是ServiceSessionOpenedEvent,客服系统接入了会话,那么就不插入欢迎语

这个方法是接收透传消息里面调用,客服系统会话被接入会给app端发送透传消息通知,如果没有接收到透传消息,那么找对接的环信商务开通这个功能
[self messageExtwithEventName:message];

- (void)messageExtwithEventName:(HDMessage *)message
{
    if (![[[message.ext objectForKey:@"weichat"] objectForKey:@"event"] isKindOfClass:[NSNull class]]) {
        NSDictionary *dict = [[message.ext objectForKey:@"weichat"] objectForKey:@"event"];
        if ([[dict objectForKey:@"eventName"] isEqualToString:@"ServiceSessionClosedEvent"]) {
            //如果接收到客服的消息ext中有 ServiceSessionClosedEvent,表示会话已经结束,那么UD的值变成NO
            [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isGetWelcome"];
        }
        if ([[dict objectForKey:@"eventName"] isEqualToString:@"ServiceSessionOpenedEvent"]) {
            //如果接收到客服的消息ext中有 ServiceSessionClosedEvent,表示会话已经结束,那么UD的值变成NO
            [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"isGetWelcome"];
        }
        
    }
}
 
4、在cell中设置插入消息的昵称头像,根据插入消息ext中的key去判断。
企业欢迎语5.png

if (!self.model.isSender) {
        if (![model.nickname isKindOfClass:[NSNull class]]) {
            // 判断此条消息是否为插入的企业欢迎语,是的话赋值昵称和头像
            if ([self.model.message.ext objectForKey:@"insertWelcome"]) {
                _nameLabel.text = @"系统消息";
                self.avatarView.image = [UIImage imageNamed:@"测试图片"];
            }
        }
}
 
效果图
企业欢迎语效果图.png

  收起阅读 »

Android MVP架构从入门到精通-真枪实弹


0.jpeg

一. 前言

你是否遇到过Activity/Fragment中成百上千行代码,完全无法维护,看着头疼?

你是否遇到过因后台接口还未写而你不能先写代码逻辑的情况?

你是否遇到过用MVC架构写的项目进行单元测试时的深深无奈?

如果你现在还是用MVC架构模式在写项目,请先转到MVP模式!

二. MVC架构

MVC架构模式最初生根于服务器端的Web开发,后来渐渐能够胜任客户端Web开发,再后来因Android项目由XML和Activity/Fragment组成,慢慢的Android开发者开始使用类似MVC的架构模式开发应用.

0_(1).jpeg

 
M层:模型层(model),主要是实体类,数据库,网络等存在的层面,model将新的数据发送到view层,用户得到数据响应.

V层:视图层(view),一般指XML为代表的视图界面.显示来源于model层的数据.用户的点击操作等事件从view层传递到controller层.

C层:控制层(controller),一般以Activity/Fragment为代表.C层主要是连接V层和M层的,C层收到V层发送过来的事件请求,从M层获取数据,展示给V层.

从上图可以看出M层和V层有连接关系,而Activity有时候既充当了控制层又充当了视图层,导致项目维护比较麻烦.
 
1. MVC架构优缺点
A. 缺点

M层和V层有连接关系,没有解耦,导致维护困难.

Activity/Fragment中的代码过多,难以维护.

Activity中有很多关于视图UI的显示代码,因此View视图和Activity控制器并不是完全分离的,当Activity类业务过多的时候,会变得难以管理和维护.尤其是当UI的状态数据,跟持久化的数据混杂在一起,变得极为混乱.

B. 优点

控制层和View层都在Activity中进行操作,数据操作方便.

模块职责划分明确.主要划分层M,V,C三个模块.

三. MVP架构

0_(2).jpeg

 
MVP,即是Model,View,Presenter架构模式.看起来类似MVC,其实不然.从上图能看到Model层和View层没有相连接,完全解耦.

用户触碰界面触发事件,View层把事件通知Presenter层,Presenter层通知Model层处理这个事件,Model层处理后把结果发送到Presenter层,Presenter层再通知View层,最后View层做出改变.这是一整套流程.

M层:模型层(Model),此层和MVC中的M层作用类似.

V层:视图层(View),在MVC中V层只包含XML文件,而MVP中V层包含XML,Activity和Fragment三者.理论上V层不涉及任何逻辑,只负责界面的改变,尽量把逻辑处理放到M层.

P层:通知层(Presenter),P层的主要作用就是连接V层和M层,起到一个通知传递数据的作用.

1. MVP架构优缺点
A. 缺点

MVP中接口过多.

每一个功能,相比于MVC要多写好几个文件.

如果某一个界面中需要请求多个服务器接口,这个界面文件中会实现很多的回调接口,导致代码繁杂.

如果更改了数据源和请求中参数,会导致更多的代码修改.

额外的代码复杂度及学习成本.

B. 优点

模块职责划分明显,层次清晰,接口功能清晰.

Model层和View层分离,解耦.修改View而不影响Model.

功能复用度高,方便.一个Presenter可以复用于多个View,而不用更改Presenter的逻辑.

有利于测试驱动开发,以前的Android开发是难以进行单元测试.

如果后台接口还未写好,但已知返回数据类型的情况下,完全可以写出此接口完整的功能.

四. MVP架构实战(真枪实弹)
1. MVP三层代码简单书写

接下来笔者从简到繁,一点一点的堆砌MVP的整个架构.先看一下XML布局,布局中一个Button按钮和一个TextView控件,用户点击按钮后,Presenter层通知Model层请求处理网络数据,处理后Model层把结果数据发送给Presenter层,Presenter层再通知View层,然后View层改变TextView显示的内容.
 

0.gif

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
tools:context=".view.SingleInterfaceActivity">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="点击" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100px"
android:text="请点击上方按钮获取数据" />
</LinearLayout>

接下来是Activity代码,里面就是获取Button和TextView控件,然后对Button做监听,先简单的这样写,一会慢慢的增加代码.
 
public class SingleInterfaceActivity extends AppCompatActivity {

private Button button;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});

}
}

下面是Model层代码.本次网络请求用的是wanandroid网站的开放api,其中的文章首页列表接口.SingleInterfaceModel文件里面有一个方法getData,第一个参数curPage意思是获取第几页的数据,第二个参数callback是Model层通知Presenter层的回调.
 
public class SingleInterfaceModel {

public void getData(int curPage, final Callback callback) {
NetUtils.getRetrofit()
.create(Api.class)
.getData(curPage)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Subscriber<ArticleListBean>() {
@Override
public void onCompleted() {
LP.w("completed");
}

@Override
public void onError(Throwable e) {
callback.onFail("出现错误");
}

@Override
public void onNext(ArticleListBean bean) {
if (null == bean) {
callback.onFail("出现错误");
} else if (bean.errorCode != 0) {
callback.onFail(bean.errorMsg);
} else {
callback.onSuccess(bean);
}
}
});
}
}
Callback文件内容如下.里面一个成功一个失败的回调接口,参数全是泛型,为啥使用泛型笔者就不用说了吧.
 
public interface Callback<K, V> {
void onSuccess(K data);

void onFail(V data);
}
再接下来是Presenter层的代码.SingleInterfacePresenter类构造函数中直接new了一个Model层对象,用于Presenter层对Model层的调用.然后SingleInterfacePresenter类的方法getData用于与Model的互相连接.
 
public class SingleInterfacePresenter {
private final SingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码

}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码

}
});
}
}
至此,MVP三层简单的部分代码算是完成.那么怎样进行整个流程的相互调用呢.我们把刚开始的SingleInterfaceActivity代码改一下,让SingleInterfaceActivity持有Presenter层的对象,这样View层就可以调用Presenter层了.修改后代码如下.
 
public class SingleInterfaceActivity extends AppCompatActivity {

private Button button;
private TextView textView;
private SingleInterfacePresenter singleInterfacePresenter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

singleInterfacePresenter = new SingleInterfacePresenter();
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
singleInterfacePresenter.getData(0);
}
});

}
}
从以上所有代码可以看出,当用户点击按钮后,View层按钮的监听事件执行调用了Presenter层对象的getData方法,此时,Presenter层对象的getData方法调用了Model层对象的getData方法,Model层对象的getData方法中执行了网络请求和逻辑处理,把成功或失败的结果通过Callback接口回调给了Presenter层,然后Presenter层再通知View层改变界面.但此时SingleInterfacePresenter类中收到Model层的结果后无法通知View层,因为SingleInterfacePresenter未持有View层的对象.如下代码的注释中有说明.(如果此时点击按钮,下方代码LP.w()处会打印出网络请求成功的log)
 
public class SingleInterfacePresenter {
private final SingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码

}
});
}
}
代码写到这里,笔者先把这些代码提交到github(https://github.com/serge66/MVPDemo),github上会有一次提交记录,如果想看此时的代码,可以根据提交记录"第一次修改"克隆此时的代码.

2. P层V层沟通桥梁

现在P层未持有V层对象,不能通知V层改变界面,那么就继续演变MVP架构.
在MVP架构中,我们要为每个Activity/Fragment写一个接口,这个接口需要让Presenter层持有,P层通过这个接口去通知V层更改界面.接口中包含了成功和失败的回调,这个接口Activity/Fragment要去实现,最终P层才能通知V层.
 
public interface SingleInterfaceIView {
void showArticleSuccess(ArticleListBean bean);

void showArticleFail(String errorMsg);
}
一个完整的项目以后肯定会有许多功能界面,那么我们应该抽出一个IView公共接口,让所有的Activity/Fragment都间接实现它.IVew公共接口是用于给View层的接口继承的,注意,不是View本身继承.因为它定义的是接口的规范, 而其他接口才是定义的类的规范(这句话请仔细理解).
public interface IView {
}
这个接口中可以写一些所有Activigy/Fragment共用的方法,我们把SingleInterfaceIView继承IView接口.
public interface SingleInterfaceIView extends IView {
void showArticleSuccess(ArticleListBean bean);

void showArticleFail(String errorMsg);
}
同理Model层和Presenter层也是如此.
public interface IModel {
}
public interface IPresenter {
}
现在项目中Model层是一个SingleInterfaceModel类,这个类对象被P层持有,对于面向对象设计来讲,利用接口达到解耦目的已经人尽皆知,那我们就要对SingleInterfaceModel类再写一个可继承的接口.代码如下.
public interface ISingleInterfaceModel extends IModel {
void getData(int curPage, final Callback callback);
}
如此,SingleInterfaceModel类的修改如下.
 
public class SingleInterfaceModel implements ISingleInterfaceModel {

@Override
public void getData(int curPage, final Callback callback) {
NetUtils.getRetrofit()
.create(Api.class)
.getData(curPage)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Subscriber<ArticleListBean>() {
@Override
public void onCompleted() {
LP.w("completed");
}

@Override
public void onError(Throwable e) {
callback.onFail("出现错误");
}

@Override
public void onNext(ArticleListBean bean) {
if (null == bean) {
callback.onFail("出现错误");
} else if (bean.errorCode != 0) {
callback.onFail(bean.errorMsg);
} else {
callback.onSuccess(bean);
}
}
});
}
}
同理,View层持有P层对象,我们也需要对P层进行改造.但是下面的代码却没有像ISingleInterfaceModel接口继承IModel一样继承IPresenter,这点需要注意,笔者把IPresenter的继承放在了其他处,后面会讲解.
 
public interface ISingleInterfacePresenter {
void getData(int curPage);
}

然后SingleInterfacePresenter类的修改如下:
 
public class SingleInterfacePresenter implements ISingleInterfacePresenter {
private final ISingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

@Override
public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码
LP.w(errorMsg);
}
});
}
}
3. 生命周期适配

至此,MVP三层每层的接口都写好了.但是P层连接V层的桥梁还没有搭建好,这个慢慢来,一个好的高楼大厦都是一步一步建造的.上面IPresenter接口我们没有让其他类继承,接下来就讲下这个.P层和V层相连接,V层的生命周期也要适配到P层,P层的每个功能都要适配生命周期,这里可以把生命周期的适配放在IPresenter接口中.P层持有V层对象,这里把它放到泛型中.代码如下.
 
public interface IPresenter<T extends IView> {

    /**
     * 依附生命view
     *
     * @param view
     */
    void attachView(T view);

    /**
     * 分离View
     */
    void detachView();

    /**
     * 判断View是否已经销毁
     *
     * @return
     */
    boolean isViewAttached();

}
 
这个IPresenter接口需要所有的P层实现类继承,对于生命周期这部分功能都是通用的,那么就可以抽出来一个抽象基类BasePresenter,去实现IPresenter的接口.
public abstract class BasePresenter<T extends IView> implements IPresenter<T> {
protected T mView;

@Override
public void attachView(T view) {
mView = view;
}

@Override
public void detachView() {
mView = null;
}

@Override
public boolean isViewAttached() {
return mView != null;
}
}
此时,SingleInterfacePresenter类的代码修改如下.泛型中的SingleInterfaceIView可以理解成对应的Activity,P层此时完成了对V层的通信.
public class SingleInterfacePresenter extends BasePresenter<SingleInterfaceIView> implements ISingleInterfacePresenter {
private final ISingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

@Override
public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
if (isViewAttached()) {
mView.showArticleSuccess(loginResultBean);
}
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码
LP.w(errorMsg);
if (isViewAttached()) {
mView.showArticleFail(errorMsg);
}
}
});
}
}
此时,P层和V层的连接桥梁已经搭建,但还未搭建完成,我们需要写个BaseMVPActvity让所有的Activity继承,统一处理Activity相同逻辑.在BaseMVPActvity中使用IPresenter的泛型,因为每个Activity中需要持有P层对象,这里把P层对象抽出来也放在BaseMVPActvity中.同时BaseMVPActvity中也需要继承IView,用于P层对V层的生命周期中.代码如下.
 
public abstract class BaseMVPActivity<T extends IPresenter> extends AppCompatActivity implements IView {

protected T mPresenter;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initPresenter();
init();
}

protected void initPresenter() {
mPresenter = createPresenter();
//绑定生命周期
if (mPresenter != null) {
mPresenter.attachView(this);
}
}

@Override
protected void onDestroy() {
if (mPresenter != null) {
mPresenter.detachView();
}
super.onDestroy();
}

/**
* 创建一个Presenter
*
* @return
*/
protected abstract T createPresenter();

protected abstract void init();

}
接下来让SingleInterfaceActivity实现这个BaseMVPActivity.
public class SingleInterfaceActivity extends BaseMVPActivity<SingleInterfacePresenter> implements SingleInterfaceIView {

private Button button;
private TextView textView;

@Override
protected void init() {
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPresenter.getData(0);
}
});
}

@Override
protected SingleInterfacePresenter createPresenter() {
return new SingleInterfacePresenter();
}


@Override
public void showArticleSuccess(ArticleListBean bean) {
textView.setText(bean.data.datas.get(0).title);
}

@Override
public void showArticleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}
}
到此,MVP架构的整个简易流程完成.

代码写到这里,笔者先把这些代码提交到github(https://github.com/serge66/MVPDemo),github上会有一次提交记录,如果想看此时的代码,可以根据提交记录"第二次修改"克隆此时的代码.

4. 优化MVP架构

0_(3).jpeg

 
 
上面是MVP的目录,从目录中我们可以看到一个功能点(网络请求)MVP三层各有两个文件需要写,相对于MVC来说写起来确实麻烦,这也是一些人不愿意写MVP,宁愿用MVC的原因.

这里我们可以对此优化一下.MVP架构中有个Contract的概念,Contract有统一管理接口的作用,目的是为了统一管理一个页面的View和Presenter接口,用Contract可以减少部分文件的创建,比如P层和V层的接口文件.

那我们就把P层的ISingleInterfacePresenter接口和V层的SingleInterfaceIView接口文件删除掉,放入SingleInterfaceContract文件中.代码如下.
 
public interface SingleInterfaceContract {


interface View extends IView {
void showArticleSuccess(ArticleListBean bean);

void showArticleFail(String errorMsg);
}

interface Presenter {
void getData(int curPage);
}


}
此时,SingleInterfacePresenter和SingleInterfaceActivity的代码修改如下.
 
public class SingleInterfacePresenter extends BasePresenter<SingleInterfaceContract.View>
implements SingleInterfaceContract.Presenter {

private final ISingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

@Override
public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
if (isViewAttached()) {
mView.showArticleSuccess(loginResultBean);
}
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码
LP.w(errorMsg);
if (isViewAttached()) {
mView.showArticleFail(errorMsg);
}
}
});
}
}

public class SingleInterfaceActivity extends BaseMVPActivity<SingleInterfacePresenter>
implements SingleInterfaceContract.View {

private Button button;
private TextView textView;

@Override
protected void init() {
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPresenter.getData(0);
}
});
}

@Override
protected SingleInterfacePresenter createPresenter() {
return new SingleInterfacePresenter();
}


@Override
public void showArticleSuccess(ArticleListBean bean) {
textView.setText(bean.data.datas.get(0).title);
}

@Override
public void showArticleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}
}

代码写到这里,笔者先把这些代码提交到github(https://github.com/serge66/MVPDemo),github上会有一次提交记录,如果想看此时的代码,可以根据提交记录"第三次修改"克隆此时的代码.

5. 单页面多网络请求以及P层复用

上面的MVP封装只适用于单页面一个网络请求的情况,当一个界面有两个网络请求时,此封装已不适合.以及考虑到P层的复用.为此,我们再次新建一个MultipleInterfaceActivity来进行说明.XML中布局是两个按钮两个Textview,点击则可以进行网络请求.

0_(1).gif

 
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
tools:context=".view.MultipleInterfaceActivity">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="点击" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50px"
android:text="请点击上方按钮获取数据" />

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100px"
android:text="点击" />

<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50px"
android:text="请点击上方按钮获取数据" />
</LinearLayout>
MultipleInterfaceActivity类代码暂时如下.
 
public class MultipleInterfaceActivity extends BaseMVPActivity {

private Button button;
private TextView textView;
private Button btn;
private TextView tv;


@Override
protected void init() {
setContentView(R.layout.activity_multiple_interface);

button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});


btn = findViewById(R.id.btn);
tv = findViewById(R.id.tv);

btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});
}

@Override
protected IPresenter createPresenter() {
return null;
}

}
此时我们可以想下,当一个页面中有多个网络请求时,Activity所继承的BaseMVPActivity的泛型中要写多个参数,那有没有上面代码的框架不变的情况下实现这个需求呢?答案必须有的.我们可以把多个网络请求的功能当做一个网络请求来看待,封装成一个MultiplePresenter,其继承至BasePresenter实现生命周期的适配.此MultiplePresenter类的作用就是容纳多个Presenter,连接同一个View.代码如下.
 
public class MultiplePresenter<T extends IView> extends BasePresenter<T> {
private T mView;

private List<IPresenter> presenters = new ArrayList<>();

@SafeVarargs
public final <K extends IPresenter<T>> void addPresenter(K... addPresenter) {
for (K ap : addPresenter) {
ap.attachView(mView);
presenters.add(ap);
}
}

public MultiplePresenter(T mView) {
this.mView = mView;
}

@Override
public void detachView() {
for (IPresenter presenter : presenters) {
presenter.detachView();
}
}

}
因MultiplePresenter类中需要有多个网络请求,现在举例说明时,暂时用两个网络请求接口.MultipleInterfaceActivity类中代码改造如下.
 
public class MultipleInterfaceActivity extends BaseMVPActivity<MultiplePresenter>
implements SingleInterfaceContract.View, MultipleInterfaceContract.View {

private Button button;
private TextView textView;
private Button btn;
private TextView tv;
private SingleInterfacePresenter singleInterfacePresenter;
private MultipleInterfacePresenter multipleInterfacePresenter;


@Override
protected void init() {
setContentView(R.layout.activity_multiple_interface);

button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
singleInterfacePresenter.getData(0);
}
});


btn = findViewById(R.id.btn);
tv = findViewById(R.id.tv);

btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
multipleInterfacePresenter.getBanner();
}
});
}

@Override
protected MultiplePresenter createPresenter() {
MultiplePresenter multiplePresenter = new MultiplePresenter(this);

singleInterfacePresenter = new SingleInterfacePresenter();
multipleInterfacePresenter = new MultipleInterfacePresenter();

multiplePresenter.addPresenter(singleInterfacePresenter);
multiplePresenter.addPresenter(multipleInterfacePresenter);
return multiplePresenter;
}

@Override
public void showArticleSuccess(ArticleListBean bean) {
textView.setText(bean.data.datas.get(0).title);
}

@Override
public void showArticleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}

@Override
public void showMultipleSuccess(BannerBean bean) {
tv.setText(bean.data.get(0).title);
}

@Override
public void showMultipleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}
}
写到这里,MVP框架基本算是完成.如果想再次优化,其实还是有可优化的地方,比如当View销毁时,现在只是让P层中的View对象置为null,并没有继续对M层通知.如果View销毁时,M层还在请求网络中呢,可以为此再加入一个取消网络请求的通用功能.这里只是举一个例子,每个人对MVP的理解不一样,而MVP架构也并不是一成不变,适合自己项目的才是最好的.

6. 完整项目地址

完整项目已提交到github(https://github.com/serge66/MVPDemo).点击下方阅读原文即可访问.

五. 参考资料

[一步步带你精通MVP](https://mp.weixin.qq.com/s/DuNbl3V4gZY-ZCETbhZGug)

[从0到1搭建MVP框架](https://mp.weixin.qq.com/s/QFpHhC-5JkAb4IlMP0nKug)

[Presenter层如何高度的复用](https://juejin.im/post/599ce8016fb9a0247e4255f4)
 
六. 后续

MVVM架构从入门到精通-真枪实弹 敬请期待~~~
 

qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术
 
继续阅读 »

0.jpeg

一. 前言

你是否遇到过Activity/Fragment中成百上千行代码,完全无法维护,看着头疼?

你是否遇到过因后台接口还未写而你不能先写代码逻辑的情况?

你是否遇到过用MVC架构写的项目进行单元测试时的深深无奈?

如果你现在还是用MVC架构模式在写项目,请先转到MVP模式!

二. MVC架构

MVC架构模式最初生根于服务器端的Web开发,后来渐渐能够胜任客户端Web开发,再后来因Android项目由XML和Activity/Fragment组成,慢慢的Android开发者开始使用类似MVC的架构模式开发应用.

0_(1).jpeg

 
M层:模型层(model),主要是实体类,数据库,网络等存在的层面,model将新的数据发送到view层,用户得到数据响应.

V层:视图层(view),一般指XML为代表的视图界面.显示来源于model层的数据.用户的点击操作等事件从view层传递到controller层.

C层:控制层(controller),一般以Activity/Fragment为代表.C层主要是连接V层和M层的,C层收到V层发送过来的事件请求,从M层获取数据,展示给V层.

从上图可以看出M层和V层有连接关系,而Activity有时候既充当了控制层又充当了视图层,导致项目维护比较麻烦.
 
1. MVC架构优缺点
A. 缺点

M层和V层有连接关系,没有解耦,导致维护困难.

Activity/Fragment中的代码过多,难以维护.

Activity中有很多关于视图UI的显示代码,因此View视图和Activity控制器并不是完全分离的,当Activity类业务过多的时候,会变得难以管理和维护.尤其是当UI的状态数据,跟持久化的数据混杂在一起,变得极为混乱.

B. 优点

控制层和View层都在Activity中进行操作,数据操作方便.

模块职责划分明确.主要划分层M,V,C三个模块.

三. MVP架构

0_(2).jpeg

 
MVP,即是Model,View,Presenter架构模式.看起来类似MVC,其实不然.从上图能看到Model层和View层没有相连接,完全解耦.

用户触碰界面触发事件,View层把事件通知Presenter层,Presenter层通知Model层处理这个事件,Model层处理后把结果发送到Presenter层,Presenter层再通知View层,最后View层做出改变.这是一整套流程.

M层:模型层(Model),此层和MVC中的M层作用类似.

V层:视图层(View),在MVC中V层只包含XML文件,而MVP中V层包含XML,Activity和Fragment三者.理论上V层不涉及任何逻辑,只负责界面的改变,尽量把逻辑处理放到M层.

P层:通知层(Presenter),P层的主要作用就是连接V层和M层,起到一个通知传递数据的作用.

1. MVP架构优缺点
A. 缺点

MVP中接口过多.

每一个功能,相比于MVC要多写好几个文件.

如果某一个界面中需要请求多个服务器接口,这个界面文件中会实现很多的回调接口,导致代码繁杂.

如果更改了数据源和请求中参数,会导致更多的代码修改.

额外的代码复杂度及学习成本.

B. 优点

模块职责划分明显,层次清晰,接口功能清晰.

Model层和View层分离,解耦.修改View而不影响Model.

功能复用度高,方便.一个Presenter可以复用于多个View,而不用更改Presenter的逻辑.

有利于测试驱动开发,以前的Android开发是难以进行单元测试.

如果后台接口还未写好,但已知返回数据类型的情况下,完全可以写出此接口完整的功能.

四. MVP架构实战(真枪实弹)
1. MVP三层代码简单书写

接下来笔者从简到繁,一点一点的堆砌MVP的整个架构.先看一下XML布局,布局中一个Button按钮和一个TextView控件,用户点击按钮后,Presenter层通知Model层请求处理网络数据,处理后Model层把结果数据发送给Presenter层,Presenter层再通知View层,然后View层改变TextView显示的内容.
 

0.gif

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
tools:context=".view.SingleInterfaceActivity">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="点击" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100px"
android:text="请点击上方按钮获取数据" />
</LinearLayout>

接下来是Activity代码,里面就是获取Button和TextView控件,然后对Button做监听,先简单的这样写,一会慢慢的增加代码.
 
public class SingleInterfaceActivity extends AppCompatActivity {

private Button button;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});

}
}

下面是Model层代码.本次网络请求用的是wanandroid网站的开放api,其中的文章首页列表接口.SingleInterfaceModel文件里面有一个方法getData,第一个参数curPage意思是获取第几页的数据,第二个参数callback是Model层通知Presenter层的回调.
 
public class SingleInterfaceModel {

public void getData(int curPage, final Callback callback) {
NetUtils.getRetrofit()
.create(Api.class)
.getData(curPage)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Subscriber<ArticleListBean>() {
@Override
public void onCompleted() {
LP.w("completed");
}

@Override
public void onError(Throwable e) {
callback.onFail("出现错误");
}

@Override
public void onNext(ArticleListBean bean) {
if (null == bean) {
callback.onFail("出现错误");
} else if (bean.errorCode != 0) {
callback.onFail(bean.errorMsg);
} else {
callback.onSuccess(bean);
}
}
});
}
}
Callback文件内容如下.里面一个成功一个失败的回调接口,参数全是泛型,为啥使用泛型笔者就不用说了吧.
 
public interface Callback<K, V> {
void onSuccess(K data);

void onFail(V data);
}
再接下来是Presenter层的代码.SingleInterfacePresenter类构造函数中直接new了一个Model层对象,用于Presenter层对Model层的调用.然后SingleInterfacePresenter类的方法getData用于与Model的互相连接.
 
public class SingleInterfacePresenter {
private final SingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码

}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码

}
});
}
}
至此,MVP三层简单的部分代码算是完成.那么怎样进行整个流程的相互调用呢.我们把刚开始的SingleInterfaceActivity代码改一下,让SingleInterfaceActivity持有Presenter层的对象,这样View层就可以调用Presenter层了.修改后代码如下.
 
public class SingleInterfaceActivity extends AppCompatActivity {

private Button button;
private TextView textView;
private SingleInterfacePresenter singleInterfacePresenter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

singleInterfacePresenter = new SingleInterfacePresenter();
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
singleInterfacePresenter.getData(0);
}
});

}
}
从以上所有代码可以看出,当用户点击按钮后,View层按钮的监听事件执行调用了Presenter层对象的getData方法,此时,Presenter层对象的getData方法调用了Model层对象的getData方法,Model层对象的getData方法中执行了网络请求和逻辑处理,把成功或失败的结果通过Callback接口回调给了Presenter层,然后Presenter层再通知View层改变界面.但此时SingleInterfacePresenter类中收到Model层的结果后无法通知View层,因为SingleInterfacePresenter未持有View层的对象.如下代码的注释中有说明.(如果此时点击按钮,下方代码LP.w()处会打印出网络请求成功的log)
 
public class SingleInterfacePresenter {
private final SingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码

}
});
}
}
代码写到这里,笔者先把这些代码提交到github(https://github.com/serge66/MVPDemo),github上会有一次提交记录,如果想看此时的代码,可以根据提交记录"第一次修改"克隆此时的代码.

2. P层V层沟通桥梁

现在P层未持有V层对象,不能通知V层改变界面,那么就继续演变MVP架构.
在MVP架构中,我们要为每个Activity/Fragment写一个接口,这个接口需要让Presenter层持有,P层通过这个接口去通知V层更改界面.接口中包含了成功和失败的回调,这个接口Activity/Fragment要去实现,最终P层才能通知V层.
 
public interface SingleInterfaceIView {
void showArticleSuccess(ArticleListBean bean);

void showArticleFail(String errorMsg);
}
一个完整的项目以后肯定会有许多功能界面,那么我们应该抽出一个IView公共接口,让所有的Activity/Fragment都间接实现它.IVew公共接口是用于给View层的接口继承的,注意,不是View本身继承.因为它定义的是接口的规范, 而其他接口才是定义的类的规范(这句话请仔细理解).
public interface IView {
}
这个接口中可以写一些所有Activigy/Fragment共用的方法,我们把SingleInterfaceIView继承IView接口.
public interface SingleInterfaceIView extends IView {
void showArticleSuccess(ArticleListBean bean);

void showArticleFail(String errorMsg);
}
同理Model层和Presenter层也是如此.
public interface IModel {
}
public interface IPresenter {
}
现在项目中Model层是一个SingleInterfaceModel类,这个类对象被P层持有,对于面向对象设计来讲,利用接口达到解耦目的已经人尽皆知,那我们就要对SingleInterfaceModel类再写一个可继承的接口.代码如下.
public interface ISingleInterfaceModel extends IModel {
void getData(int curPage, final Callback callback);
}
如此,SingleInterfaceModel类的修改如下.
 
public class SingleInterfaceModel implements ISingleInterfaceModel {

@Override
public void getData(int curPage, final Callback callback) {
NetUtils.getRetrofit()
.create(Api.class)
.getData(curPage)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Subscriber<ArticleListBean>() {
@Override
public void onCompleted() {
LP.w("completed");
}

@Override
public void onError(Throwable e) {
callback.onFail("出现错误");
}

@Override
public void onNext(ArticleListBean bean) {
if (null == bean) {
callback.onFail("出现错误");
} else if (bean.errorCode != 0) {
callback.onFail(bean.errorMsg);
} else {
callback.onSuccess(bean);
}
}
});
}
}
同理,View层持有P层对象,我们也需要对P层进行改造.但是下面的代码却没有像ISingleInterfaceModel接口继承IModel一样继承IPresenter,这点需要注意,笔者把IPresenter的继承放在了其他处,后面会讲解.
 
public interface ISingleInterfacePresenter {
void getData(int curPage);
}

然后SingleInterfacePresenter类的修改如下:
 
public class SingleInterfacePresenter implements ISingleInterfacePresenter {
private final ISingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

@Override
public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码
LP.w(errorMsg);
}
});
}
}
3. 生命周期适配

至此,MVP三层每层的接口都写好了.但是P层连接V层的桥梁还没有搭建好,这个慢慢来,一个好的高楼大厦都是一步一步建造的.上面IPresenter接口我们没有让其他类继承,接下来就讲下这个.P层和V层相连接,V层的生命周期也要适配到P层,P层的每个功能都要适配生命周期,这里可以把生命周期的适配放在IPresenter接口中.P层持有V层对象,这里把它放到泛型中.代码如下.
 
public interface IPresenter<T extends IView> {

    /**
     * 依附生命view
     *
     * @param view
     */
    void attachView(T view);

    /**
     * 分离View
     */
    void detachView();

    /**
     * 判断View是否已经销毁
     *
     * @return
     */
    boolean isViewAttached();

}
 
这个IPresenter接口需要所有的P层实现类继承,对于生命周期这部分功能都是通用的,那么就可以抽出来一个抽象基类BasePresenter,去实现IPresenter的接口.
public abstract class BasePresenter<T extends IView> implements IPresenter<T> {
protected T mView;

@Override
public void attachView(T view) {
mView = view;
}

@Override
public void detachView() {
mView = null;
}

@Override
public boolean isViewAttached() {
return mView != null;
}
}
此时,SingleInterfacePresenter类的代码修改如下.泛型中的SingleInterfaceIView可以理解成对应的Activity,P层此时完成了对V层的通信.
public class SingleInterfacePresenter extends BasePresenter<SingleInterfaceIView> implements ISingleInterfacePresenter {
private final ISingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

@Override
public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
if (isViewAttached()) {
mView.showArticleSuccess(loginResultBean);
}
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码
LP.w(errorMsg);
if (isViewAttached()) {
mView.showArticleFail(errorMsg);
}
}
});
}
}
此时,P层和V层的连接桥梁已经搭建,但还未搭建完成,我们需要写个BaseMVPActvity让所有的Activity继承,统一处理Activity相同逻辑.在BaseMVPActvity中使用IPresenter的泛型,因为每个Activity中需要持有P层对象,这里把P层对象抽出来也放在BaseMVPActvity中.同时BaseMVPActvity中也需要继承IView,用于P层对V层的生命周期中.代码如下.
 
public abstract class BaseMVPActivity<T extends IPresenter> extends AppCompatActivity implements IView {

protected T mPresenter;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initPresenter();
init();
}

protected void initPresenter() {
mPresenter = createPresenter();
//绑定生命周期
if (mPresenter != null) {
mPresenter.attachView(this);
}
}

@Override
protected void onDestroy() {
if (mPresenter != null) {
mPresenter.detachView();
}
super.onDestroy();
}

/**
* 创建一个Presenter
*
* @return
*/
protected abstract T createPresenter();

protected abstract void init();

}
接下来让SingleInterfaceActivity实现这个BaseMVPActivity.
public class SingleInterfaceActivity extends BaseMVPActivity<SingleInterfacePresenter> implements SingleInterfaceIView {

private Button button;
private TextView textView;

@Override
protected void init() {
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPresenter.getData(0);
}
});
}

@Override
protected SingleInterfacePresenter createPresenter() {
return new SingleInterfacePresenter();
}


@Override
public void showArticleSuccess(ArticleListBean bean) {
textView.setText(bean.data.datas.get(0).title);
}

@Override
public void showArticleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}
}
到此,MVP架构的整个简易流程完成.

代码写到这里,笔者先把这些代码提交到github(https://github.com/serge66/MVPDemo),github上会有一次提交记录,如果想看此时的代码,可以根据提交记录"第二次修改"克隆此时的代码.

4. 优化MVP架构

0_(3).jpeg

 
 
上面是MVP的目录,从目录中我们可以看到一个功能点(网络请求)MVP三层各有两个文件需要写,相对于MVC来说写起来确实麻烦,这也是一些人不愿意写MVP,宁愿用MVC的原因.

这里我们可以对此优化一下.MVP架构中有个Contract的概念,Contract有统一管理接口的作用,目的是为了统一管理一个页面的View和Presenter接口,用Contract可以减少部分文件的创建,比如P层和V层的接口文件.

那我们就把P层的ISingleInterfacePresenter接口和V层的SingleInterfaceIView接口文件删除掉,放入SingleInterfaceContract文件中.代码如下.
 
public interface SingleInterfaceContract {


interface View extends IView {
void showArticleSuccess(ArticleListBean bean);

void showArticleFail(String errorMsg);
}

interface Presenter {
void getData(int curPage);
}


}
此时,SingleInterfacePresenter和SingleInterfaceActivity的代码修改如下.
 
public class SingleInterfacePresenter extends BasePresenter<SingleInterfaceContract.View>
implements SingleInterfaceContract.Presenter {

private final ISingleInterfaceModel singleInterfaceModel;

public SingleInterfacePresenter() {
this.singleInterfaceModel = new SingleInterfaceModel();
}

@Override
public void getData(int curPage) {
singleInterfaceModel.getData(curPage, new Callback<ArticleListBean, String>() {
@Override
public void onSuccess(ArticleListBean loginResultBean) {
//如果Model层请求数据成功,则此处应执行通知View层的代码
//LP.w()是一个简单的log打印
LP.w(loginResultBean.toString());
if (isViewAttached()) {
mView.showArticleSuccess(loginResultBean);
}
}

@Override
public void onFail(String errorMsg) {
//如果Model层请求数据失败,则此处应执行通知View层的代码
LP.w(errorMsg);
if (isViewAttached()) {
mView.showArticleFail(errorMsg);
}
}
});
}
}

public class SingleInterfaceActivity extends BaseMVPActivity<SingleInterfacePresenter>
implements SingleInterfaceContract.View {

private Button button;
private TextView textView;

@Override
protected void init() {
setContentView(R.layout.activity_single_interface);
button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPresenter.getData(0);
}
});
}

@Override
protected SingleInterfacePresenter createPresenter() {
return new SingleInterfacePresenter();
}


@Override
public void showArticleSuccess(ArticleListBean bean) {
textView.setText(bean.data.datas.get(0).title);
}

@Override
public void showArticleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}
}

代码写到这里,笔者先把这些代码提交到github(https://github.com/serge66/MVPDemo),github上会有一次提交记录,如果想看此时的代码,可以根据提交记录"第三次修改"克隆此时的代码.

5. 单页面多网络请求以及P层复用

上面的MVP封装只适用于单页面一个网络请求的情况,当一个界面有两个网络请求时,此封装已不适合.以及考虑到P层的复用.为此,我们再次新建一个MultipleInterfaceActivity来进行说明.XML中布局是两个按钮两个Textview,点击则可以进行网络请求.

0_(1).gif

 
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
tools:context=".view.MultipleInterfaceActivity">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="点击" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50px"
android:text="请点击上方按钮获取数据" />

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100px"
android:text="点击" />

<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50px"
android:text="请点击上方按钮获取数据" />
</LinearLayout>
MultipleInterfaceActivity类代码暂时如下.
 
public class MultipleInterfaceActivity extends BaseMVPActivity {

private Button button;
private TextView textView;
private Button btn;
private TextView tv;


@Override
protected void init() {
setContentView(R.layout.activity_multiple_interface);

button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});


btn = findViewById(R.id.btn);
tv = findViewById(R.id.tv);

btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});
}

@Override
protected IPresenter createPresenter() {
return null;
}

}
此时我们可以想下,当一个页面中有多个网络请求时,Activity所继承的BaseMVPActivity的泛型中要写多个参数,那有没有上面代码的框架不变的情况下实现这个需求呢?答案必须有的.我们可以把多个网络请求的功能当做一个网络请求来看待,封装成一个MultiplePresenter,其继承至BasePresenter实现生命周期的适配.此MultiplePresenter类的作用就是容纳多个Presenter,连接同一个View.代码如下.
 
public class MultiplePresenter<T extends IView> extends BasePresenter<T> {
private T mView;

private List<IPresenter> presenters = new ArrayList<>();

@SafeVarargs
public final <K extends IPresenter<T>> void addPresenter(K... addPresenter) {
for (K ap : addPresenter) {
ap.attachView(mView);
presenters.add(ap);
}
}

public MultiplePresenter(T mView) {
this.mView = mView;
}

@Override
public void detachView() {
for (IPresenter presenter : presenters) {
presenter.detachView();
}
}

}
因MultiplePresenter类中需要有多个网络请求,现在举例说明时,暂时用两个网络请求接口.MultipleInterfaceActivity类中代码改造如下.
 
public class MultipleInterfaceActivity extends BaseMVPActivity<MultiplePresenter>
implements SingleInterfaceContract.View, MultipleInterfaceContract.View {

private Button button;
private TextView textView;
private Button btn;
private TextView tv;
private SingleInterfacePresenter singleInterfacePresenter;
private MultipleInterfacePresenter multipleInterfacePresenter;


@Override
protected void init() {
setContentView(R.layout.activity_multiple_interface);

button = findViewById(R.id.button);
textView = findViewById(R.id.textView);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
singleInterfacePresenter.getData(0);
}
});


btn = findViewById(R.id.btn);
tv = findViewById(R.id.tv);

btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
multipleInterfacePresenter.getBanner();
}
});
}

@Override
protected MultiplePresenter createPresenter() {
MultiplePresenter multiplePresenter = new MultiplePresenter(this);

singleInterfacePresenter = new SingleInterfacePresenter();
multipleInterfacePresenter = new MultipleInterfacePresenter();

multiplePresenter.addPresenter(singleInterfacePresenter);
multiplePresenter.addPresenter(multipleInterfacePresenter);
return multiplePresenter;
}

@Override
public void showArticleSuccess(ArticleListBean bean) {
textView.setText(bean.data.datas.get(0).title);
}

@Override
public void showArticleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}

@Override
public void showMultipleSuccess(BannerBean bean) {
tv.setText(bean.data.get(0).title);
}

@Override
public void showMultipleFail(String errorMsg) {
Toast.makeText(this, errorMsg, Toast.LENGTH_SHORT).show();
}
}
写到这里,MVP框架基本算是完成.如果想再次优化,其实还是有可优化的地方,比如当View销毁时,现在只是让P层中的View对象置为null,并没有继续对M层通知.如果View销毁时,M层还在请求网络中呢,可以为此再加入一个取消网络请求的通用功能.这里只是举一个例子,每个人对MVP的理解不一样,而MVP架构也并不是一成不变,适合自己项目的才是最好的.

6. 完整项目地址

完整项目已提交到github(https://github.com/serge66/MVPDemo).点击下方阅读原文即可访问.

五. 参考资料

[一步步带你精通MVP](https://mp.weixin.qq.com/s/DuNbl3V4gZY-ZCETbhZGug)

[从0到1搭建MVP框架](https://mp.weixin.qq.com/s/QFpHhC-5JkAb4IlMP0nKug)

[Presenter层如何高度的复用](https://juejin.im/post/599ce8016fb9a0247e4255f4)
 
六. 后续

MVVM架构从入门到精通-真枪实弹 敬请期待~~~
 

qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术
  收起阅读 »

在线直播源码实现直播技术曾遇到的那些小问题

文章主要内容:在直播过程经常会遇到哪些问题?在线直播源码是怎样实现相应的直播技术的?这些问题的产生是由怎样的原因导致的?
以下这些问题,我相信都是直播中十分常见,并且具有一定参考性的问题。大家可以通过以下内容寻找对应的问题和原因,希望能给大家产生一定的帮助。
1.播放失败:服务器连接失败、域名解析失败、只有音频没有视频、只有视频没有音频。
2.直播出现卡顿:(1)主播端网络不好,导致推流上行不稳定。(2)服务端线路质量差,造成分发不稳定。(3)用户端网络质量差,从而拉流下行不稳定。
3.延时高:网络传输延时、协议延时、业务代码中的缓冲区。
4.音画不同步:(应从视频直播的生产端进行排查)采集设备内部出现问题、时间戳没有在采集时被获取、采集源距离太远、时间戳出现回退或紊乱现象、播放端的性能问题。
5.马赛克:图像尺寸原因、视频编码参数配置原因、关键帧丢失。
6.播放黑屏:主播端编码失效、视频编码失效、码流前半段只有音频没有视频。
7.播放花屏:播放器没有从关键帧开始解码、码流中的视频尺寸发生变化、丢失参考帧、硬编解兼容性问题、推流端的图像尺寸格式。
8.播放闪屏:推流端原因、播放器缓冲机制原因。
9.播放杂音(回声):网络波动、回声消除、参数配置、混音越界。
10.拖动不准:直播过程中丢帧、关键帧间隔太大。
11.CPU/GPU占用率高:数据量大、格式转换、软编解格式。
12.在直播过程中,决定视频预加载效果的好坏主要由:视频的码率、缓冲文件大小和网速决定。
原因:网速快且码率低的情况下,不需要使用预加载。(码率中等且网速一般的情况适用)需要注意的是:缓冲文件不能设置过大,会影响正常播放。
12.为什么播放视频时,会停留在第一帧画面。
原因:(1)解码器出现错误,只接出了第一帧图像。(2)没有接收到视频帧。(3)时间戳的计算有误。
   以上内容简单总结了直播中经常出现的问题及原因,那么在文章的结尾,想给大家举个简单的例子,比如盖楼需要混凝土和砖;种树需要土壤和水;养鱼需要水和饲料,开发一个直播平台就需要在线直播源码。源码就是开发的基础,没有源码就无法完成。所以,选择优质的源码也是开发过程中十分重要的一步。
本文声明原创,转载请注明出处。
继续阅读 »
文章主要内容:在直播过程经常会遇到哪些问题?在线直播源码是怎样实现相应的直播技术的?这些问题的产生是由怎样的原因导致的?
以下这些问题,我相信都是直播中十分常见,并且具有一定参考性的问题。大家可以通过以下内容寻找对应的问题和原因,希望能给大家产生一定的帮助。
1.播放失败:服务器连接失败、域名解析失败、只有音频没有视频、只有视频没有音频。
2.直播出现卡顿:(1)主播端网络不好,导致推流上行不稳定。(2)服务端线路质量差,造成分发不稳定。(3)用户端网络质量差,从而拉流下行不稳定。
3.延时高:网络传输延时、协议延时、业务代码中的缓冲区。
4.音画不同步:(应从视频直播的生产端进行排查)采集设备内部出现问题、时间戳没有在采集时被获取、采集源距离太远、时间戳出现回退或紊乱现象、播放端的性能问题。
5.马赛克:图像尺寸原因、视频编码参数配置原因、关键帧丢失。
6.播放黑屏:主播端编码失效、视频编码失效、码流前半段只有音频没有视频。
7.播放花屏:播放器没有从关键帧开始解码、码流中的视频尺寸发生变化、丢失参考帧、硬编解兼容性问题、推流端的图像尺寸格式。
8.播放闪屏:推流端原因、播放器缓冲机制原因。
9.播放杂音(回声):网络波动、回声消除、参数配置、混音越界。
10.拖动不准:直播过程中丢帧、关键帧间隔太大。
11.CPU/GPU占用率高:数据量大、格式转换、软编解格式。
12.在直播过程中,决定视频预加载效果的好坏主要由:视频的码率、缓冲文件大小和网速决定。
原因:网速快且码率低的情况下,不需要使用预加载。(码率中等且网速一般的情况适用)需要注意的是:缓冲文件不能设置过大,会影响正常播放。
12.为什么播放视频时,会停留在第一帧画面。
原因:(1)解码器出现错误,只接出了第一帧图像。(2)没有接收到视频帧。(3)时间戳的计算有误。
   以上内容简单总结了直播中经常出现的问题及原因,那么在文章的结尾,想给大家举个简单的例子,比如盖楼需要混凝土和砖;种树需要土壤和水;养鱼需要水和饲料,开发一个直播平台就需要在线直播源码。源码就是开发的基础,没有源码就无法完成。所以,选择优质的源码也是开发过程中十分重要的一步。
本文声明原创,转载请注明出处。 收起阅读 »

React Native调用原生Android/iOS代码方案并实现拨号功能

一 前言

由于前几个月公司2.0项目开发技术选型为React Native,技术部相关人员开始学习React Native相关的技术,笔者是一名Android开发者,下文所描述的React Native调用Android/iOS模块中关于iOS的部分如有误的地方,请指出。为了让从Android或iOS学习React Native的同志更加清楚的了解另一移动端,笔者尽可能写的详细点。

二 效果

下面两张图分别为iOS和Android上效果图,其中iOS效果图中点击电话号码会打印log,并不会调起iOS拨号界面,因为iOS模拟器不支持此功能,所以要想看效果只能用真机查看。这里打印log是为了证明React Native成功调起了原生iOS模块功能。

640.gif

 

640_(1).gif

 
 
三 实现方案

关于调用拨号功能以及调用浏览器、短信、邮箱等功能,可有两种实现方案。

一种是按照React Native提供的调用原生的过程方案来调用,这种适合大部分React Native调用原生功能的需求,掌握这种后,基本以后再有调用原生需求即可按照此过程方案解决,此文也会选用这种方案进行描述。

另一种是React Native帮我们封装的Linking模块可以实现这类的需求,这种相比上一种来说相对简单,主要适用于调用原生的电话、短信、邮箱、浏览器等功能。

四 实现原生Android模块

1.在自己新建的Reacat Native项目中android/app/src/main/java/xxx(项目包名)/ 目录下(为了和其他文件分离,笔者又在此目录下新建一个native文件夹),需要新建一个java类文件,例如文件名为CallPhoneModule.java,这个java类一定要继承RN提供的ReactContextBaseJavaModule抽象类,然后实现其构造函数,其中的参数要为ReactApplicationContext reactContext。
 
public class CallPhoneModule extends ReactContextBaseJavaModule {
public CallPhoneModule(ReactApplicationContext reactContext) {
super(reactContext);
}
}

 
2.然后实现NativeModule中定义的getName()方法,返回一个String类型字符串,这个返回结果将要在JavaScript中使用,例如返回“CallPhoneModule”,则可以在JavaScript中通过React.NativeModules.CallPhoneModule调用。
 
注意,如果返回的字符串中有RCT前缀,则会自动移除RCT前缀。例如返回“RCTCallPhoneModule”,则在JavaScript中依然可以通过React.NativeModules.CallPhoneModule调用。CallPhoneModule继承ReactContextBaseJavaModule,ReactContextBaseJavaModule继承BaseJavaModule,BaseJavaModule实现了NativeModule接口,这是CallPhoneModule与NativeModule的关系。 
@Override
public String getName() {
return "CallPhoneModule";
}

 
3.然后在CallPhoneModule类中写一个方法,这个方法提供给JavaScript调用,例如方法名为callPhone,里面传递String类型参数(非必须),特别的这个方法要使用@ReactMethod注解,以及返回类型必须为void。然后在callPhone方法中写入要实现的功能,这里写入了拨号功能的实现。
 
Intent intent = new Intent(Intent.ACTION_DIAL,  Uri.parse("tel:" + phoneString));
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
this.reactContext.startActivity(intent);

CallPhoneModule.java文件的全部代码如下:
package com.zhuku02;

import android.content.Intent;
import android.net.Uri;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.lang.String;

public class CallPhoneModule extends ReactContextBaseJavaModule {

public ReactApplicationContext reactContext;

public CallPhoneModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}

@ReactMethod
public void callPhone(String phoneString) {
Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + phoneString));
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
this.reactContext.startActivity(intent);
}

@Override
public String getName() {
return "CallPhoneModule";
}
}

4.新建一个java类文件,例如文件名为CallPhoneReactPackage.java,这个类必须实现ReactPackage接口,然后实现createViewManagers、createNativeModules两个方法,特别的要在createNativeModules方法的返回值中add进刚才新建的CallPhoneModule类。

CallPhoneReactPackage.java全部代码如下:
package com.zhuku02;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.zhuku02.CallPhoneModule;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CallPhoneReactPackage implements ReactPackage {

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();

modules.add(new CallPhoneModule(reactContext));

return modules;
}
}

5.最后在MainApplication.java文件中的getPackages方法中加上刚才新建的CallPhoneReactPackage类。至此,原生Android模块书写完毕。关于JavaScript调用原生Android模块代码会在文末和调用原生iOS一起写出。

修改后的MainApplication.java文件代码如下:
package com.zhuku02;

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import com.zhuku02.CallPhoneReactPackage;

import java.util.Arrays;
import java.util.List;


public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CallPhoneReactPackage()
);
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

 
五 实现原生iOS模块

1.在自己新建的Reacat Native项目中ios/xxx(项目包名)/ 目录下,需要新建一个后缀为m和一个后缀为h的文件。为了和其他文件分离以及和Android保持一致,笔者又在此目录下新建一个native文件夹。
 
在Xcode的此文件夹上右键New File,然后在弹出的页面中Cocoa Touch Class选项输入文件名,这样会建立出相同文件名的m和h文件。如果New File时,分别选择Objective-C File和Header File,则这两个文件名要相同。例如文件名称为CallPhoneModuleIos。

2.在CallPhoneModuleIos.h文件中,类要实现RN提供的RCTBridgeModule协议。RCT是ReaCT的缩写,React Native中Object-C相关的命名均以RCT开头。
 
RCTBridgeModule是定义好的protocol,实现该协议的类,会自动注册到Object-C对应的Bridge中。Object-C Bridge上层负责与Object-C通信,下层负责和JavaScript Bridge通信,而JavaScript Bridge负责和JavaScript通信。这样,通过Object-C Bridge和JavaScript Bridge就可以实现JavaScript和Object-C的相互调用。

CallPhoneModuleIos.h文件如下:
#import <UIKit/UIKit.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>

@interface CallPhoneModuleIos : NSObject <RCTBridgeModule>

@end

3.CallPhoneModuleIos.m文件中,类需要包含RCT_EXPORT_MODULE()宏,作用是自动注册一个module。这个宏可以添加一个参数,用来指定在JavaScript调用这个模块的名字,类似于上文中说的getName()方法。如果不添加这个参数,则默认就是这个类的名字。

4.然后需要在此类中写一个方法,提供给RN调用,方法通过RCT_EXPORT_METHOD()宏来实现。
RCT_EXPORT_METHOD(callPhone: (NSString *)phone){
NSLog(@"======%@",phone);
}

CallPhoneModuleIos.m完整代码:
#import "CallPhoneModuleIos.h"
#import <Foundation/Foundation.h>

@implementation CallPhoneModuleIos

RCT_EXPORT_MODULE(CallPhoneModuleIos);

RCT_EXPORT_METHOD(callPhone: (NSString *)phone){

NSLog(@"======%@",phone);
//去掉注释,下面代码就是实现拨号功能代码,但还未真机测试
// NSMutableString * str = [[NSMutableString alloc] initWithFormat:@"telprompt://%@",phone];
// [[UIApplication sharedApplication] openURL:[NSURL URLWithString:str]];

}

// -(dispath_queue_t)methodQueue{
// return dispath_get_main_queue();
// }

@end

至此,则原生iOS代码书写完成,现在即将开始调用。

六 React Native调用Android、iOS原生模块

为了在JavaScript端同时访问Android、iOS原生模块更加方便,笔者把原生模块的调用封装在一个JavaScript文件中,例如文件名为CallPhone.js,这样在需要调用的地方直接调用此JavaScript文件既可,同时在此文件中,处理好Android、iOS、Web(若有)的分别调用。
import {Platform, NativeModules} from 'react-native';

var module = null;
if (Platform.OS == 'ios') {
module = NativeModules.CallPhoneModuleIos;
} else if (Platform.OS == 'android') {
module = NativeModules.CallPhoneModule;
} else if (Platform.OS == 'web') {
//暂未实现web功能
}
export default module;

然后在JavaScript文件中这样调用:
import CallPhone from '../../native/CallPhone';
CallPhone.callPhone('40077731xx');

到这里,整篇文章就结束了,疑问、建议或者指教欢迎讨论。

七 参考资料

native-modules-ios (https://facebook.github.io/rea ... s.html)
native-modules-android (https://facebook.github.io/rea ... d.html) 


qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术
继续阅读 »
一 前言

由于前几个月公司2.0项目开发技术选型为React Native,技术部相关人员开始学习React Native相关的技术,笔者是一名Android开发者,下文所描述的React Native调用Android/iOS模块中关于iOS的部分如有误的地方,请指出。为了让从Android或iOS学习React Native的同志更加清楚的了解另一移动端,笔者尽可能写的详细点。

二 效果

下面两张图分别为iOS和Android上效果图,其中iOS效果图中点击电话号码会打印log,并不会调起iOS拨号界面,因为iOS模拟器不支持此功能,所以要想看效果只能用真机查看。这里打印log是为了证明React Native成功调起了原生iOS模块功能。

640.gif

 

640_(1).gif

 
 
三 实现方案

关于调用拨号功能以及调用浏览器、短信、邮箱等功能,可有两种实现方案。

一种是按照React Native提供的调用原生的过程方案来调用,这种适合大部分React Native调用原生功能的需求,掌握这种后,基本以后再有调用原生需求即可按照此过程方案解决,此文也会选用这种方案进行描述。

另一种是React Native帮我们封装的Linking模块可以实现这类的需求,这种相比上一种来说相对简单,主要适用于调用原生的电话、短信、邮箱、浏览器等功能。

四 实现原生Android模块

1.在自己新建的Reacat Native项目中android/app/src/main/java/xxx(项目包名)/ 目录下(为了和其他文件分离,笔者又在此目录下新建一个native文件夹),需要新建一个java类文件,例如文件名为CallPhoneModule.java,这个java类一定要继承RN提供的ReactContextBaseJavaModule抽象类,然后实现其构造函数,其中的参数要为ReactApplicationContext reactContext。
 
public class CallPhoneModule extends ReactContextBaseJavaModule {
public CallPhoneModule(ReactApplicationContext reactContext) {
super(reactContext);
}
}

 
2.然后实现NativeModule中定义的getName()方法,返回一个String类型字符串,这个返回结果将要在JavaScript中使用,例如返回“CallPhoneModule”,则可以在JavaScript中通过React.NativeModules.CallPhoneModule调用。
 
注意,如果返回的字符串中有RCT前缀,则会自动移除RCT前缀。例如返回“RCTCallPhoneModule”,则在JavaScript中依然可以通过React.NativeModules.CallPhoneModule调用。CallPhoneModule继承ReactContextBaseJavaModule,ReactContextBaseJavaModule继承BaseJavaModule,BaseJavaModule实现了NativeModule接口,这是CallPhoneModule与NativeModule的关系。 
@Override
public String getName() {
return "CallPhoneModule";
}

 
3.然后在CallPhoneModule类中写一个方法,这个方法提供给JavaScript调用,例如方法名为callPhone,里面传递String类型参数(非必须),特别的这个方法要使用@ReactMethod注解,以及返回类型必须为void。然后在callPhone方法中写入要实现的功能,这里写入了拨号功能的实现。
 
Intent intent = new Intent(Intent.ACTION_DIAL,  Uri.parse("tel:" + phoneString));
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
this.reactContext.startActivity(intent);

CallPhoneModule.java文件的全部代码如下:
package com.zhuku02;

import android.content.Intent;
import android.net.Uri;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.lang.String;

public class CallPhoneModule extends ReactContextBaseJavaModule {

public ReactApplicationContext reactContext;

public CallPhoneModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}

@ReactMethod
public void callPhone(String phoneString) {
Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + phoneString));
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
this.reactContext.startActivity(intent);
}

@Override
public String getName() {
return "CallPhoneModule";
}
}

4.新建一个java类文件,例如文件名为CallPhoneReactPackage.java,这个类必须实现ReactPackage接口,然后实现createViewManagers、createNativeModules两个方法,特别的要在createNativeModules方法的返回值中add进刚才新建的CallPhoneModule类。

CallPhoneReactPackage.java全部代码如下:
package com.zhuku02;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.zhuku02.CallPhoneModule;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CallPhoneReactPackage implements ReactPackage {

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();

modules.add(new CallPhoneModule(reactContext));

return modules;
}
}

5.最后在MainApplication.java文件中的getPackages方法中加上刚才新建的CallPhoneReactPackage类。至此,原生Android模块书写完毕。关于JavaScript调用原生Android模块代码会在文末和调用原生iOS一起写出。

修改后的MainApplication.java文件代码如下:
package com.zhuku02;

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import com.zhuku02.CallPhoneReactPackage;

import java.util.Arrays;
import java.util.List;


public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CallPhoneReactPackage()
);
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

 
五 实现原生iOS模块

1.在自己新建的Reacat Native项目中ios/xxx(项目包名)/ 目录下,需要新建一个后缀为m和一个后缀为h的文件。为了和其他文件分离以及和Android保持一致,笔者又在此目录下新建一个native文件夹。
 
在Xcode的此文件夹上右键New File,然后在弹出的页面中Cocoa Touch Class选项输入文件名,这样会建立出相同文件名的m和h文件。如果New File时,分别选择Objective-C File和Header File,则这两个文件名要相同。例如文件名称为CallPhoneModuleIos。

2.在CallPhoneModuleIos.h文件中,类要实现RN提供的RCTBridgeModule协议。RCT是ReaCT的缩写,React Native中Object-C相关的命名均以RCT开头。
 
RCTBridgeModule是定义好的protocol,实现该协议的类,会自动注册到Object-C对应的Bridge中。Object-C Bridge上层负责与Object-C通信,下层负责和JavaScript Bridge通信,而JavaScript Bridge负责和JavaScript通信。这样,通过Object-C Bridge和JavaScript Bridge就可以实现JavaScript和Object-C的相互调用。

CallPhoneModuleIos.h文件如下:
#import <UIKit/UIKit.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>

@interface CallPhoneModuleIos : NSObject <RCTBridgeModule>

@end

3.CallPhoneModuleIos.m文件中,类需要包含RCT_EXPORT_MODULE()宏,作用是自动注册一个module。这个宏可以添加一个参数,用来指定在JavaScript调用这个模块的名字,类似于上文中说的getName()方法。如果不添加这个参数,则默认就是这个类的名字。

4.然后需要在此类中写一个方法,提供给RN调用,方法通过RCT_EXPORT_METHOD()宏来实现。
RCT_EXPORT_METHOD(callPhone: (NSString *)phone){
NSLog(@"======%@",phone);
}

CallPhoneModuleIos.m完整代码:
#import "CallPhoneModuleIos.h"
#import <Foundation/Foundation.h>

@implementation CallPhoneModuleIos

RCT_EXPORT_MODULE(CallPhoneModuleIos);

RCT_EXPORT_METHOD(callPhone: (NSString *)phone){

NSLog(@"======%@",phone);
//去掉注释,下面代码就是实现拨号功能代码,但还未真机测试
// NSMutableString * str = [[NSMutableString alloc] initWithFormat:@"telprompt://%@",phone];
// [[UIApplication sharedApplication] openURL:[NSURL URLWithString:str]];

}

// -(dispath_queue_t)methodQueue{
// return dispath_get_main_queue();
// }

@end

至此,则原生iOS代码书写完成,现在即将开始调用。

六 React Native调用Android、iOS原生模块

为了在JavaScript端同时访问Android、iOS原生模块更加方便,笔者把原生模块的调用封装在一个JavaScript文件中,例如文件名为CallPhone.js,这样在需要调用的地方直接调用此JavaScript文件既可,同时在此文件中,处理好Android、iOS、Web(若有)的分别调用。
import {Platform, NativeModules} from 'react-native';

var module = null;
if (Platform.OS == 'ios') {
module = NativeModules.CallPhoneModuleIos;
} else if (Platform.OS == 'android') {
module = NativeModules.CallPhoneModule;
} else if (Platform.OS == 'web') {
//暂未实现web功能
}
export default module;

然后在JavaScript文件中这样调用:
import CallPhone from '../../native/CallPhone';
CallPhone.callPhone('40077731xx');

到这里,整篇文章就结束了,疑问、建议或者指教欢迎讨论。

七 参考资料

native-modules-ios (https://facebook.github.io/rea ... s.html)
native-modules-android (https://facebook.github.io/rea ... d.html) 


qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术 收起阅读 »

EaseUI 3.5.3 DexArchiveMergerException

集成easeui3.5.3报错
集成easeui3.5.3报错

【活动推荐】2019安卓巴士千人开发者大会-NEW●无界

   本次将邀请到BAT等知名互联网公司的16位优秀演讲嘉宾坐镇,内容上除了主会场全天的Android技术干货分享,分会场还将覆盖到大数据、机器学习、跨平台开发以及小程序等方向内容。

三人行两人免单团购超便宜报名速戳https://www.hdb.com/dis/htn3yi6fpo
活动时间:2019年4月20号
活动地点:深圳南山区圣淘沙酒店
 
*入现场群说明:

购票成功后,请添加安卓巴士官方微信号 shzsbgbs ,备注【开发者大会】通过后提供购票成功截图,小编邀请您进入420开发者大会现场群。

备注【拼团】邀请您进入拼团群,和小伙伴一起享受超低团购价。

*付费说明:

本次活动经费用于场租、设备、物料、礼品、嘉宾交通住宿费等。

*退款说明:

由于本活动各项资源需提前采购,一经售出不接受退款,请确认后购买。 
 

41551673499360_article4_58412.jpg


41551673130966_article4_57367.jpg


微信图片_20190305183217.jpg

 
继续阅读 »
   本次将邀请到BAT等知名互联网公司的16位优秀演讲嘉宾坐镇,内容上除了主会场全天的Android技术干货分享,分会场还将覆盖到大数据、机器学习、跨平台开发以及小程序等方向内容。

三人行两人免单团购超便宜报名速戳https://www.hdb.com/dis/htn3yi6fpo
活动时间:2019年4月20号
活动地点:深圳南山区圣淘沙酒店
 
*入现场群说明:

购票成功后,请添加安卓巴士官方微信号 shzsbgbs ,备注【开发者大会】通过后提供购票成功截图,小编邀请您进入420开发者大会现场群。

备注【拼团】邀请您进入拼团群,和小伙伴一起享受超低团购价。

*付费说明:

本次活动经费用于场租、设备、物料、礼品、嘉宾交通住宿费等。

*退款说明:

由于本活动各项资源需提前采购,一经售出不接受退款,请确认后购买。 
 

41551673499360_article4_58412.jpg


41551673130966_article4_57367.jpg


微信图片_20190305183217.jpg

  收起阅读 »

WIFI 考勤打卡 浅析

一、背景

最近产品部提出了在WEB端设置wifi考勤打卡新需求,根据管理员设置的wifi相关信息(主要是WIFI名称和MAC地址),员工用户利用移动端相连接的wifi进行wifi考勤打卡。

二、名词术语解释

下面的理解全是建立在无线路由器的基础上。如有错误请指出。

1、SS

SS(Service set)即服务集,是无线局域网中的一个术语,用以描述802.11无线网络的构成单位(一组互相有联系的无线设备),使用服务集标识符(SSID)作为识别。

可以分为独立基本服务集(IBSS)、基本服务集(BSS)和扩展服务集(ESS)三类。其中IBSS属于对等拓扑模式(又称Ad-Hoc模式、无线随意网络),而BSS和ESS属于基础架构模式。这些拓扑是原始的802.11规范中定义的,其他的如网桥、中继器等则是属于特定厂商的扩展或者WDS的拓扑模式。

2、SSID

SSID(Service Set Identifier)即服务集标识符,是一个或一组基础架构模式无线网络的标识,依照标识方式又可细分为两种:
基本服务集标识符(BSSID),表示的是AP的数据链路层的MAC地址。
扩展服务集标识符(ESSID),一个最长32字节区分大小写的字符串,ESSID标识与SSID相同的网络。术语SSID最常用。
在此可以理解为无线路由器发射的某个wifi的名称。(SSID=name of network)

3、BSS

BSS(Basic Service Set)即基本服务集,是一组能在PHY层相互通信的所有站。每个BSS都有一个称为BSSID的标识(ID),它是服务于BSS的接入点的MAC地址。
用在无线路由器发射出的wifi上可以这样理解:某一个无线路由器发射出的wifi信号所覆盖的范围可视为BSS。

WechatIMG363.jpeg

 
4、BSSID

BSSID(Basic Service Set Identifier)即基本服务集标识符。

在上面的基础上可以这样理解:对某一个BSS基本服务集的唯一标识。例如,某无线路由器发射了一个名称为A的wifi热点,同一区域另一个无线路由器也发出了一个名称为A的wifi热点,当手机连接A热点时,如何辨别连接的是由哪一个路由器发射的wifi呢?

这时候就要用到BSSID了。一般情况下BSSID可以理解为无线路由器的MAC地址,通过查看手机连接wifi的MAC地址即可知道连接的是哪一个路由。(BSSID=AP MAC address)
其实准确来说手机得到的BSSID并不是路由器的基准(出厂)MAC地址。

例如,笔者公司的某款无线路由器B的出厂MAC地址为 XX:XX:XX:XX:XX:F1,当手机连接此wifi查看mac地址时发现是XX:XX:XX:XX:XX:F2,或者是XX:XX:XX:XX:XX:F3。

5、ESS ESSID

ESS(Extended Service Set )即扩展的基本服务集。
ESSID(Extended Service Set Identifier)即扩展的基本服务集标识符。
BSS+BSS+BSS+BSS+…=ESS。ESS为多个BSS的集合。ESS使用指定的ESSID作识别。

通过将多个BSS比邻安置,可以扩展网络的范围,如果这些BSS通过各种分布系统互联(无论是有线的还是无线的),拥有一致的ESSID,并且对于逻辑链路控制层来说可以认为是一个BSS的话,那么这些BSS可以被统一为一个ESS。

在同一个ESS中的不同BSS之间切换的过程称为漫游。一般而言,一个ESS中的BSS都会使用相同的SSID和安全机制以提供接近于无缝漫游的可能。两个BSS之间通常有15%左右的重叠范围来保证漫游时信号不会长时间丢失,并且设置在不同频段来防止相互干扰。

WechatIMG362.jpeg

 
6、MAC

MAC地址采用十六进制数表示,共六个字节(48位)。(XX:XX:XX:XX:XX:XX )其中,前三个字节是由IEEE的注册管理机构RA负责给不同厂家分配的代码(高位24位),也称为“编制上唯一的标识符”(Organizationally Unique Identifier),后三个字节(低位24位)由各厂家自行指派给生产的适配器接口,称为扩展标识符(唯一性)。

三、历程

当产品部提出wifi考勤打卡需求时,普遍认为一个路由器有一个mac地址,手机连接wifi可以根据mac地址等信息进行打卡。当我们用多个手机连接公司名称为A(SSID)的wifi时,发现手机上展示的mac地址并不是一致的,这个就尴尬了,打翻了原有理念。
然后发现我们公司共有五个无线路由器,wifi名称都是A。哦,这时候才感觉到原来以前的知识还是靠谱的,可能是多个手机具体连接的路由器不是同一个。

然后把五个路由器wifi热点名称改为A、B、C、D、E,多个手机连接A热点时,发现手机得到的mac地址是一致的,到这里可以得出的结论是手机连接同一个wifi热点得到的mac地址是一致的。但是…..又尴尬了。

当多款手机连接B热点时,发现又出现了不一致的mac地址,查找原因发现,原来B无线路由器中可以设置2.4G Hz和5G Hz两个不同频段的wifi热点。B路由器中默认是开启2.4G Hz和5G Hz频段的wifi热点,并且wifi名称(SSID)是同一个。经过检查还有个问题是B路由器的出厂mac地址和手机连接得到的mac地址不一致。

例如上面举得例子:笔者公司的某款无线路由器B的出厂MAC地址为 XX:XX:XX:XX:XX:F1,当手机连接此wifi查看mac地址时发现是XX:XX:XX:XX:XX:F2,另一款手机连接时是XX:XX:XX:XX:XX:F3。由此可得出的结论是,路由器有一个基准(出厂)mac地址,然后发射出wifi的mac在基准mac地址上按照一定的算法进行变动,具体的变动算法不清楚,有清楚的请告知我,非常感谢。

另外还有一个问题是,C路由器设备后面所写的出厂说明mac地址是XX:XX:XX:XX:XX:56,但是通过路由器后台看到的出厂mac地址是XX:XX:XX:XX:XX:57,手机连接后得到的mac地址是XX:XX:XX:XX:XX:56。这就尴尬了,是厂家写错了还是根据特定的算法算的?

除了根据wifi设备分析外,我们也对具有wifi考勤打卡功能的软件进行了分析。比如现在比较火爆的由阿里团队研发的钉钉,以及纷享销客APP,在Android端,他们的处理都是获取周围wifi信息(并不是当前手机连接的wifi)进行打卡。在iOS端,他们的处理都是根据当前手机连接的wifi信息进行打卡。据iOS同事说,iOS获取周围wifi信息需要申请此功能,并最低支持版本是iOS 9。另外据可靠消息,分享逍客对mac地址的处理也是通过忽略低4位进行匹配。

四、结论

经过上述分析,手机获取的无线路由器MAC地址的低4位是变化的。那我们实现这个需求时,除了匹配虚拟位置、手机信息、wifi相关等其他信息外,只针对mac地址,我们可以忽略mac地址的低4位来做匹配。

五、参考资料

http://www.juniper.net/documentation/en_US/junos-space-apps12.3/network-director/topics/concept/wireless-ssid-bssid-essid.html 


qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术
继续阅读 »
一、背景

最近产品部提出了在WEB端设置wifi考勤打卡新需求,根据管理员设置的wifi相关信息(主要是WIFI名称和MAC地址),员工用户利用移动端相连接的wifi进行wifi考勤打卡。

二、名词术语解释

下面的理解全是建立在无线路由器的基础上。如有错误请指出。

1、SS

SS(Service set)即服务集,是无线局域网中的一个术语,用以描述802.11无线网络的构成单位(一组互相有联系的无线设备),使用服务集标识符(SSID)作为识别。

可以分为独立基本服务集(IBSS)、基本服务集(BSS)和扩展服务集(ESS)三类。其中IBSS属于对等拓扑模式(又称Ad-Hoc模式、无线随意网络),而BSS和ESS属于基础架构模式。这些拓扑是原始的802.11规范中定义的,其他的如网桥、中继器等则是属于特定厂商的扩展或者WDS的拓扑模式。

2、SSID

SSID(Service Set Identifier)即服务集标识符,是一个或一组基础架构模式无线网络的标识,依照标识方式又可细分为两种:
基本服务集标识符(BSSID),表示的是AP的数据链路层的MAC地址。
扩展服务集标识符(ESSID),一个最长32字节区分大小写的字符串,ESSID标识与SSID相同的网络。术语SSID最常用。
在此可以理解为无线路由器发射的某个wifi的名称。(SSID=name of network)

3、BSS

BSS(Basic Service Set)即基本服务集,是一组能在PHY层相互通信的所有站。每个BSS都有一个称为BSSID的标识(ID),它是服务于BSS的接入点的MAC地址。
用在无线路由器发射出的wifi上可以这样理解:某一个无线路由器发射出的wifi信号所覆盖的范围可视为BSS。

WechatIMG363.jpeg

 
4、BSSID

BSSID(Basic Service Set Identifier)即基本服务集标识符。

在上面的基础上可以这样理解:对某一个BSS基本服务集的唯一标识。例如,某无线路由器发射了一个名称为A的wifi热点,同一区域另一个无线路由器也发出了一个名称为A的wifi热点,当手机连接A热点时,如何辨别连接的是由哪一个路由器发射的wifi呢?

这时候就要用到BSSID了。一般情况下BSSID可以理解为无线路由器的MAC地址,通过查看手机连接wifi的MAC地址即可知道连接的是哪一个路由。(BSSID=AP MAC address)
其实准确来说手机得到的BSSID并不是路由器的基准(出厂)MAC地址。

例如,笔者公司的某款无线路由器B的出厂MAC地址为 XX:XX:XX:XX:XX:F1,当手机连接此wifi查看mac地址时发现是XX:XX:XX:XX:XX:F2,或者是XX:XX:XX:XX:XX:F3。

5、ESS ESSID

ESS(Extended Service Set )即扩展的基本服务集。
ESSID(Extended Service Set Identifier)即扩展的基本服务集标识符。
BSS+BSS+BSS+BSS+…=ESS。ESS为多个BSS的集合。ESS使用指定的ESSID作识别。

通过将多个BSS比邻安置,可以扩展网络的范围,如果这些BSS通过各种分布系统互联(无论是有线的还是无线的),拥有一致的ESSID,并且对于逻辑链路控制层来说可以认为是一个BSS的话,那么这些BSS可以被统一为一个ESS。

在同一个ESS中的不同BSS之间切换的过程称为漫游。一般而言,一个ESS中的BSS都会使用相同的SSID和安全机制以提供接近于无缝漫游的可能。两个BSS之间通常有15%左右的重叠范围来保证漫游时信号不会长时间丢失,并且设置在不同频段来防止相互干扰。

WechatIMG362.jpeg

 
6、MAC

MAC地址采用十六进制数表示,共六个字节(48位)。(XX:XX:XX:XX:XX:XX )其中,前三个字节是由IEEE的注册管理机构RA负责给不同厂家分配的代码(高位24位),也称为“编制上唯一的标识符”(Organizationally Unique Identifier),后三个字节(低位24位)由各厂家自行指派给生产的适配器接口,称为扩展标识符(唯一性)。

三、历程

当产品部提出wifi考勤打卡需求时,普遍认为一个路由器有一个mac地址,手机连接wifi可以根据mac地址等信息进行打卡。当我们用多个手机连接公司名称为A(SSID)的wifi时,发现手机上展示的mac地址并不是一致的,这个就尴尬了,打翻了原有理念。
然后发现我们公司共有五个无线路由器,wifi名称都是A。哦,这时候才感觉到原来以前的知识还是靠谱的,可能是多个手机具体连接的路由器不是同一个。

然后把五个路由器wifi热点名称改为A、B、C、D、E,多个手机连接A热点时,发现手机得到的mac地址是一致的,到这里可以得出的结论是手机连接同一个wifi热点得到的mac地址是一致的。但是…..又尴尬了。

当多款手机连接B热点时,发现又出现了不一致的mac地址,查找原因发现,原来B无线路由器中可以设置2.4G Hz和5G Hz两个不同频段的wifi热点。B路由器中默认是开启2.4G Hz和5G Hz频段的wifi热点,并且wifi名称(SSID)是同一个。经过检查还有个问题是B路由器的出厂mac地址和手机连接得到的mac地址不一致。

例如上面举得例子:笔者公司的某款无线路由器B的出厂MAC地址为 XX:XX:XX:XX:XX:F1,当手机连接此wifi查看mac地址时发现是XX:XX:XX:XX:XX:F2,另一款手机连接时是XX:XX:XX:XX:XX:F3。由此可得出的结论是,路由器有一个基准(出厂)mac地址,然后发射出wifi的mac在基准mac地址上按照一定的算法进行变动,具体的变动算法不清楚,有清楚的请告知我,非常感谢。

另外还有一个问题是,C路由器设备后面所写的出厂说明mac地址是XX:XX:XX:XX:XX:56,但是通过路由器后台看到的出厂mac地址是XX:XX:XX:XX:XX:57,手机连接后得到的mac地址是XX:XX:XX:XX:XX:56。这就尴尬了,是厂家写错了还是根据特定的算法算的?

除了根据wifi设备分析外,我们也对具有wifi考勤打卡功能的软件进行了分析。比如现在比较火爆的由阿里团队研发的钉钉,以及纷享销客APP,在Android端,他们的处理都是获取周围wifi信息(并不是当前手机连接的wifi)进行打卡。在iOS端,他们的处理都是根据当前手机连接的wifi信息进行打卡。据iOS同事说,iOS获取周围wifi信息需要申请此功能,并最低支持版本是iOS 9。另外据可靠消息,分享逍客对mac地址的处理也是通过忽略低4位进行匹配。

四、结论

经过上述分析,手机获取的无线路由器MAC地址的低4位是变化的。那我们实现这个需求时,除了匹配虚拟位置、手机信息、wifi相关等其他信息外,只针对mac地址,我们可以忽略mac地址的低4位来做匹配。

五、参考资料

http://www.juniper.net/documentation/en_US/junos-space-apps12.3/network-director/topics/concept/wireless-ssid-bssid-essid.html 


qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术 收起阅读 »

2019年3月3日凌晨阿里云宕机引发事故公告

环信的小伙伴,您好,

        首先,环信对2019年3月3日凌晨的事故为您造成的影响深表歉意,故障公告如下:

事故概述:

       3月2日晚23:55,阿里云华北2地域ECS出现了大面积宕机,导致使用这些服务的环信即时通讯云北京集群和VIP6集群服务不可用。
 

微信图片_20190304154115.jpg

(阿里云事故公告)



环信客服云的用户,如果添加了受影响的IM集群上的APP Key作为APP渠道接入的关联并且使用环信IM SDK,也会出现收发消息失败的现象。

使用系统默认的APP渠道接入关联,支持第二通道的客户互动云访客端SDK和网页端的环信客户互动云用户均不受影响。

处理过程:
  • 环信运维团队监控到异常后,第一时间联系了阿里云,在阿里云ECS服务全面恢复之前,利用少量可用的实例提前进行了服务恢复
  • 3月3日凌晨3:10,环信即时通讯云的北京集群和VIP6集群服务全部恢复


后续改进:
  • 我们会同阿里云一起排查事故原因,防止此类事故再次发生,对您造成的影响深表歉意,感谢您对环信的支持。

继续阅读 »
环信的小伙伴,您好,

        首先,环信对2019年3月3日凌晨的事故为您造成的影响深表歉意,故障公告如下:

事故概述:

       3月2日晚23:55,阿里云华北2地域ECS出现了大面积宕机,导致使用这些服务的环信即时通讯云北京集群和VIP6集群服务不可用。
 

微信图片_20190304154115.jpg

(阿里云事故公告)



环信客服云的用户,如果添加了受影响的IM集群上的APP Key作为APP渠道接入的关联并且使用环信IM SDK,也会出现收发消息失败的现象。

使用系统默认的APP渠道接入关联,支持第二通道的客户互动云访客端SDK和网页端的环信客户互动云用户均不受影响。

处理过程:
  • 环信运维团队监控到异常后,第一时间联系了阿里云,在阿里云ECS服务全面恢复之前,利用少量可用的实例提前进行了服务恢复
  • 3月3日凌晨3:10,环信即时通讯云的北京集群和VIP6集群服务全部恢复


后续改进:
  • 我们会同阿里云一起排查事故原因,防止此类事故再次发生,对您造成的影响深表歉意,感谢您对环信的支持。

收起阅读 »

.net快速开发平台,learun敏捷开发框架




前言:

快速开发的趋势

 在十年前,没有人会想到互联网会发展成今天这个样子,同样,也没有人料到软件开发行业也会经历如此大的巨变,在开发这一行业,停下学习就等于死亡并不是危言耸听,不关注行业未来发展趋势的人可能错过了第一个十年,如果不学习,恐怕第二个也要错过了。

快速开发目前风头正盛,但是十分完善的快速开发平台目前并不多,用过的可能都知道,虽然宣称可以覆盖各种功能,但实际使用起来bug也少不到哪里去,之所以越来越受到人们的关注,是因为它能提供便捷化、个性化的软件开发服务。
所谓快速开发其实是针对标准开发而言,通俗的讲,快速开发平台其实是一套软件半成品加一套功能3D打印机,相当于一座建好的毛坯房,主体框架已经建好,样板已经做好,各类装修材料也已经准备齐全,业务功能可以通过3D打印机生成,用户可以在这个框架以不写代码或少些代码的方式进行业务系统的开发工作。

快速开发平台在中国的发展历程不算长,但是却很迅速,而在西方国家,这一开发模式已经在各种企业中广泛应用,占据了近一半的市场份额。这一模式的好处是软件可变性强,业务延展性好,对供需双方来说付出的成本都要小很多。

而我国,在近些年,经济才开始突飞猛进,由于特殊的社会与经济环境,这种半定制的软件平台还是一种新生事物,没有被大多数人充分理解。但是实际上,每一个企业由于自身所处的行业不同,历史背景及业务状况不同,对软件系统会有不同的特殊要求,尤其是现在的一些互联网企业往往提供的都是一些个性化的服务,其对软件的实际需求可能五花八门,显然市场上的通用软件不可能全部兼顾的到,这就会对公司的实际运作造成影响,同时,对通用标准软件的口碑也造成一定的影响。

快速开发平台的出现就是为了解决软件在企业中水土不服的情况,虽然目前国内已经有多家公司在此领域进行布局,但时至今日,依然没有一家领军企业的出现,这涉及到多方面原因,开发公司自身来说,规模与技术实力有限;社会因素来说是企业自身管理需求。比如,早些年的劳动密集型产业,软件个性化需求不够迫切,类excel服务器平台基本上就解决了问题,不需要太高的灵活性。但是随着

中国劳动力成本优势的丧失、国民素质的提升、个性化互联网公司的井喷,快速开发平台将在中国迎来一个高速发展期。
Learun快速开发平台简介

Learun快速开发平台是一套基于智能化可扩展组件式的软件系统项目,使用了当前主流的应用开发技术,框架内置工作流、向导式智能开发组件、即时通讯组件、APP开发组件、微信组件、通用权限等一系列组件,以及可扩展的系统机制,开发人员通过一系列简单配置就可以快速构建高质量的信息系统。

UI:至美至简,多风格可选
经典版
炫动版
飞扬版
风尚版

 

站在技术前沿,learun能解决什么

 一、提高开发效率

整体框架都已经搭建好了,开发者只需要实现业务功能。并且框架内已经集成了大量业务模板,大量的公共组件,开发人员只需要根据开发向导进行设置就可快速完成开发工作。比起传统的开发至少要节约90%的工作量,能够大大地提升开发效率。

二、提升软件质量

规范的编码,专业的架构,稳定高效的底层。这是软件质量的先天优势。基于learun敏捷开发框架做开发,可以使软件质量大幅提升。

三、降低成本

本身在提高效率的同时就是在降低成本。现在软件工程师的工资一般都比较高,特别是架构师级别的动不动就数十万年薪,使得软件开发的成本变得非常之高。在使用learun敏捷开发框架的条件下,初级程序员甚至只要思路清晰的人就可以进行功能开发。开发周期变短,对开发人员的要求变低,也使得开发成本大幅下降。

四、提高客户满意度

Learun为开发人员提供了美观简洁的UI,美观大方、操作便捷,用户体验友好度高。

五、稳定高效的技术支持团队

维护期内learun开发团队原班人马为会提供优质贴心的技术支持,不管是架构还是编码都能全方位的贴心服务,不用担心开发过程中遇到的阻力,免去了因员工流失而给软件项目带来的各种损失。

六、提供框架源代码,提供完整的授权

框架提供全部源代码,毫不保留。二次开发出售无需授权,毫无后顾之忧。

 

Learun能开发什么

一、业务管理软件

ERP、MIS、CRM、WMS、MES、TMS、物流快递管理等这类企业管理系统已经被几家大的软件公司产品化,但是每个行业都有不同的业务需求,每家企业都会有自己不同的业务需求。

标准品无法做到面面俱到的所以我们很难采购到自己想要的产品。独立从头到尾开发一套系统需要大量的人力物力,到头来成本可能比采购软件成品还高,力软敏捷开发框架已经为开发都搭好框架预置了各类基础模块可以直接使用,另外系统根据各类系统的特点建立了多套开发模板,开发者可以按照开发向导快速开发出各种业务系统。

二、协同办公软件

Learun敏捷开发框架已经内置了工作流引擎、自定义表单引擎、即时通讯模块再配合框架完善的权限管理模块,可以轻松地定制协同办公软件,OA、HRM、KM等系统的开发将变得非常简单甚至不需要编写一行代码。

三、电商平台后台

Learun敏捷开发框架强大的后台管理功能及微信模块、短信平台模块开发电商平台后台也非常方便。

四、商业智能(BI)软件

Learun框架集成了大量图表插件,并且提供了智能图表功能,开发者只需要按照向导操作就能生成图形报表。所以此框架也非常适合开发BI软件。




learun功能分布详情

Learun以“让开发变得简单”为宗旨,部署有完善的基础功能

一、系统管理


二、单位组织





三、表单中心




四、工作流程




五、报表中心







 

六、公共信息




七、常用示例




字典分类表




可视化开发


内置代码生成器,只需点击下一步,所有部署自动完成



插件及拓展

框架搭配众多的插件及拓展功能,均支持当前主流浏览器,基本可以满足任何需求



 版本更迭

learun快速开发平台是一款不断成长的敏捷开发框架,经过不断的版本更迭,目前已经更新至7.0版本,需要体验或升级的客户,请至官网www.learun.cn操作。

目前网络上存在的一些盗版软件,均非力软官方发布,不能享受力软持续的技术指导,使用有风险,请谨慎辨别,支持正版。






力软敏捷开发框架7.0 版本发布

2018年08月01日



1.多语言功能;

2.代码生成器模版;

a.可编辑列表代码生成器(Excel风格)模版;

b.报表现实代码生成器模版;

3.树形代码生成功能;

4.动态配置首页功能;

5.外部邮件收发功能;

6.办公类型文件在线预览功能;

7.表单页面的弹出框;

a.左边树;

b.中间选择;

c.右边显示已选择;



1.表格控件子表格展开显示异常问题;

2.日期控件偶尔出现格式错乱问题;

3.分页控件页面再次加载页数错误问题;



1.代码生成器优化成拖拽式设计;

2.支持数据库多架构设计;

3.表格组件支持;

a.下拉框;

b.单选框;

c.复选框;

d.弹窗等功能;

4.工作流支持动态选择下一审批人;

5.IM组件重构;

6.文件上传效率;

7.工作流审核方式;

8.重新美化四套皮肤;




力软敏捷开发框架6.1.6.2 版本发布

2018年04月03日



1.手机流程

a.我的流程- 可查看流程进度和表单内容;

b.待办任务- 可查看流程进度和表单内容,审核;

c.已办任务- 可查看流程进度和表单内容;

d.自定义表单流程发起审核;

2.自定义表单可以发布到手机端;

3.数据权限-增加上下级数据权限管理;

4.新增在线建表功能;

5.一套APP开发实例;



1.pc端流程-修复传阅节点bug;

2.数据库事务中查询异常bug;

3.文件上传控件兼容性bug;

4.Oracle数据库流程流转中bug;

5.Oracle数据库自定义表单显示中的bug;



1.手机端用户密码修改功能;

2.pc端优化了经典版皮肤;

3.pc端流程;

a.增加流程时间轴;

b.下一节点若多人可审核,审核时可具体指定某一人;

4.手机端支持从vs2017进行开发、打包;

5.数据库连接性能优化;

6.前端基础数据加载优化;



相信,随着敏捷思想的不断深入,力软敏捷开发框架会得到越来越多人的认同,毕竟,价值才是第一驱动力。

一路走来数个年头,感谢力软敏捷开发框架框的支持者与使用者,大家可以通过下面的地址了解详情。

力软敏捷开发框架官方网站:www.learun.cn

力软敏捷开发框架官方免费体验网站:http://www.learun.cn/Home/VerificationForm

力软敏捷开发框架由专业团队长期打造、一直在更新、一直在升级,请放心使用!
继续阅读 »



前言:

快速开发的趋势

 在十年前,没有人会想到互联网会发展成今天这个样子,同样,也没有人料到软件开发行业也会经历如此大的巨变,在开发这一行业,停下学习就等于死亡并不是危言耸听,不关注行业未来发展趋势的人可能错过了第一个十年,如果不学习,恐怕第二个也要错过了。

快速开发目前风头正盛,但是十分完善的快速开发平台目前并不多,用过的可能都知道,虽然宣称可以覆盖各种功能,但实际使用起来bug也少不到哪里去,之所以越来越受到人们的关注,是因为它能提供便捷化、个性化的软件开发服务。
所谓快速开发其实是针对标准开发而言,通俗的讲,快速开发平台其实是一套软件半成品加一套功能3D打印机,相当于一座建好的毛坯房,主体框架已经建好,样板已经做好,各类装修材料也已经准备齐全,业务功能可以通过3D打印机生成,用户可以在这个框架以不写代码或少些代码的方式进行业务系统的开发工作。

快速开发平台在中国的发展历程不算长,但是却很迅速,而在西方国家,这一开发模式已经在各种企业中广泛应用,占据了近一半的市场份额。这一模式的好处是软件可变性强,业务延展性好,对供需双方来说付出的成本都要小很多。

而我国,在近些年,经济才开始突飞猛进,由于特殊的社会与经济环境,这种半定制的软件平台还是一种新生事物,没有被大多数人充分理解。但是实际上,每一个企业由于自身所处的行业不同,历史背景及业务状况不同,对软件系统会有不同的特殊要求,尤其是现在的一些互联网企业往往提供的都是一些个性化的服务,其对软件的实际需求可能五花八门,显然市场上的通用软件不可能全部兼顾的到,这就会对公司的实际运作造成影响,同时,对通用标准软件的口碑也造成一定的影响。

快速开发平台的出现就是为了解决软件在企业中水土不服的情况,虽然目前国内已经有多家公司在此领域进行布局,但时至今日,依然没有一家领军企业的出现,这涉及到多方面原因,开发公司自身来说,规模与技术实力有限;社会因素来说是企业自身管理需求。比如,早些年的劳动密集型产业,软件个性化需求不够迫切,类excel服务器平台基本上就解决了问题,不需要太高的灵活性。但是随着

中国劳动力成本优势的丧失、国民素质的提升、个性化互联网公司的井喷,快速开发平台将在中国迎来一个高速发展期。
Learun快速开发平台简介

Learun快速开发平台是一套基于智能化可扩展组件式的软件系统项目,使用了当前主流的应用开发技术,框架内置工作流、向导式智能开发组件、即时通讯组件、APP开发组件、微信组件、通用权限等一系列组件,以及可扩展的系统机制,开发人员通过一系列简单配置就可以快速构建高质量的信息系统。

UI:至美至简,多风格可选
经典版
炫动版
飞扬版
风尚版

 

站在技术前沿,learun能解决什么

 一、提高开发效率

整体框架都已经搭建好了,开发者只需要实现业务功能。并且框架内已经集成了大量业务模板,大量的公共组件,开发人员只需要根据开发向导进行设置就可快速完成开发工作。比起传统的开发至少要节约90%的工作量,能够大大地提升开发效率。

二、提升软件质量

规范的编码,专业的架构,稳定高效的底层。这是软件质量的先天优势。基于learun敏捷开发框架做开发,可以使软件质量大幅提升。

三、降低成本

本身在提高效率的同时就是在降低成本。现在软件工程师的工资一般都比较高,特别是架构师级别的动不动就数十万年薪,使得软件开发的成本变得非常之高。在使用learun敏捷开发框架的条件下,初级程序员甚至只要思路清晰的人就可以进行功能开发。开发周期变短,对开发人员的要求变低,也使得开发成本大幅下降。

四、提高客户满意度

Learun为开发人员提供了美观简洁的UI,美观大方、操作便捷,用户体验友好度高。

五、稳定高效的技术支持团队

维护期内learun开发团队原班人马为会提供优质贴心的技术支持,不管是架构还是编码都能全方位的贴心服务,不用担心开发过程中遇到的阻力,免去了因员工流失而给软件项目带来的各种损失。

六、提供框架源代码,提供完整的授权

框架提供全部源代码,毫不保留。二次开发出售无需授权,毫无后顾之忧。

 

Learun能开发什么

一、业务管理软件

ERP、MIS、CRM、WMS、MES、TMS、物流快递管理等这类企业管理系统已经被几家大的软件公司产品化,但是每个行业都有不同的业务需求,每家企业都会有自己不同的业务需求。

标准品无法做到面面俱到的所以我们很难采购到自己想要的产品。独立从头到尾开发一套系统需要大量的人力物力,到头来成本可能比采购软件成品还高,力软敏捷开发框架已经为开发都搭好框架预置了各类基础模块可以直接使用,另外系统根据各类系统的特点建立了多套开发模板,开发者可以按照开发向导快速开发出各种业务系统。

二、协同办公软件

Learun敏捷开发框架已经内置了工作流引擎、自定义表单引擎、即时通讯模块再配合框架完善的权限管理模块,可以轻松地定制协同办公软件,OA、HRM、KM等系统的开发将变得非常简单甚至不需要编写一行代码。

三、电商平台后台

Learun敏捷开发框架强大的后台管理功能及微信模块、短信平台模块开发电商平台后台也非常方便。

四、商业智能(BI)软件

Learun框架集成了大量图表插件,并且提供了智能图表功能,开发者只需要按照向导操作就能生成图形报表。所以此框架也非常适合开发BI软件。




learun功能分布详情

Learun以“让开发变得简单”为宗旨,部署有完善的基础功能

一、系统管理


二、单位组织





三、表单中心




四、工作流程




五、报表中心







 

六、公共信息




七、常用示例




字典分类表




可视化开发


内置代码生成器,只需点击下一步,所有部署自动完成



插件及拓展

框架搭配众多的插件及拓展功能,均支持当前主流浏览器,基本可以满足任何需求



 版本更迭

learun快速开发平台是一款不断成长的敏捷开发框架,经过不断的版本更迭,目前已经更新至7.0版本,需要体验或升级的客户,请至官网www.learun.cn操作。

目前网络上存在的一些盗版软件,均非力软官方发布,不能享受力软持续的技术指导,使用有风险,请谨慎辨别,支持正版。






力软敏捷开发框架7.0 版本发布

2018年08月01日



1.多语言功能;

2.代码生成器模版;

a.可编辑列表代码生成器(Excel风格)模版;

b.报表现实代码生成器模版;

3.树形代码生成功能;

4.动态配置首页功能;

5.外部邮件收发功能;

6.办公类型文件在线预览功能;

7.表单页面的弹出框;

a.左边树;

b.中间选择;

c.右边显示已选择;



1.表格控件子表格展开显示异常问题;

2.日期控件偶尔出现格式错乱问题;

3.分页控件页面再次加载页数错误问题;



1.代码生成器优化成拖拽式设计;

2.支持数据库多架构设计;

3.表格组件支持;

a.下拉框;

b.单选框;

c.复选框;

d.弹窗等功能;

4.工作流支持动态选择下一审批人;

5.IM组件重构;

6.文件上传效率;

7.工作流审核方式;

8.重新美化四套皮肤;




力软敏捷开发框架6.1.6.2 版本发布

2018年04月03日



1.手机流程

a.我的流程- 可查看流程进度和表单内容;

b.待办任务- 可查看流程进度和表单内容,审核;

c.已办任务- 可查看流程进度和表单内容;

d.自定义表单流程发起审核;

2.自定义表单可以发布到手机端;

3.数据权限-增加上下级数据权限管理;

4.新增在线建表功能;

5.一套APP开发实例;



1.pc端流程-修复传阅节点bug;

2.数据库事务中查询异常bug;

3.文件上传控件兼容性bug;

4.Oracle数据库流程流转中bug;

5.Oracle数据库自定义表单显示中的bug;



1.手机端用户密码修改功能;

2.pc端优化了经典版皮肤;

3.pc端流程;

a.增加流程时间轴;

b.下一节点若多人可审核,审核时可具体指定某一人;

4.手机端支持从vs2017进行开发、打包;

5.数据库连接性能优化;

6.前端基础数据加载优化;



相信,随着敏捷思想的不断深入,力软敏捷开发框架会得到越来越多人的认同,毕竟,价值才是第一驱动力。

一路走来数个年头,感谢力软敏捷开发框架框的支持者与使用者,大家可以通过下面的地址了解详情。

力软敏捷开发框架官方网站:www.learun.cn

力软敏捷开发框架官方免费体验网站:http://www.learun.cn/Home/VerificationForm

力软敏捷开发框架由专业团队长期打造、一直在更新、一直在升级,请放心使用! 收起阅读 »

老司机带你一文读懂Android运行时权限

 
老司机发车了,未到终点请勿下车. 嘟嘟嘟~~~
 运行时权限从Android 6.0版本开始的,如果你的项目中 targetSdkVersion/compileSdkVersion 大于等于23,那么你就必须要考虑动态权限了。

权限又分为普通权限和危险权限。
普通权限如下:
android.permission.ACCESS LOCATIONEXTRA_COMMANDS 
android.permission.ACCESS NETWORKSTATE
android.permission.ACCESS NOTIFICATIONPOLICY
android.permission.ACCESS WIFISTATE
android.permission.ACCESS WIMAXSTATE
android.permission.BLUETOOTH
android.permission.BLUETOOTH_ADMIN
android.permission.BROADCAST_STICKY
android.permission.CHANGE NETWORKSTATE
android.permission.CHANGE WIFIMULTICAST_STATE
android.permission.CHANGE WIFISTATE
android.permission.CHANGE WIMAXSTATE
android.permission.DISABLE_KEYGUARD
android.permission.EXPAND STATUSBAR
android.permission.FLASHLIGHT
android.permission.GET_ACCOUNTS
android.permission.GET PACKAGESIZE
android.permission.INTERNET
android.permission.KILL BACKGROUNDPROCESSES
android.permission.MODIFY AUDIOSETTINGS
android.permission.NFC
android.permission.READ SYNCSETTINGS
android.permission.READ SYNCSTATS
android.permission.RECEIVE BOOTCOMPLETED
android.permission.REORDER_TASKS
android.permission.REQUEST INSTALLPACKAGES
android.permission.SET TIMEZONE
android.permission.SET_WALLPAPER
android.permission.SET WALLPAPERHINTS
android.permission.SUBSCRIBED FEEDSREAD
android.permission.TRANSMIT_IR
android.permission.USE_FINGERPRINT
android.permission.VIBRATE
android.permission.WAKE_LOCK
android.permission.WRITE SYNCSETTINGS
com.android.alarm.permission.SET_ALARM
com.android.launcher.permission.INSTALL_SHORTCUT
com.android.launcher.permission.UNINSTALL_SHORTCUT

普通权限是当需要用到时,只需要在清单文件中声明就可。危险权限除了需要在清单文件中声明外,还需在代码中动态进行判断申请。

危险权限如下:
android.permission-group.CALENDAR   
android.permission.READ_CALENDAR
android.permission.WRITE_CALENDAR

android.permission-group.CAMERA
android.permission.CAMERA

android.permission-group.CONTACTS
android.permission.READ_CONTACTS
android.permission.WRITE_CONTACTS
android.permission.GET_ACCOUNTS

android.permission-group.LOCATION
android.permission.ACCESS_FINE_LOCATION
android.permission.ACCESS_COARSE_LOCATION

android.permission-group.MICROPHONE
android.permission.RECORD_AUDIO

android.permission-group.PHONE
android.permission.READ_PHONE_STATE
android.permission.CALL_PHONE
android.permission.READ_CALL_LOG
android.permission.WRITE_CALL_LOG
com.android.voicemail.permission.ADD_VOICEMAIL
android.permission.USE_SIP
android.permission.PROCESS_OUTGOING_CALLS

android.permission-group.SENSORS
android.permission.BODY_SENSORS

android.permission-group.SMS
android.permission.SEND_SMS
android.permission.RECEIVE_SMS
android.permission.READ_SMS
android.permission.RECEIVE_WAP_PUSH
android.permission.RECEIVE_MMS
android.permission.READ_CELL_BROADCASTS

android.permission-group.STORAGE
android.permission.READ_EXTERNAL_STORAGE
android.permission.WRITE_EXTERNAL_STORAGE

危险权限是按组划分的,每一组中当某一个权限被允许或者拒绝后,同一组的其他权限也相应的自动允许或者拒绝。

当targetSdkVersion/compileSdkVersion大于等于23时,我们用到危险权限时,应按照这样的逻辑去处理。先判断当前应用是否具有权限,如果没有就去申请,当用户允许或者拒绝后,会回调相应的方法,我们在回调中处理自己的逻辑。


申请单个权限

在Activity/Fragment中,判断是否具有权限的方法是 checkSelfPermission(),申请权限的方法是requestPermissions(),然后用户允许或者拒绝后会回调方法onRequestPermissionsResult()。
虽然Activity/Fragment提供了这些方法,如果我们用这些的话,要判断安卓版本是否大于等于23,代码如下: 
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
//动态请求权限

}else{
//直接去调用代码
}

 
谷歌工程师当然考虑到了这些,于是给开发者提供了兼容包,在Activity/Fragment中用ContextCompat.checkSelfPermission()判断是否具有权限;
在Activity中用 ActivityCompat.requestPermissions()请求权限;
在Fragment中直接用 requestPermissions()请求权限,不要在前面加上ActivityCompat,否则会回调Fragment所在Activity的回调方法;
在Activity/Fragment中用户允许或者拒绝权限后会回调onRequestPermissionsResult()方法。

下面看一个平常的调用系统相机拍照功能的代码:
private void takePhoto() {
Intent photoIn = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(photoIn, TAKE_PHOTO_REQUEST);
}

 
如果我们项目targetSdkVersion/compileSdkVersion大于等于23,那么就需要动态申请权限了:
if (ContextCompat.checkSelfPermission(MySetupActivity.this,  Manifest.permission.CAMERA)!=  PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(MySetupActivity.this,new String[]{Manifest.permission.CAMERA}, 100);
} else {
takePhoto();
}

 
先判断是否具有权限,如果有直接去执行相关代码,没有则去申请权限。
当用户点击允许或者拒绝权限时,会回调onRequestPermissionsResult方法,我们在此方法中进行处理:
@Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {

if (requestCode == 100) {//相机
if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
takePhoto();
} else {
// Permission Denied
AlertDialog mDialog = new AlertDialog.Builder(MySetupActivity.this)
.setTitle("友好提醒")
.setMessage("您已拒绝权限,请开启权限!")
.setPositiveButton("开启", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
ShowAppSetDetails.showInstalledAppDetails(MySetupActivity.this, "user.zhuku.com");
LogPrint.logILsj(TAG, "开启权限设置");
}
})
.setCancelable(true)
.create();
mDialog.show();
}
}
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
}

当用户允许权限后我们直接执行相关代码,若拒绝则提示用户,弹窗提示是否需要开启权限。其中的
ShowAppSetDetails.showInstalledAppDetails(MySetupActivity.this, "user.zhuku.com");

是开启当前app信息设置界面的代码。

具体代码如下:
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.provider.Settings;
public class ShowAppSetDetails {
private static final String SCHEME = "package";
/**
* 调用系统InstalledAppDetails界面所需的Extra名称(用于Android 2.1及之前版本)
*/
private static final String APP_PKG_NAME_21 = "com.android.settings.ApplicationPkgName";
/**
* 调用系统InstalledAppDetails界面所需的Extra名称(用于Android 2.2)
*/
private static final String APP_PKG_NAME_22 = "pkg";
/**
* InstalledAppDetails所在包名
*/
private static final String APP_DETAILS_PACKAGE_NAME = "com.android.settings";
/**
* InstalledAppDetails类名
*/
private static final String APP_DETAILS_CLASS_NAME = "com.android.settings.InstalledAppDetails";

/**
* 调用系统InstalledAppDetails界面显示已安装应用程序的详细信息。 对于Android 2.3(Api Level
* 9)以上,使用SDK提供的接口; 2.3以下,使用非公开的接口(查看InstalledAppDetails源码)。
*
* @param context
* @param packageName 应用程序的包名
*/
public static void showInstalledAppDetails(Context context, String packageName) {
Intent intent = new Intent();
final int apiLevel = Build.VERSION.SDK_INT;
if (apiLevel >= 9) { // 2.3(ApiLevel 9)以上,使用SDK提供的接口
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
Uri uri = Uri.fromParts(SCHEME, packageName, null);
intent.setData(uri);
} else { // 2.3以下,使用非公开的接口(查看InstalledAppDetails源码)
// 2.2和2.1中,InstalledAppDetails使用的APP_PKG_NAME不同。
final String appPkgName = (apiLevel == 8 ? APP_PKG_NAME_22
: APP_PKG_NAME_21);
intent.setAction(Intent.ACTION_VIEW);
intent.setClassName(APP_DETAILS_PACKAGE_NAME,
APP_DETAILS_CLASS_NAME);
intent.putExtra(appPkgName, packageName);
}
context.startActivity(intent);
}
}

当app申请权限时,如果用户点击了“不再提醒”,则会直接回调拒绝权限,为此谷歌工程师提供了shouldShowRequestPermissionRationale()方法。兼容包中方法是ActivityCompat.shouldShowRequestPermissionRationale(),如果是在Fragment中使用请直接用shouldShowRequestPermissionRationale()。

ActivityCompat.shouldShowRequestPermissionRationale()方法返回值是boolean类型,当第一次申请权限时,此方法会返回false,如果用户点击“不再提醒”,则此方法会返回true。
 
详细代码如下:
if (ContextCompat.checkSelfPermission(MySetupActivity.this, Manifest.permission.CAMERA)
!= PackageManager.PERMISSION_GRANTED) {
if (ActivityCompat.shouldShowRequestPermissionRationale(MySetupActivity.this, Manifest.permission.CAMERA)) {
//已经禁止提示了
mDialog = new AlertDialog.Builder(MySetupActivity.this)
.setTitle("友好提醒")
.setMessage("您已拒绝相机权限,此功能需要开启,是否开启?")
.setPositiveButton("是", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
ActivityCompat.requestPermissions(MySetupActivity.this,
new String[]{Manifest.permission.CAMERA},
100);
}
})
.setNegativeButton("否", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
})
.setCancelable(true)
.create();
mDialog.show();
} else {
ActivityCompat.requestPermissions(MySetupActivity.this,
new String[]{Manifest.permission.CAMERA},
100);
}

} else {
takePhoto();
}

 
如果是在Fragment中,则代码如下:
if (ContextCompat.checkSelfPermission(getActivity(), Manifest.permission.CAMERA)
!= PackageManager.PERMISSION_GRANTED) {
if (shouldShowRequestPermissionRationale(Manifest.permission.CAMERA)) {
//已经禁止提示了
mDialog = new AlertDialog.Builder(getContext())
.setTitle("友好提醒")
.setMessage("您已拒绝相机权限,此功能需要开启,是否开启?")
.setPositiveButton("是", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
requestPermissions(new String[]{Manifest.permission.CAMERA},
PERMISSIONS_CAMERA);
}
})
.setNegativeButton("否", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
})
.setCancelable(true)
.create();
mDialog.show();
} else {
requestPermissions(new String[]{Manifest.permission.CAMERA},
PERMISSIONS_CAMERA);
}

} else {
selectPicFromCamera();
}

特别要注意的是,如果在Fragment中请求权限,若在Activity中也重写了onRequestPermissionsResult(),则onRequestPermissionsResult()方法中一定要写
  super.onRequestPermissionsResult(requestCode, permissions, grantResults);

这句代码,若不写,则Activity不会分发执行Fragment中的权限回调方法。

因为Fragment中requestPermissions()源码如下:
public final void requestPermissions(@NonNull String[] permissions, int requestCode) {
if (mHost == null) {
throw new IllegalStateException("Fragment " + this + " not attached to Activity");
}
mHost.onRequestPermissionsFromFragment(this, permissions, requestCode);
}

其实在Fragment请求权限也是在它Activity中请求,只是把回调结果传递给了Fragment。


一次申请多个权限

例如需要申请的权限如下:
    /**
* 需要进行检测的权限数组
*/
protected String[] permissionList = {
Manifest.permission.ACCESS_FINE_LOCATION,
Manifest.permission.ACCESS_COARSE_LOCATION,
Manifest.permission.ACCESS_LOCATION_EXTRA_COMMANDS,
Manifest.permission.READ_PHONE_STATE,
Manifest.permission.CAMERA,
Manifest.permission.WRITE_EXTERNAL_STORAGE,
Manifest.permission.READ_EXTERNAL_STORAGE
};

 
我们要先判断每一个权限是否已经允许或者拒绝,当有某一个权限未被允许时,则申请未被允许的权限。
protected void onStart() {
super.onStart();

if (PermissionUtils.checkSelfPermission(SplashActivity.this, permissionList)) {
PermissionUtils.checkPermissions(this, 0, permissionList);
} else {
//处理业务逻辑
}

}

其中PermissionUtils类的代码如下:
import android.app.Activity;
import android.content.Context;
import android.content.pm.PackageManager;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;

import java.util.ArrayList;
import java.util.List;

public class PermissionUtils {
/**
* 检查权限
*/
public static void checkPermissions(Activity activity, int permissRequestCode, String... permissions) {
List<String> needRequestPermissonList = findDeniedPermissions(activity, permissions);
if (null != needRequestPermissonList
&& needRequestPermissonList.size() > 0) {
ActivityCompat.requestPermissions(activity,
needRequestPermissonList.toArray(
new String[needRequestPermissonList.size()]),
permissRequestCode);
}
}

/**
* 获取权限中需要申请权限的列表
*/
public static List<String> findDeniedPermissions(Activity activity, String[] permissions) {
List<String> needRequestPermissonList = new ArrayList<String>();
for (String perm : permissions) {
if (ContextCompat.checkSelfPermission(activity,
perm) != PackageManager.PERMISSION_GRANTED) {
needRequestPermissonList.add(perm);
} else {
if (ActivityCompat.shouldShowRequestPermissionRationale(
activity, perm)) {
needRequestPermissonList.add(perm);
}
}
}
return needRequestPermissonList;
}

public static boolean checkSelfPermission(Context context, String[] permissions) {
for (String perm : permissions) {
if (ContextCompat.checkSelfPermission(context, perm) != PackageManager.PERMISSION_GRANTED) {
return true;
}
}
return false;
}

public static boolean checkSelfResult(int[] grantResults) {
for (int grantResult : grantResults) {
if (grantResult != PackageManager.PERMISSION_GRANTED) {
return false;
}
}
return true;
}
}

 
onRequestPermissionsResult回调方法中则这样处理:
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);

if (requestCode == 0) {
if (PermissionUtils.checkSelfResult(grantResults)) {
// Permission Granted
//处理业务逻辑
} else {
// Permission Denied

if (null == mDialog)
mDialog = new AlertDialog.Builder(SplashActivity.this)
.setTitle("友好提醒")
.setMessage("没有权限将不能更好的使用,请开启权限!")
.setPositiveButton("开启", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
ShowAppSetDetails.showInstalledAppDetails(SplashActivity.this, "user.zhuku.com");
LogPrint.logILsj(TAG, "开启权限设置");
}
})
.setCancelable(false)
.create();

if (!mDialog.isShowing()) {
mDialog.show();
}
}
}
}

 
如果项目需要在页面可见时进行权限申请,请放在onStart()方法中,不要写在onResume()中。
可以想象一下,如果写在onResume()中,当用户同意了权限,则无碍,若是点击拒绝,则会回调权限拒绝的方法,这时系统申请权限的对话框消失不见,会再次调用onResume()请求权限显示对话框,若是还拒绝,则会再次调用onResume()方法,一直处于死循环。
因为系统请求权限的对话框其实一个开启了一个Activity。部分源码如下:  
 
 public final void requestPermissions(@NonNull String[] permissions, int requestCode) {
if (mHasCurrentPermissionsRequest) {
Log.w(TAG, "Can reqeust only one set of permissions at a time");
// Dispatch the callback with empty arrays which means a cancellation.
onRequestPermissionsResult(requestCode, new String[0], new int[0]);
return;
}
Intent intent = getPackageManager().buildRequestPermissionsIntent(permissions);
startActivityForResult(REQUEST_PERMISSIONS_WHO_PREFIX, intent, requestCode, null);
mHasCurrentPermissionsRequest = true;
}

至此,老司机本次发车已到终点,这一程体验,你还不会封装自己的运行时权限库吗?
 
 

qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术
继续阅读 »
 
老司机发车了,未到终点请勿下车. 嘟嘟嘟~~~
 运行时权限从Android 6.0版本开始的,如果你的项目中 targetSdkVersion/compileSdkVersion 大于等于23,那么你就必须要考虑动态权限了。

权限又分为普通权限和危险权限。
普通权限如下:
android.permission.ACCESS LOCATIONEXTRA_COMMANDS 
android.permission.ACCESS NETWORKSTATE
android.permission.ACCESS NOTIFICATIONPOLICY
android.permission.ACCESS WIFISTATE
android.permission.ACCESS WIMAXSTATE
android.permission.BLUETOOTH
android.permission.BLUETOOTH_ADMIN
android.permission.BROADCAST_STICKY
android.permission.CHANGE NETWORKSTATE
android.permission.CHANGE WIFIMULTICAST_STATE
android.permission.CHANGE WIFISTATE
android.permission.CHANGE WIMAXSTATE
android.permission.DISABLE_KEYGUARD
android.permission.EXPAND STATUSBAR
android.permission.FLASHLIGHT
android.permission.GET_ACCOUNTS
android.permission.GET PACKAGESIZE
android.permission.INTERNET
android.permission.KILL BACKGROUNDPROCESSES
android.permission.MODIFY AUDIOSETTINGS
android.permission.NFC
android.permission.READ SYNCSETTINGS
android.permission.READ SYNCSTATS
android.permission.RECEIVE BOOTCOMPLETED
android.permission.REORDER_TASKS
android.permission.REQUEST INSTALLPACKAGES
android.permission.SET TIMEZONE
android.permission.SET_WALLPAPER
android.permission.SET WALLPAPERHINTS
android.permission.SUBSCRIBED FEEDSREAD
android.permission.TRANSMIT_IR
android.permission.USE_FINGERPRINT
android.permission.VIBRATE
android.permission.WAKE_LOCK
android.permission.WRITE SYNCSETTINGS
com.android.alarm.permission.SET_ALARM
com.android.launcher.permission.INSTALL_SHORTCUT
com.android.launcher.permission.UNINSTALL_SHORTCUT

普通权限是当需要用到时,只需要在清单文件中声明就可。危险权限除了需要在清单文件中声明外,还需在代码中动态进行判断申请。

危险权限如下:
android.permission-group.CALENDAR   
android.permission.READ_CALENDAR
android.permission.WRITE_CALENDAR

android.permission-group.CAMERA
android.permission.CAMERA

android.permission-group.CONTACTS
android.permission.READ_CONTACTS
android.permission.WRITE_CONTACTS
android.permission.GET_ACCOUNTS

android.permission-group.LOCATION
android.permission.ACCESS_FINE_LOCATION
android.permission.ACCESS_COARSE_LOCATION

android.permission-group.MICROPHONE
android.permission.RECORD_AUDIO

android.permission-group.PHONE
android.permission.READ_PHONE_STATE
android.permission.CALL_PHONE
android.permission.READ_CALL_LOG
android.permission.WRITE_CALL_LOG
com.android.voicemail.permission.ADD_VOICEMAIL
android.permission.USE_SIP
android.permission.PROCESS_OUTGOING_CALLS

android.permission-group.SENSORS
android.permission.BODY_SENSORS

android.permission-group.SMS
android.permission.SEND_SMS
android.permission.RECEIVE_SMS
android.permission.READ_SMS
android.permission.RECEIVE_WAP_PUSH
android.permission.RECEIVE_MMS
android.permission.READ_CELL_BROADCASTS

android.permission-group.STORAGE
android.permission.READ_EXTERNAL_STORAGE
android.permission.WRITE_EXTERNAL_STORAGE

危险权限是按组划分的,每一组中当某一个权限被允许或者拒绝后,同一组的其他权限也相应的自动允许或者拒绝。

当targetSdkVersion/compileSdkVersion大于等于23时,我们用到危险权限时,应按照这样的逻辑去处理。先判断当前应用是否具有权限,如果没有就去申请,当用户允许或者拒绝后,会回调相应的方法,我们在回调中处理自己的逻辑。


申请单个权限

在Activity/Fragment中,判断是否具有权限的方法是 checkSelfPermission(),申请权限的方法是requestPermissions(),然后用户允许或者拒绝后会回调方法onRequestPermissionsResult()。
虽然Activity/Fragment提供了这些方法,如果我们用这些的话,要判断安卓版本是否大于等于23,代码如下: 
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
//动态请求权限

}else{
//直接去调用代码
}

 
谷歌工程师当然考虑到了这些,于是给开发者提供了兼容包,在Activity/Fragment中用ContextCompat.checkSelfPermission()判断是否具有权限;
在Activity中用 ActivityCompat.requestPermissions()请求权限;
在Fragment中直接用 requestPermissions()请求权限,不要在前面加上ActivityCompat,否则会回调Fragment所在Activity的回调方法;
在Activity/Fragment中用户允许或者拒绝权限后会回调onRequestPermissionsResult()方法。

下面看一个平常的调用系统相机拍照功能的代码:
private void takePhoto() {
Intent photoIn = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(photoIn, TAKE_PHOTO_REQUEST);
}

 
如果我们项目targetSdkVersion/compileSdkVersion大于等于23,那么就需要动态申请权限了:
if (ContextCompat.checkSelfPermission(MySetupActivity.this,  Manifest.permission.CAMERA)!=  PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(MySetupActivity.this,new String[]{Manifest.permission.CAMERA}, 100);
} else {
takePhoto();
}

 
先判断是否具有权限,如果有直接去执行相关代码,没有则去申请权限。
当用户点击允许或者拒绝权限时,会回调onRequestPermissionsResult方法,我们在此方法中进行处理:
@Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {

if (requestCode == 100) {//相机
if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
takePhoto();
} else {
// Permission Denied
AlertDialog mDialog = new AlertDialog.Builder(MySetupActivity.this)
.setTitle("友好提醒")
.setMessage("您已拒绝权限,请开启权限!")
.setPositiveButton("开启", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
ShowAppSetDetails.showInstalledAppDetails(MySetupActivity.this, "user.zhuku.com");
LogPrint.logILsj(TAG, "开启权限设置");
}
})
.setCancelable(true)
.create();
mDialog.show();
}
}
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
}

当用户允许权限后我们直接执行相关代码,若拒绝则提示用户,弹窗提示是否需要开启权限。其中的
ShowAppSetDetails.showInstalledAppDetails(MySetupActivity.this, "user.zhuku.com");

是开启当前app信息设置界面的代码。

具体代码如下:
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.provider.Settings;
public class ShowAppSetDetails {
private static final String SCHEME = "package";
/**
* 调用系统InstalledAppDetails界面所需的Extra名称(用于Android 2.1及之前版本)
*/
private static final String APP_PKG_NAME_21 = "com.android.settings.ApplicationPkgName";
/**
* 调用系统InstalledAppDetails界面所需的Extra名称(用于Android 2.2)
*/
private static final String APP_PKG_NAME_22 = "pkg";
/**
* InstalledAppDetails所在包名
*/
private static final String APP_DETAILS_PACKAGE_NAME = "com.android.settings";
/**
* InstalledAppDetails类名
*/
private static final String APP_DETAILS_CLASS_NAME = "com.android.settings.InstalledAppDetails";

/**
* 调用系统InstalledAppDetails界面显示已安装应用程序的详细信息。 对于Android 2.3(Api Level
* 9)以上,使用SDK提供的接口; 2.3以下,使用非公开的接口(查看InstalledAppDetails源码)。
*
* @param context
* @param packageName 应用程序的包名
*/
public static void showInstalledAppDetails(Context context, String packageName) {
Intent intent = new Intent();
final int apiLevel = Build.VERSION.SDK_INT;
if (apiLevel >= 9) { // 2.3(ApiLevel 9)以上,使用SDK提供的接口
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
Uri uri = Uri.fromParts(SCHEME, packageName, null);
intent.setData(uri);
} else { // 2.3以下,使用非公开的接口(查看InstalledAppDetails源码)
// 2.2和2.1中,InstalledAppDetails使用的APP_PKG_NAME不同。
final String appPkgName = (apiLevel == 8 ? APP_PKG_NAME_22
: APP_PKG_NAME_21);
intent.setAction(Intent.ACTION_VIEW);
intent.setClassName(APP_DETAILS_PACKAGE_NAME,
APP_DETAILS_CLASS_NAME);
intent.putExtra(appPkgName, packageName);
}
context.startActivity(intent);
}
}

当app申请权限时,如果用户点击了“不再提醒”,则会直接回调拒绝权限,为此谷歌工程师提供了shouldShowRequestPermissionRationale()方法。兼容包中方法是ActivityCompat.shouldShowRequestPermissionRationale(),如果是在Fragment中使用请直接用shouldShowRequestPermissionRationale()。

ActivityCompat.shouldShowRequestPermissionRationale()方法返回值是boolean类型,当第一次申请权限时,此方法会返回false,如果用户点击“不再提醒”,则此方法会返回true。
 
详细代码如下:
if (ContextCompat.checkSelfPermission(MySetupActivity.this, Manifest.permission.CAMERA)
!= PackageManager.PERMISSION_GRANTED) {
if (ActivityCompat.shouldShowRequestPermissionRationale(MySetupActivity.this, Manifest.permission.CAMERA)) {
//已经禁止提示了
mDialog = new AlertDialog.Builder(MySetupActivity.this)
.setTitle("友好提醒")
.setMessage("您已拒绝相机权限,此功能需要开启,是否开启?")
.setPositiveButton("是", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
ActivityCompat.requestPermissions(MySetupActivity.this,
new String[]{Manifest.permission.CAMERA},
100);
}
})
.setNegativeButton("否", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
})
.setCancelable(true)
.create();
mDialog.show();
} else {
ActivityCompat.requestPermissions(MySetupActivity.this,
new String[]{Manifest.permission.CAMERA},
100);
}

} else {
takePhoto();
}

 
如果是在Fragment中,则代码如下:
if (ContextCompat.checkSelfPermission(getActivity(), Manifest.permission.CAMERA)
!= PackageManager.PERMISSION_GRANTED) {
if (shouldShowRequestPermissionRationale(Manifest.permission.CAMERA)) {
//已经禁止提示了
mDialog = new AlertDialog.Builder(getContext())
.setTitle("友好提醒")
.setMessage("您已拒绝相机权限,此功能需要开启,是否开启?")
.setPositiveButton("是", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
requestPermissions(new String[]{Manifest.permission.CAMERA},
PERMISSIONS_CAMERA);
}
})
.setNegativeButton("否", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
})
.setCancelable(true)
.create();
mDialog.show();
} else {
requestPermissions(new String[]{Manifest.permission.CAMERA},
PERMISSIONS_CAMERA);
}

} else {
selectPicFromCamera();
}

特别要注意的是,如果在Fragment中请求权限,若在Activity中也重写了onRequestPermissionsResult(),则onRequestPermissionsResult()方法中一定要写
  super.onRequestPermissionsResult(requestCode, permissions, grantResults);

这句代码,若不写,则Activity不会分发执行Fragment中的权限回调方法。

因为Fragment中requestPermissions()源码如下:
public final void requestPermissions(@NonNull String[] permissions, int requestCode) {
if (mHost == null) {
throw new IllegalStateException("Fragment " + this + " not attached to Activity");
}
mHost.onRequestPermissionsFromFragment(this, permissions, requestCode);
}

其实在Fragment请求权限也是在它Activity中请求,只是把回调结果传递给了Fragment。


一次申请多个权限

例如需要申请的权限如下:
    /**
* 需要进行检测的权限数组
*/
protected String[] permissionList = {
Manifest.permission.ACCESS_FINE_LOCATION,
Manifest.permission.ACCESS_COARSE_LOCATION,
Manifest.permission.ACCESS_LOCATION_EXTRA_COMMANDS,
Manifest.permission.READ_PHONE_STATE,
Manifest.permission.CAMERA,
Manifest.permission.WRITE_EXTERNAL_STORAGE,
Manifest.permission.READ_EXTERNAL_STORAGE
};

 
我们要先判断每一个权限是否已经允许或者拒绝,当有某一个权限未被允许时,则申请未被允许的权限。
protected void onStart() {
super.onStart();

if (PermissionUtils.checkSelfPermission(SplashActivity.this, permissionList)) {
PermissionUtils.checkPermissions(this, 0, permissionList);
} else {
//处理业务逻辑
}

}

其中PermissionUtils类的代码如下:
import android.app.Activity;
import android.content.Context;
import android.content.pm.PackageManager;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;

import java.util.ArrayList;
import java.util.List;

public class PermissionUtils {
/**
* 检查权限
*/
public static void checkPermissions(Activity activity, int permissRequestCode, String... permissions) {
List<String> needRequestPermissonList = findDeniedPermissions(activity, permissions);
if (null != needRequestPermissonList
&& needRequestPermissonList.size() > 0) {
ActivityCompat.requestPermissions(activity,
needRequestPermissonList.toArray(
new String[needRequestPermissonList.size()]),
permissRequestCode);
}
}

/**
* 获取权限中需要申请权限的列表
*/
public static List<String> findDeniedPermissions(Activity activity, String[] permissions) {
List<String> needRequestPermissonList = new ArrayList<String>();
for (String perm : permissions) {
if (ContextCompat.checkSelfPermission(activity,
perm) != PackageManager.PERMISSION_GRANTED) {
needRequestPermissonList.add(perm);
} else {
if (ActivityCompat.shouldShowRequestPermissionRationale(
activity, perm)) {
needRequestPermissonList.add(perm);
}
}
}
return needRequestPermissonList;
}

public static boolean checkSelfPermission(Context context, String[] permissions) {
for (String perm : permissions) {
if (ContextCompat.checkSelfPermission(context, perm) != PackageManager.PERMISSION_GRANTED) {
return true;
}
}
return false;
}

public static boolean checkSelfResult(int[] grantResults) {
for (int grantResult : grantResults) {
if (grantResult != PackageManager.PERMISSION_GRANTED) {
return false;
}
}
return true;
}
}

 
onRequestPermissionsResult回调方法中则这样处理:
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);

if (requestCode == 0) {
if (PermissionUtils.checkSelfResult(grantResults)) {
// Permission Granted
//处理业务逻辑
} else {
// Permission Denied

if (null == mDialog)
mDialog = new AlertDialog.Builder(SplashActivity.this)
.setTitle("友好提醒")
.setMessage("没有权限将不能更好的使用,请开启权限!")
.setPositiveButton("开启", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
ShowAppSetDetails.showInstalledAppDetails(SplashActivity.this, "user.zhuku.com");
LogPrint.logILsj(TAG, "开启权限设置");
}
})
.setCancelable(false)
.create();

if (!mDialog.isShowing()) {
mDialog.show();
}
}
}
}

 
如果项目需要在页面可见时进行权限申请,请放在onStart()方法中,不要写在onResume()中。
可以想象一下,如果写在onResume()中,当用户同意了权限,则无碍,若是点击拒绝,则会回调权限拒绝的方法,这时系统申请权限的对话框消失不见,会再次调用onResume()请求权限显示对话框,若是还拒绝,则会再次调用onResume()方法,一直处于死循环。
因为系统请求权限的对话框其实一个开启了一个Activity。部分源码如下:  
 
 public final void requestPermissions(@NonNull String[] permissions, int requestCode) {
if (mHasCurrentPermissionsRequest) {
Log.w(TAG, "Can reqeust only one set of permissions at a time");
// Dispatch the callback with empty arrays which means a cancellation.
onRequestPermissionsResult(requestCode, new String[0], new int[0]);
return;
}
Intent intent = getPackageManager().buildRequestPermissionsIntent(permissions);
startActivityForResult(REQUEST_PERMISSIONS_WHO_PREFIX, intent, requestCode, null);
mHasCurrentPermissionsRequest = true;
}

至此,老司机本次发车已到终点,这一程体验,你还不会封装自己的运行时权限库吗?
 
 

qrcode_for_gh_08bfa7313fb2_258.jpg

微信公众号:IT大前端
关注可了解更多的大前端领域技术 收起阅读 »

2018,环信是如何C位出道的!(分享你和环信的故事赢千元奖励)

六年,筚路蓝缕,环信走过了一段从无至有的征程;

六年,栉风沐雨,见证了中国SaaS从0到1到1++的幸运;

六年,砥砺前行,从IM云1.0到IM云4.0,从移动客服到全媒体客服再到智能客服;

六年,峥嵘岁月,又一个全新的起点等待环信人去超越,从“心”出发;

六载春秋,陪伴是最长情的告白!感恩有你!!!


新年广告_01.jpg


新年广告_02.jpg


新年广告_03.jpg


新年广告_05.jpg


新年广告_06.jpg


新年广告_07.jpg


新年广告_08.jpg


新年广告_09.jpg


新年广告_10.jpg


新年广告_11.jpg

分享你和环信的故事赢千元奖励

欢迎在评论区分享你和环信的故事,评论区点赞前3名各送200元京东卡一张,第4-10名各送100元京东卡一张。(春节后第一个工作日2月11日公布获奖名单)

评论地址:https://mp.weixin.qq.com/s/Tij4kpquSUSeB04lkcepXQ
继续阅读 »
六年,筚路蓝缕,环信走过了一段从无至有的征程;

六年,栉风沐雨,见证了中国SaaS从0到1到1++的幸运;

六年,砥砺前行,从IM云1.0到IM云4.0,从移动客服到全媒体客服再到智能客服;

六年,峥嵘岁月,又一个全新的起点等待环信人去超越,从“心”出发;

六载春秋,陪伴是最长情的告白!感恩有你!!!


新年广告_01.jpg


新年广告_02.jpg


新年广告_03.jpg


新年广告_05.jpg


新年广告_06.jpg


新年广告_07.jpg


新年广告_08.jpg


新年广告_09.jpg


新年广告_10.jpg


新年广告_11.jpg

分享你和环信的故事赢千元奖励

欢迎在评论区分享你和环信的故事,评论区点赞前3名各送200元京东卡一张,第4-10名各送100元京东卡一张。(春节后第一个工作日2月11日公布获奖名单)

评论地址:https://mp.weixin.qq.com/s/Tij4kpquSUSeB04lkcepXQ 收起阅读 »

最近开发的即时通讯软件,有ios和安卓和web端


hongbao4.png


iphone-slide-1.png


iphone-slide-2.png


iphone-slide-4.png


iphone-slide-6.png


iphone-slide-7.png


iphone-slide-8.png

支持群聊,单聊,发送语音,红包等功能
以及强大的群组功能
https://fir.im/Aichat
有不足之处还请多多指教,欢迎加我qq咨询,244451417
继续阅读 »

hongbao4.png


iphone-slide-1.png


iphone-slide-2.png


iphone-slide-4.png


iphone-slide-6.png


iphone-slide-7.png


iphone-slide-8.png

支持群聊,单聊,发送语音,红包等功能
以及强大的群组功能
https://fir.im/Aichat
有不足之处还请多多指教,欢迎加我qq咨询,244451417 收起阅读 »

在线充值成功后,如何开发票?

如您已经在线支付成功,请您联系400-612-1986或者点击页面 http://www.easemob.com/ 右侧的商务咨询申请发票,仅限增值税普通发票(温馨提示:400和商务咨询申请只支持增值税普通发票,不能申请增值税专用发票,增值税专用发票请联系您的商务经理开通)。在线支付成功后(包含新购、增购、续费),可以在90天内提交申请开具增值税普通发票。自助申请发票统一由财务受理后,将于20个工作日左右寄出,邮寄方式:普通快递-优速快递
继续阅读 »
如您已经在线支付成功,请您联系400-612-1986或者点击页面 http://www.easemob.com/ 右侧的商务咨询申请发票,仅限增值税普通发票(温馨提示:400和商务咨询申请只支持增值税普通发票,不能申请增值税专用发票,增值税专用发票请联系您的商务经理开通)。在线支付成功后(包含新购、增购、续费),可以在90天内提交申请开具增值税普通发票。自助申请发票统一由财务受理后,将于20个工作日左右寄出,邮寄方式:普通快递-优速快递 收起阅读 »

h5仿微信语音聊天|仿微信摇一摇|地图定位|数字支付键盘

基于html5+css3+wcPop+swiper+zepto+weScroll等技术实现的高仿微信界面|仿微信语音聊天效果|仿微信摇一摇加好友|仿微信支付键盘。摇一摇模块则是使用了shake.js插件实现功能效果的,语音模块效果和微信语音效果非常类似,按住说话,手指上滑、取消发送。
https://blog.csdn.net/yanxinyun1990/article/details/85221037

022360截图20181221095816291.png


023360截图20181221095950859.png


025360截图20181221100205642.png


026360截图20181221100230225.png


002360截图20181221094619690.png


003360截图20181221094702001.png


004360截图20181221094720201.png


007360截图20181221095016435.png


009360截图20181221095104377.png


010360截图20181221095121562.png


011360截图20181221095141122.png


014360截图20181221095243962.png


016360截图20181221095501306.png


017360截图20181221095514866.png


020360截图20181221095719913.png


021360截图20181221095816291.png


027360截图20181221095719913.png


028360截图20181221100336473.png

 
// >>> 【摇一摇加好友核心模块】------------------------------------------
// 摇一摇加好友弹窗
$("#J__popScreen_shake").on("click", function () {
var shakePopIdx = wcPop({
id: 'wcim_shake_fullscreen',
skin: 'fullscreen',
title: '摇一摇',
content: $("#J__popupTmpl-shakeFriends").html(),
position: 'right',
xclose: true,
style: 'background: #303030;',
show: function(){
// 摇一摇功能
var _shake = new Shake({threshold: 15});
_shake.start();
window.addEventListener("shake", function(){
window.navigator.vibrate && navigator.vibrate(500);
// console.log("触发摇一摇!");

$(".J__shakeInfoBox").html("");
$(".J__shakeLoading").fadeIn(300);
// 消息模板
var shakeTpl = [
'<div class="shake-info flexbox flex-alignc">\
<img class="uimg" src="img/uimg/u__chat-img08.jpg" />\
<div class="flex1">\
<h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>\
<label class="lbl clamp1">开森每一刻,每天都要美美哒!</label>\
</div>\
</div>'
].join("");
setTimeout(function(){
$(".J__shakeLoading").fadeOut(300);
$(".J__shakeInfoBox").html(shakeTpl);
}, 1500);
}, false);
}
});
});
// 切换摇一摇项目
$("body").on("click", ".J__swtShakeItem a", function(){
$(this).addClass("active").siblings().removeClass("active");
});
// 摇一摇设置
$("body").on("click", ".J__shakeSetting", function(){
wcPop({
skin: 'actionsheetMini',
anim: 'footer',
btns: [
{ text: '<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>' },
{ text: '摇到的历史' },
]
});
});
// ripple波纹效果
wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });
wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });

// 禁止长按弹出系统菜单
$("body").on("contextmenu", ".weChatIM__panel", function (e) {
e.preventDefault();
});

// 顶部 “+” 菜单
$("#J__topbarAdd").on("click", function(e){
var _points = [e.clientX, e.clientY];
var contextMenuIdx = wcPop({
skin: 'contextmenu', shade: true,shadeClose: true,opacity: 0,follow: _points,
style: 'background:#3d3f4e; min-width:3.5rem;',
btns: [
{text: '<i class="iconfont icon-haoyou fs-40 mr-10"></i><span>添加好友</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 添加好友
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '添加好友',
content: $("#J__popupTmpl-addFriends").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-qunliao fs-40 mr-10"></i><span>发起群聊</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 发起群聊
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '发起群聊',
content: $("#J__popupTmpl-launchGroupChat").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-bangzhu fs-40 mr-10"></i><span>帮助与反馈</span>',style: 'color:#fff;',}
]
});
});
// ...获取语音时长
getVoiceTime();
function getVoiceTime(){
$("#J__chatMsgList li .audio").each(function () {
var that = $(this), audio = that.find("audio")[0], duration;
audio.load();
audio.oncanplay = function(){
duration = Math.ceil(audio.duration);
if (duration == 'Infinity') {
getVoiceTime();
} else {
that.find(".time").text(duration + `''`);
that.attr("data-time", duration);
// 语音宽度%
var percent = (duration / 60).toFixed(2) * 100 + 20 + '%';
that.css("width", percent);
}
}
});
}

20180817002157557.jpg

欢迎大家一起交流、学习  Q:282310962  wx:xy190310
 
继续阅读 »
基于html5+css3+wcPop+swiper+zepto+weScroll等技术实现的高仿微信界面|仿微信语音聊天效果|仿微信摇一摇加好友|仿微信支付键盘。摇一摇模块则是使用了shake.js插件实现功能效果的,语音模块效果和微信语音效果非常类似,按住说话,手指上滑、取消发送。
https://blog.csdn.net/yanxinyun1990/article/details/85221037

022360截图20181221095816291.png


023360截图20181221095950859.png


025360截图20181221100205642.png


026360截图20181221100230225.png


002360截图20181221094619690.png


003360截图20181221094702001.png


004360截图20181221094720201.png


007360截图20181221095016435.png


009360截图20181221095104377.png


010360截图20181221095121562.png


011360截图20181221095141122.png


014360截图20181221095243962.png


016360截图20181221095501306.png


017360截图20181221095514866.png


020360截图20181221095719913.png


021360截图20181221095816291.png


027360截图20181221095719913.png


028360截图20181221100336473.png

 
// >>> 【摇一摇加好友核心模块】------------------------------------------
// 摇一摇加好友弹窗
$("#J__popScreen_shake").on("click", function () {
var shakePopIdx = wcPop({
id: 'wcim_shake_fullscreen',
skin: 'fullscreen',
title: '摇一摇',
content: $("#J__popupTmpl-shakeFriends").html(),
position: 'right',
xclose: true,
style: 'background: #303030;',
show: function(){
// 摇一摇功能
var _shake = new Shake({threshold: 15});
_shake.start();
window.addEventListener("shake", function(){
window.navigator.vibrate && navigator.vibrate(500);
// console.log("触发摇一摇!");

$(".J__shakeInfoBox").html("");
$(".J__shakeLoading").fadeIn(300);
// 消息模板
var shakeTpl = [
'<div class="shake-info flexbox flex-alignc">\
<img class="uimg" src="img/uimg/u__chat-img08.jpg" />\
<div class="flex1">\
<h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>\
<label class="lbl clamp1">开森每一刻,每天都要美美哒!</label>\
</div>\
</div>'
].join("");
setTimeout(function(){
$(".J__shakeLoading").fadeOut(300);
$(".J__shakeInfoBox").html(shakeTpl);
}, 1500);
}, false);
}
});
});
// 切换摇一摇项目
$("body").on("click", ".J__swtShakeItem a", function(){
$(this).addClass("active").siblings().removeClass("active");
});
// 摇一摇设置
$("body").on("click", ".J__shakeSetting", function(){
wcPop({
skin: 'actionsheetMini',
anim: 'footer',
btns: [
{ text: '<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>' },
{ text: '摇到的历史' },
]
});
});
// ripple波纹效果
wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });
wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });

// 禁止长按弹出系统菜单
$("body").on("contextmenu", ".weChatIM__panel", function (e) {
e.preventDefault();
});

// 顶部 “+” 菜单
$("#J__topbarAdd").on("click", function(e){
var _points = [e.clientX, e.clientY];
var contextMenuIdx = wcPop({
skin: 'contextmenu', shade: true,shadeClose: true,opacity: 0,follow: _points,
style: 'background:#3d3f4e; min-width:3.5rem;',
btns: [
{text: '<i class="iconfont icon-haoyou fs-40 mr-10"></i><span>添加好友</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 添加好友
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '添加好友',
content: $("#J__popupTmpl-addFriends").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-qunliao fs-40 mr-10"></i><span>发起群聊</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 发起群聊
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '发起群聊',
content: $("#J__popupTmpl-launchGroupChat").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-bangzhu fs-40 mr-10"></i><span>帮助与反馈</span>',style: 'color:#fff;',}
]
});
});
// ...获取语音时长
getVoiceTime();
function getVoiceTime(){
$("#J__chatMsgList li .audio").each(function () {
var that = $(this), audio = that.find("audio")[0], duration;
audio.load();
audio.oncanplay = function(){
duration = Math.ceil(audio.duration);
if (duration == 'Infinity') {
getVoiceTime();
} else {
that.find(".time").text(duration + `''`);
that.attr("data-time", duration);
// 语音宽度%
var percent = (duration / 60).toFixed(2) * 100 + 20 + '%';
that.css("width", percent);
}
}
});
}

20180817002157557.jpg

欢迎大家一起交流、学习  Q:282310962  wx:xy190310
  收起阅读 »