当Vue遇见Cordova

前言

近期完成了APP部分模块使用h5替换，学习的Vue也终于派上用场，能实现热更新，内心自然是极度喜悦??，又掌握了新技能

---

环境搭建，插件开发，自定义插件就不再介绍了，资源很多，在此仅记录遇到的问题，当然也希望能够帮助正在阅读的你

问题一 拦截ajax请求，并原生返回请求数据

初接到这个需求也是两眼懵逼，经过翻墙也算是有所了解，用到的类为NSURLProtocol，后续需要继承NSProtocol，子类实现具体方法，具体在startLoading方法实现，关键代码

    NSURLResponse *newresponse = [[NSURLResponse alloc] initWithURL:self.request.URL
                                                           MIMEType:@"application/octet-stream"
                                              expectedContentLength:data.length
                                                   textEncodingName:nil];
    //将新的response作为request对应的response
    [self.client URLProtocol:self
          didReceiveResponse:newresponse
          cacheStoragePolicy:NSURLCacheStorageNotAllowed];
    //设置request对应的 响应数据 response data
    [self.client URLProtocol:self didLoadData:data];
    //标记请求结束
    [self.client URLProtocolDidFinishLoading:self];
复制代码

问题二 拦截URL，加载本地h5资源文件

主要继承NSURLCache，子类实现具体逻辑，关键代码

   // 尽可能的提前，一般放在appdelegate
    HTURLCache *cache = [[HTURLCache alloc] init];
    [cache setMemoryCapacity:4 * 1024 * 1024];
    [cache setDiskCapacity:24 * 1024 * 1024];
    [NSURLCache setSharedURLCache:cache];
复制代码

  // 获取某一请求的缓存方法
  - (NSCachedURLResponse *)cachedResponseForRequest:(NSURLRequest *)request 

    // 读取本地资源返回
    NSString *mimeType = [HTCordovaTools getMIMETypeWithCAPIAtFilePath:filePath];
    //合成NSCachedURLResponse对象，返回
    NSURLResponse *response = [[NSURLResponse alloc] initWithURL:[request URL]
                                                        MIMEType:mimeType
                                           expectedContentLength:[fileData length]
                                                textEncodingName:nil];
    NSCachedURLResponse *cachedResponse = [[NSCachedURLResponse alloc] initWithResponse:response data:fileData];
复制代码

问题三 h5问题，iOS状态栏不能填充

经查阅：h5标准中meta是一个非常重要的标签，本次问题的修复需要应用其中一个属性viewport-fit，该属性有3个对应值：

• 1 contain，可视窗口完全包含网页内容。
• 2 cover，网页内容完全覆盖可视窗口。
• 3 auto，默认值，表现与contain一致。

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
复制代码

在设置viewport-fit=cover好后，就会发现网页上下左右都会被吃掉一些。然后我们还要引入一个css常量safe-area-inset-

• 1 safe-area-inset-top
• 2 safe-area-inset-bottom
• 3 safe-area-inset-left
• 4 safe-area-inset-right 分别表示 Safe area 和可视窗口viewport顶部，右边，左边，底部的间距，可以用于设置margin, padding, 或者绝对定位时left, top。 上面的常量写入css时需要一个函数 constant（）来解析。

header {
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);

    /* Status bar height on iOS 11.2+ */
    padding-top: env(safe-area-inset-top);
}
复制代码

问题四 禁用整个应用页面的上下拖动效果（防止拖动出现黑边）

在 config.xml 中进行如下设置

    <preference name="WebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
复制代码

GitHub github.com/Davisjy