转载：移动互联网服务客户端开发技巧 ( Webview及正则)

转载自：http://www.cnblogs.com/pengyingh/articles/2341067.html

 

随着微博、LBS 等移动互联网服务的火爆普及，越来越多的苹果开发者希望制作各网络服务的 iPhone 客户端。CocoaChina 会员 “qdvictory” 的《基于网络的客户端开发技巧》系列文章详细介绍了 iPhone 客户端应用的开发思路和注意事项，希望对苹果开发者们有所帮助。

    一、做一个程序之前，要明确你要做的是什么。这之间道道不少，不仅仅要实现功能，还要考虑到程序功能之间是如何链接，用户如何交互。在这个基础上，才能和 美工一起配合，把程序的设计做好，而仅仅的 UI，已经不能称得上是完整的设计了。利用 API 扩展是必需的，Open API 不是你自家的 API，所以肯定是有局限性的，如何将 API 与产品良好的结合，是重点，抓细节，是重点。每条微博就是一个少量信息，所以客户端要做的就是快，清楚，友好，稳定。

• 快，不用说，加载速度快，浏览的速度快。
• 清楚，UI 布局的可识别性，一个页面，不同的排版，字体的颜色，都将影响到用户看这个页面的速度。
• 友好，不需要太炫的效果，也不需要很酷的动画，就算再简单的 UI，也足以满足用户的需求，就看你如何做。不要烂加，有必要再加。
• 稳定，这个要好好说说了。客户端，毕竟不是单方面数据了，很有可能客户端缓存与数据库信息不统一，或者网络问题导致接收数据出错，这些都是需要做 处理，多 测试，否则 crash 很杯具。前几天同事给我看 Weico 在官方清空了短信息，然后再回来 weico 客户端，直接导致 weico 持续 crash，必须重装，不知目前修正没有。总得来说，多测试，尤其是在数据差异的方面。   

    二、就目前而言，主流的微博特效就不再多说了，以后有可能细讲，基本上都有开源的了。

    三、目前大多展示都是用的 tableview。这里就要多说说了。tableview 的使用方式有好多，下拉刷新，即可以将展示放到 tableview 的 subview 上，也可以放到 tableview cell 上，这 2 种有啥区别呢？目前没有发现实质上的区别，只是在计算的时候放在外面比较好算。
正常来说，展示的步骤为：

• 访问api，获取数据
• 将数据存入数据
• 在 tableview 上展示数据，并载入相关的默认图片。（像新浪微博客户端是用的 Webview 来展示的图片，这个又可以叨叨一阵了，下次再说。。。）
• 自己封装也好，用线程也罢，将下载的图片保存到本地，并刷新 tableview cell。这里又要注意2点：
      1、保存到本地的文件名，像这种公共数据，建议存放在同一文件夹中，像头像，可以以用户 id 为文件名存放，这样做多账号的时候可以直接利用到。关于与当前账号 有关的数据存于单独文件夹（例如以 dir_ID 为名的文件夹）。以当前账号为文件名我认为是不太安全的。像 weico，上次无意中发现，他的缓存都是用我的登录名，不知最新版本修改了没有。
      2、更新 cell 的时候，有不少方法是利用 path 和 tag 来确定修改哪个 imageview,button，但是当 tag 被占用时就相当郁闷，这时就要继承一个子类。所以我比较建议直接用 tableview cell 的 reload cell 方法来刷新，这样还可以刷新行高之类，相当有用。

• 微博一般都是多行，sizeWithFont 确实比较慢，我能做的也只有在获取了数据之后把所有的行高算出来保存，不知有没有更好的方法会效率高一些。

    四、特色功能。想做出与众不同的产品，目前在我看来，只有特色功能。像微博的展示，lbs的签到，再怎么做，也已经大体定型，就算你做的再认真，也是别的 程序换一套皮肤，在我看来，投入成本还是换一个方面的好。想一些实用的功能，扩展一下，在完成基本功能的同时，可以给用户一个使用自己程序的理由。

    五、照片处理特效。现在基本都是用开源库，主流的开源库不说了，基本都是 C、C++的，只要能编译成功，基本没啥使用难度了。问题在于处理图片的效率上。

    六、安全性。像我们公司为了加强用户密码的安全性，特意买了SSL，为的就是让用户的账号更安全。而 Open API 使得我们没法控制，所以最好使用 oauth 认证，以及不要将用户的账号暴露在缓存之中，这些都会增加风险。

 

第二章：Webview及正则

    目前微博客户端基本都使用Webview，这篇就详细讲解一下使用利用Webview展示微博的技巧。当然，主要以代码为主。Demo暂时就不提供了。之前也有几篇博文提到相关的，这里简单总结一下。

    为什么要用webview来展示呢，就我目前的经验来看，为了文字链接图片混排比较方便。所以既然要混排，又不能让人觉得这是webview，首先就要禁止bounces，也就是边缘滚动。方法如下：

[(UIScrollView *)[[webview subviews] objectAtIndex:0] setBounces:NO];

    webview的各种复制，全选禁止方法：

document.documentElement.style.webkitTouchCallout = “none”; //禁止弹出菜单

 

document.documentElement.style.webkitUserSelect = “none”;//禁止选中

    具体代码可以看下

http://www.minroad.com/?p=275

http://www.minroad.com/?p=266

    webview使用起来注意的问题有：

1. loadhtml相当慢，所以要做到良好的展示效果，想办法预加载吧。当然用JS也可以。
2. 使用js的时候千万要外部导入js，不然会调试到头大都调试不好。。各种转义字符
3. 对于iPhone4，记得图片尺寸要双倍。
4. webview的html里面尽量用\”而不是’ 比如<img width=\”20\”>而不是<img width=’20′>

    下面说一下正则，将链接替换的方法，用的RegexKitLite：

- (NSString *)replacePersonLink:(NSString *)_str

 

{

NSString *regexString       = @"@\\b(\\w+)\\b";

NSString *replaceWithString = @"<a href=\"at:$1\">@$1</a>";

NSString *replacedString    = NULL;

replacedString = [_str stringByReplacingOccurrencesOfRegex:regexString withString:replaceWithString];

NSLog(@"%@",replacedString);

return replacedString;

}

    提取链接的方法：

NSString *linkString = [NSString stringWithFormat:@"%@ %@",[dic getWBText],[dic getWBRetweetedText]];

 

NSString *regexString  = @"\\bhttps?://[a-zA-Z0-9\\-.]+(?::(\\d+))?(?:(?:/[a-zA-Z0-9\\-._?,'+\\&%$=~*!():@\\\\]*)+)?";

NSArray *splitArray = [linkString componentsMatchedByRegex:regexString];

    解析一个字符串的方法

NSString *regexString  = @"<a href=\"([^>]+)\" rel=\"([^>]+)\">([^>]+)</a>";

NSDictionary *urlDictionary = [searchString dictionaryByMatchingRegex:regexString

withKeysAndCaptures:@"url", 1, @"followed",2,@"source",3, NULL];

if (![[urlDictionary allKeys] containsObject:@"source"]) {

NSString *regexString  = @"<a href=\"\" rel=\"([^>]+)\">([^>]+)</a>";

urlDictionary = [searchString dictionaryByMatchingRegex:regexString

withKeysAndCaptures:@"followed",1,@"source",2, NULL];

}

    source string为”<a href=\”http://t.sina.com.cn\” rel=\”nofollow\”>新浪微博</a>” 

    利用这些，基本可以完成微博上的需求。同时可以利用JS实现渐近渐现等效果，用CSS将布局处理的更合理。不会用CSS就td吧。