ios基于webview混合开发偶现页面刷新问题

一、问题场景

App 打开,放置在测试中心,偶尔会出现从B页面刷新跳转到A页面。

二、问题分析

1、刚开始怀疑是否前端业务应用中有定时器,或者因为token 失效会进行跳转处理,和前端确认后没有此类代码。并且此问题在Web和 Android 端都没有,苹果端也只在那一台手机上出现。

2、fiddler 抓包

根据 全网最详细,Fiddler抓包实战 - 手机APP端https请求(超详细)_fiddler抓包手机app-CSDN博客

进行fiddler 配置和手机端代理配置,刚开始手机端使用默认的8888 端口总是无法上网,后续将fiddler 的默认端口换成了 8088 , 手机端同样配置,似乎正常了。

接着又出现:

!SecureClientPipeDirect failed: System.IO.IOException 由于远程方已关闭传输流,身份验证失败。 for pipe (CN=gateway.icloud.com.cn, O=DO_NOT_TRUST, OU=Created by http://www.fiddler2.com)
17:19:34:2393 HTTPSLint> Warning: ClientHello record was 508 bytes long. Some servers have problems with ClientHello's greater than 255

想了想是不是换了端口,这个fiddler 的ssl 证书需要重新安装更新,并且手机端也需要安装对应的证书进行信任。

这样正常可以抓包后,其实还是遇到了某些接口无法正常抓到的问题

此时可能是因为调用的接口中有对证书进 验证,发现证书的域名可能和实际的fiddler 这个证书不一致,从而导致接口返回失败造成的。这种情况的抓包还不知道要怎么处理,不过目前没有时间关注这个问题,最后确实抓到了一次页面刷新,看到的接口请求地址都是首页。

3、为了排除问题,刚开始想到的是在所有webview 有可能reload 的地方加入日志进行处理,并记录到手机沙盒里面:

#import "WebViewLogger.h"

@implementation WebViewLogger


+ (void)logWebRequest:(NSURLRequest *)request from:(NSString *)sourcePage {
    NSString *logStr = @"";
    if(nil == request){
        logStr = [NSString stringWithFormat:@"[%@] %@ | From: %@ | URL: %@\n",
                            [self currentTimeString],
                            @"非请求",
                            sourcePage,
                            request.URL.absoluteString];
    }else{
        logStr = [NSString stringWithFormat:@"[%@] %@ | From: %@ | URL: %@\n",
                            [self currentTimeString],
                            request.HTTPMethod,
                            sourcePage,
                            request.URL.absoluteString];
    }
    NSLog(@"=====debug %@", logStr);
    [self writeLogToFile:logStr];
}

+ (NSString *)currentTimeString {
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateFormat:@"yyyy-MM-dd HH:mm:ss.SSS"];
    return [formatter stringFromDate:[NSDate date]];
}

+ (void)writeLogToFile:(NSString *)log {
    NSString *filePath = [self logFilePath];
    NSFileManager *fileManager = [NSFileManager defaultManager];
    
    if (![fileManager fileExistsAtPath:filePath]) {
        [fileManager createFileAtPath:filePath contents:nil attributes:nil];
    }
    
    NSFileHandle *fileHandle = [NSFileHandle fileHandleForWritingAtPath:filePath];
    [fileHandle seekToEndOfFile];
    [fileHandle writeData:[log dataUsingEncoding:NSUTF8StringEncoding]];
    [fileHandle closeFile];
}

+ (NSString *)logFilePath {
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDir = [paths firstObject];
    return [documentsDir stringByAppendingPathComponent:@"webview_requests.log"];
}

@end

但是复现问题后发现都是正常加载逻辑,没有任何异常地方会去重新刷新。然后自己还在某个地方手机添加了一次reload 的操作,抓取日志后,发现即使reload 也不会到首页,而是带有菜单路由的当前页面,所以排除是异常导致的reload 逻辑造成此问题。

4、由于问题复现的场景只在测试中心,还是怀疑到网络来了,无心中增加了网络检测的回调日志,发现果然有输出:

在网络变化十秒钟之后就出现了重载的日志。

三、破局

经过如上分析后,慢慢定位就是网络变化导致的重载,然后想起代码中之前有一个适配App首次使用网络授权的处理逻辑。
iOS 10 的坑:新机首次安装 app,请求网络权限“是否允许使用数据”(转) - 那一抹风情 - 博客园

 

 CTCellularData *cellularData = [[CTCellularData alloc]init];
 CTCellularDataRestrictedState state = cellularData.restrictedState;
 if(state == kCTCellularDataNotRestricted){
}else{
 cellularData.cellularDataRestrictionDidUpdateNotifier = ^(CTCellularDataRestrictedState state) {
 if (state == kCTCellularDataRestricted) {
                       NSLog(@"networkAuthStatus 用户选择网络使用受限制");
                   } else if (state == kCTCellularDataNotRestricted) {
                       NSLog(@"networkAuthStatus 用户选择网络使用不受限制");
                   } else {
                       NSLog(@"networkAuthStatus 网络权限使用未知");
                   }
                   dispatch_async(dispatch_get_main_queue(), ^{
                       [self processViewLoadDependNetwork];
                   });
               };
}

