iOS WKWebView下的Hybrid开发

前言

最近闲来无事，翻阅了一些iOS Hybrid开发，感觉都好厉害的样子，现在大型APP都在采用此技术，以淘宝为首，于是动手操作一番

正文

Hybrid优势：

• 跨平台，开发效率高，节约开发成本
• 业务快速拓展和迭代
• 及时修复线上 Bug，不需发版

但是 Hybrid 也有自己的劣势，比如体验上肯定比不了 Native，而且对于一个 Native 开发者而言要理解前后端的技术，对开发者的要求较高，但我相信这是好事儿~~

好啦，上面是我https://www.jianshu.com/p/7e6d099c8022 copy过来的；但我想告诉大家的事儿，只要缓存做得好，体验和原生相比并不差

test.gif

---

说一下我的大体思路：

• 一级页面最好都是原生，运行APP，在合适的时机（如几秒钟内没有网络请求）像后台发出请求得到压缩包，解压文件并存入沙盒Caches
• 第一次运行软件，将所有的压缩包URL连接按照优先级排序存入数组，在合适的时机依次请求，如果进入某Web页面但没有对应缓存，则请求相应压缩包并处理，
• 每天运行APP时，由后台给出今天有哪些新增H5页面或需要更新的页面（根据公司需求定制不同策略）
• 使用WebKit，优势--内存占用小、速度快、原生和JS交互更清晰

为了效果更佳，导航栏要用原生，且不使用页面跳转进度条（话说缓存数据没有这个值），让用户认为页面都是原生，提升产品体验感。Web的三种不同页面跳转方式：

• Web->原生页面
• Web->新Web页面
• Web内部页面跳转（尽量不使用，缓存HTML等文件换成第二种方式）

做了一个粗糙的demo，效果如上图，地址：github地址
demo中压缩包是本地导入，实际工程中不能这样做，否则失去了web页面的灵活性
在BaseWebViewController中创建WKWebView对象，子类FirstViewController、SecondViewController调用并赋值，需要注意WKWebView的加载方法

    if ([[UIDevice currentDevice].systemVersion floatValue] >= 9.0) {
        // 文件地址
        NSURL *fileUrl = [NSURL fileURLWithPath:filePath];
        // 文件夹地址
        NSURL *direUrl = [NSURL fileURLWithPath:p1];
        [self.webView loadFileURL:fileUrl allowingReadAccessToURL:direUrl];
        
    }else{
        
        NSURL *fileURL = [self fileURLForBuggyWKWebView8:[NSURL fileURLWithPath:filePath]];
        NSURLRequest *request = [NSURLRequest requestWithURL:fileURL];
        [self.webView loadRequest:request];
    }

有很多同学说页面没有css效果，我之前也遇到了这个问题，解决方案：地址