混合开发中离线包(zip包)页面像原生一样跳页、滑动返回功能实现

最新推荐文章于 2022-07-25 09:30:18 发布

_小呵呵

最新推荐文章于 2022-07-25 09:30:18 发布

阅读量294

点赞数

分类专栏： ios 文章标签：离线包 push

本文链接：https://blog.csdn.net/qq_15509071/article/details/108754528

版权

ios 专栏收录该内容

234 篇文章 4 订阅

订阅专栏

实现原理

这些是图中的文字，便于搜索 再放一份


1.h5load结束后调用原生方法window.webkit.messageHandlers.getCurrentPage
DisplayDic.postMessage({'callBackName':'h5getCurrentPageDisplayDic’})告诉原生可以把数据给我了
2.原生收到后调用evaluateJavaScript：callBackName并把self.currentPageDisplayDic参数转成json回传

3.h5取值展示function h5getCurrentPageDisplayDic(dicStr){var btn2 = document.getElementById('btn2');btn2.innerHTML = dicStr.cardNo;

4.跳页时 window.webkit.messageHandlers.MyPushWindowYYY.postMessage传入参数和下一页面名字
5.原生收到后创建h5容器vc，并把参数赋值webViewVC.currentPageDisplayDic = message.body;再跳页

隐藏的原理就是：每跳一页整个功能包所有页面全部加载一遍，但是只展示指定其中一个页面，所以层级过多会出现性能问题。

效果

混合开发中离线包(zip包)页面像原生一样跳页、滑动返回功能实现

关键代码：

h5的代码包含取值，跳页传参

<!DOCTYPE html>
<html>
    <head>
        <!--解决输入框特别小的问题-->
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        
        <title>detail</title>
        <meta charset="utf-8">
            
            <style type="text/css">
                /*去除input默认样式*/
                input {-webkit-appearance:none; }
                
                .jsBtn {
                    background:#baf;
                    height: 40px;
                    margin-left: 4%;
                    margin-top: 11px;
                    padding-left:0px;
                    width: 29%;
                    outline: none;
                    -webkit-appearance:none;
                }
            
                </style>
            
            </head>
    <body onload="after()">
        <script>
            
            //全局变量
            var h5CurrentPageDisplayDic;
            
            //onload事件 页面加载后先取上页保存的数据
            function after(){
                
                window.webkit.messageHandlers.getCurrentPageDisplayDic.postMessage({'callBackName':'h5getCurrentPageDisplayDic'});
                
            }
        
        //得到本页展示数据
        function h5getCurrentPageDisplayDic(dicStr){
            h5CurrentPageDisplayDic = dicStr;
            alert(h5CurrentPageDisplayDic);
            
            alert(dicStr.cardNo);
            
            var btn2 = document.getElementById('btn2');
            var btn3 = document.getElementById('btn3');
            var btn4 = document.getElementById('btn4');
            
            btn2.innerHTML = dicStr.cardNo;
            btn3.innerHTML = dicStr.idType;
            btn4.innerHTML = dicStr.userName;
            
            
        }
        
        
        
        //onclick事件带参跳页
        function onclickMyPushWindowYYY(vid){
            window.webkit.messageHandlers.MyPushWindowYYY.postMessage({'id':vid,
                'description':'这些是结果展示需要用的参数',
                'type':'sucess',
                'des':'跳转成功',
                'nextPageName':'sucessPage'
            });
        }
        
        
        
        //解决第一次弹出中文键盘，输入框被遮挡问题
        function layoutIntoView(){
            const input = document.getElementsByTagName('input')[0];
            setTimeout(() => {
                input.scrollIntoViewIfNeeded();
            }, 100);
        }
        //监听h5键盘的return事件
        document.onkeydown = cdk;
        function cdk(){
            if(event.keyCode == 13){
                alert('点击了return');
            }
        }
        
        
        
        
            </script>
        
        
        
        <div id="main" width = "100%" height = "100%">
            
            
            
            
            <button class="jsBtn" id="btn1"  onclick="onclickMyPushWindowYYY(this.id)">MyPushWindow</button>
            
            <p>本页是第二页h5页面</p>
            
            <button class="jsBtn" id="btn2" >展示上页代来的数据</button>
            <button class="jsBtn" id="btn3" >展示上页代来的数据</button>
            <button class="jsBtn" id="btn4" >展示上页代来的数据</button>
            
            
            
            
        </div>
        
        
        
    </body>
</html>

iOS原生代码 包含传值与跳页
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
    
    NSLog(@"%@",message.body);
    NSLog(@"%@",message.frameInfo);
    NSLog(@"%@",message.name);
    
    //将本vc的参数传给h5
    if([message.name isEqualToString:@"getCurrentPageDisplayDic"]){
        
        NSDictionary *dic = message.body;
        NSString *callBackName = dic[@"callBackName"];
        
        NSString *jsonStr = [self convertToJsonData:self.currentPageDisplayDic];
        [_myWKWebView evaluateJavaScript:[NSString stringWithFormat:@"%@(%@);",callBackName,jsonStr ] completionHandler:^(NSString *str , NSError * _Nullable error) {
            NSLog(@"%@",error);
        }];
        

    }else if([message.name isEqualToString:@"MyPushWindowYYY"]){
       //原生实现h5跳页
        YYYOnlyWKWebViewController *webViewVC = [[YYYOnlyWKWebViewController alloc] init];
        webViewVC.currentPageDisplayDic = message.body;//下页需要展示的数据
        NSDictionary *dic = message.body;
        NSString *nextPageName = dic[@"nextPageName"];
        [webViewVC loadLocalHtml:nextPageName];
        [self.navigationController pushViewController:webViewVC animated:YES];

    }
    
    
}

demo代码下载地址：https://github.com/XiaoHeHe1/MyPushWindow

_小呵呵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合开发中离线包(zip包)页面像原生一样跳页、滑动返回功能实现

实现原理这些是图中的文字，便于搜索再放一份1.h5load结束后调用原生方法window.webkit.messageHandlers.getCurrentPageDisplayDic.postMessage({'callBackName':'h5getCurrentPageDisplayDic’})告诉原生可以把数据给我了2.原生收到后调用evaluateJavaScript：callBackName并把self.currentPageDisplayDic参数转成json...
复制链接

扫一扫