而测试中心的那台手机在那个办公室就经常会触发这个回调,当手动开关蜂窝网络的时候也能够复现,但是具体那哪些场景会触发这个回调,这个还是不太清楚,后续让测试复测,发现关闭蜂窝网络,wifi 变化也可能会触发这个回调,只能说这个网络授权的适配还是挺让折磨人的,一个问题又耗费了将近两天的时间来分析。 

<think>好的,我在需要解决用户的问题,关于在uni-app中使用mui框架时,webview页面无效果的情况。首先,我得回忆一下uni-app和mui框架的相关知识。 用户提到mui框架在webview中没有效果,可能的原因有哪些呢?首先,mui是HTML5框架,通常用于传统的移动网页开发,而uni-app是基于Vue.js的跨平台框架,可能两者的运行环境有差异。比如,mui可能依赖于原生的DOM操作,而uni-app使用虚拟DOM,可能不兼容。 然后,我需要考虑uni-app中webview的使用方式。根据引用[1],uni-app项目在iOS上使用WKWebview,崩溃后可以自动恢复。但用户的问题可能不是崩溃,而是mui的功能没生效。可能是在webview中加载的页面没有正确引入mui的库,或者mui的JS在uni-app环境下无法正常运行。 另外,引用[3]提到Hybrid App的特点,uni-app属于混合应用,而mui可能更适合纯Web App。两者结合时可能出兼容性问题。比如,mui的事件绑定可能依赖于浏览器环境,而uni-app的webview可能有不同的上下文。 接下来,可能的解决方案包括检查mui的资源是否正确加载,确保JS和CSS文件路径正确。同时,可能需要处理webview的通信机制,比如通过uni-app的API与webview内的页面交互。此外,考虑使用uni-app原生组件替代mui的功能,或者将mui相关代码迁移到Vue组件中。 用户可能需要修改webview的配置,比如在manifest.json中调整webview设置。另外,测试不同平台下的表,因为iOS和Android的webview行为可能不同。如果问题依然存在,可能需要联系uni-app官方支持,或者查阅社区是否有类似问题。 最后,生成相关的问题,比如mui与uni-app的兼容性,webview通信方法,或者替代框架的选择。需要确保回答结构清晰,步骤明确,帮助用户逐步排查问题。</think>### 解决方案:uniapp中mui框架在webview中无效果 1. **检查mui资源加载** - 确保webview加载的HTML页面中正确引入了mui的JS和CSS文件,路径需使用绝对路径或符合uni-app静态资源规则的相对路径。 - 示例代码: ```html <script src="/static/mui/mui.min.js"></script> <link rel="stylesheet" href="/static/mui/mui.min.css"> ``` 2. **验证webview上下文兼容性** - mui依赖传统DOM操作(如`document.getElementById`),而uni-app默认使用Vue的虚拟DOM。若在uni-app的Vue页面中直接使用mui,可能因DOM操作冲突导致失效。 - **建议**:将需要mui功能的页面单独封装为纯HTML文件,通过`<web-view>`组件加载[^1]。 3. **配置webview通信机制** - 若需uni-app与webview页面交互,需通过`uni.postMessage`和`uni.onMessage`实双向通信。 - 示例: ```javascript // uni-app端 const webView = this.$refs.webview; webView.postMessage({ action: 'init' }); // HTML页面内 document.addEventListener('message', (e) => { if (e.data.action === 'init') { mui.init(); // 手动初始化mui } }); ``` 4. **替代方案:使用uni-app原生组件** - 若mui功能与uni-app组件冲突(如下拉新、侧滑导航),建议改用uni-app原生组件(如`<scroll-view>`、`<swiper>`)或uni-ui扩展库[^3]。 5. **检查平台差异** - iOS的WKWebview对某些JS API限制更严格,需在`manifest.json`中配置: ```json "app-plus": { "webview": { "wkHttpAllowAccess": true // 允许跨域请求 } } ``` --- ### 相关问题 1. 如何实uni-app与webview页面的双向通信? 2. uni-app中WKWebview和UIWebview的性能差异如何? 3. 哪些前端框架更适合与uni-app集成? 4. mui框架在Hybrid App中的兼容性问题有哪些? --- ### 关键点总结 - **资源路径**:静态文件需放在`static`目录并通过正确路径引用。 - **DOM操作隔离**:避免在Vue页面直接操作DOM,需通过webview分离逻辑[^1]。 - **通信机制**:使用uni-app API实跨上下文交互,确保功能触发时机正确。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值