精华内容
下载资源
问答
  • h5和原生js实现别踩白块小游戏; 利用Html5和原生js,css实现的别踩白块小游戏,功能简单,提供给csdn博友们交流使用,希望大家能关注一下我的博客,谢谢大家
  • H5和原生app哪个好?

    千次阅读 2017-04-27 14:05:46
    对于H5 和原生app的优缺点回答: 我现在项目现在用的就是:Andriod和IOS相当于容器, 主要复杂的业务逻辑还采用原生,已经有的子模块 需要快速集成进来,或者需要快速上线的模块,原生组没有人力,所有选择了集成H5...
    对于H5 和原生app的优缺点回答:
    我现在项目现在用的就是:Andriod和IOS相当于容器, 主要复杂的业务逻辑还采用原生,已经有的子模块 需要快速集成进来,或者需要快速上线的模块,原生组没有人力,所有选择了集成H5,只要写一套代码就可以实现在Andriod、ios甚至微信里运行。不过我觉得,H5比较适合活动页,交互少的页面。含有复杂的逻辑的话,特别是需要跟壳交互很多(恶心的后退逻辑,判断版本号,隐藏头部),我建议后期还是要替换成原生。
    所以:H5的优点显而易见。上的快,成本低,发布版本也不需要走审核。就这个成本问题和很快就能上问题就吸引项目老大了,再加上每次需求宣讲,产品要快点上,原生组推锅,我们只能当接盘侠了,毕竟这个模块本来就在我们这。


    H5的缺点很多,最主要是性能问题, 第一:肯定做不到原生那么流畅。动画这块,没有原生流畅,效果很难模拟,然后动画的优化(translate3d开启GPU渲染等) 本地缓存这快,不优化的话,js、css、img每次打开都要重新获取,体验差且耗流量。所以图片多的话建议缓存到本地  第二:网络问题 ,一断网就呵呵了,只能依靠壳检测网络,如果页面打开后断网,h5不知道已经断网了 第三:功能问题,很多系统的功能无法调用,必须app壳给我们提供调用的接口 ,比如硬件摄像头、陀螺仪、麦克风等硬件支持较差,频繁调用这些硬件  


    爽了原生开发者,给H5开发的困难:第一:调试困难,不像web里调试那么方便,调试工具可选fiddler。我曾经使用新特性localstorage,无奈壳不支持啊,然后各种和原生那边人联调,恶心的一笔。 最坑的是兼容性问题。各种想不到,那次最后已经调成功了,发现个缺陷坑爹,登录某个账号就会出现问题,甚至页面打不开换手机也不行,就那个账号异常,最后发现兼容性问题,页面里使用了iframe。是这样的,作文列表很长使用下拉分页,然后点击某一条进入作文全文页面,这个是iframe嵌入的,为什么选择使用iframe呢,因为壳不支持缓存页面信息,比如列表我滑到第100页,然后跳转作文全文页面,后退回来还要在这个位置,如果web端很简单,浏览器会帮你记住。但在这个H5里不行,所以我只能用iframe模拟,每次点击后请求数据再渲染iframe。问题在这,为啥有的账号就是异常呢,其它都好的,原来还要先清空再填充。按理不会存在问题的。继续说兼容性,andriod和ios很多表现不同,ios可坑了,比如事件委托。还做过h5里一个按钮的拖拽,性能差不说,在ios里位置也有问题。再比如fixed支持不好,再比如有时候一个头部莫名其妙不出现。


    我看微信和支付宝、美团里用了好多H5页面,没接触这个概念之前你可能都不知道它不是原生,因为优化的确实很棒,比如左右滑动等,在一个应用里可以集成那么多子应用。所以我建议:太复杂的用原生,活动页等用H5.
    展开全文
  • h5和原生js做的漂亮的时钟

    千次阅读 2017-12-07 22:18:16
    h5和原生js做的时钟

    用h5和原生js做的时钟

    页面部分:

    <div class="clock">
        <div class="mask"></div>
    </div>

    样式:

    body{background:#FFD741}
    .clock{
        width:300px;height:300px;
        border:20px solid #353D46;
        background:#252C34;
        border-radius: 50%;
        top:0;left:0;right:0;bottom:0;
        position:absolute;
        margin:auto;
    }
    .mask{
        background: #EE6C3D;
        width:20px;height:20px;
        border-radius: 50%;
        top:0;left:0;right:0;bottom:0;
        position:absolute;
        margin:auto;
        z-index: 1;
    }

    js部分:

    window.onload=function(){
        var clock=document.getElementsByTagName("div")[0];
        //画刻度
        function drawMark(){
            var w,h;
            for(var i=0;i<60;i++){
                var div=document.createElement("div");
    
                if(i%5==0){
                    var span=document.createElement("span");
                    w=4;h=12
                }else{
                    w=4;h=4
                }
        div.style.cssText="width:"+w+"px;height:"+h+"px;background:#DEE2EB;position:absolute;border-radius:2px;top:0;left:0;transform:translateX("+(300-w)/2+"px) rotate("+i*6+"deg);transform-origin:"+(w/2)+"px 150px"
                clock.appendChild(div)
                span.style.cssText="width:10px;height:10px;font-size:24px;color:#DEE2EB;position:absolute;border-radius:2px;top:10px;left:0;transform:translateX(145px) rotate("+(i+.5)*6+"deg);transform-origin:5px 140px"
                span.innerHTML=(i+1)/5
                clock.appendChild(span)
            }
        }
        //画指针
        function drawPointer(w,h,c,a){
            var w=w||6;
             var h=h||50;
            var c=c||"#999";
             var a=a||10
            var div=document.createElement("div");
        div.style.cssText="width:"+w+"px;height:"+h+"px;background:"+c+";position:absolute;left:"+(300/2)+"px;top:"+(150-h/2)+"px;border-radius:5px;transform:rotate("+a+"deg);transform-origin:left center"
            clock.appendChild(div);
            return div;
        }
        drawMark();
        var time=new Date();
        var h=drawPointer(75,8,"#fff",time.getHours()*30+time.getMinutes()*6/12-90);
        var m=drawPointer(100,6,"#fff",time.getMinutes()*6-90);
        var s=drawPointer(130,4,"#EE6C3D",time.getSeconds()*6-90);
        setInterval(function(){
            var time=new Date();
            h.style.transform="rotate("+(time.getHours()*30+time.getMinutes()*6/12-90)+"deg)";
            m.style.transform="rotate("+(time.getMinutes()*6-90)+"deg)"
            s.style.transform="rotate("+(time.getSeconds()*6-90)+"deg)"
        },1000)
    
    
    
        var hours=document.getElementsByTagName("select")[0].value;
        var minutes=document.getElementsByTagName("select")[1].value;
        var seconds=document.getElementsByTagName("select")[2].value;
        function setClock(){
            var time = new Date();
            var th = time.getHours();
            var tm = time.getMinutes();
            var ts = time.getSeconds();
            var d1=(th>=hours)&&(tm>=minutes)&&(ts>=seconds);
            var d2=(th>=hours)&&(tm>=minutes);
            var d3=th>hours;
            if(d1||d2||d3){
                clock.style.animation="shake 1s linear alternate infinite running"
            }else{
                clock.style.animation=""
            }
        }
    }

    一个漂亮的时钟就完成了,结果如图:
    这里写图片描述

    展开全文
  • 一、APP内嵌H5和原生的区别 1、原生的页面运行速度快,比较流畅。H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿。 2、H5页面的很多交互都没有原生的好,比如弹层、输入时候的页面滑动 等。H5的效果...

    一、APP内嵌H5和原生的区别

    1、原生的页面运行速度快,比较流畅。
    H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿。

    2、H5页面的很多交互都没有原生的好,比如弹层、输入时候的页面滑动 等。H5的效果相对比较low,没有原生的好看,也没有原生默认的动画等效果。

    3、原生APP修改页面要重新发布,等待审核(现在iOS的审核速度已经提高到1天到2天)。
    H5页面的修改 可以随时上线,不用等待审核。

    4、H5跨平台,iOS和android需要各自开发。相对原生,H5开发成本低。

    5、原生APP能很好的使用设备底层功能,如摄像头、方向传感器、重力传感器等。H5有所限制。
    比如android里的H5对摄像头和方向传感器就需要再多做一些处理。再比如你不想用系统默认的手机相册样式,就要用原生来开发了。

    6、H5过度依赖于网络,网络不好的时候卡到不行,并且刚打开看到的都是一个空白页面。
    默认的H5页面每次打开都会重新请求页面(可以做缓存,不过基本很少有做的)。
    H5比原生更费流量,H5除了加载html还要加载js、css这些资源文件,相比原生网络加载速度慢。

    二、APP原生和H5页面如何分辨

    1、android手机可以修改设置:  设置—》开发者选项—》显示布局边界(Show layout bounds) 。
    这样就能看到控件的布局了,如果包含图片、文字等信息的一整块区域只有一个边框,应该就是H5实现的。
    iOS在真机上没有这个选项。一般开发人员可以 用mac上的Reveal软件 来查看APP的布局,或者用网络抓包来分析是否为H5页面。

    2、新打开页面,如果页面是个空页面,基本就是H5页面。原生的页面一般都会有一些控件提前放在页面中。
    如果空页面 上拉还有大块黑色的背景,就是H5页面,不过现在很多开发人员已经做了优化,不会显示黑色的大色斑。

    3、关闭网络后,如果是整个的空白页,这个基本就是H5页面。如何页面还有控件基本就是原生的。

    4、下拉刷新的时候H5会有一个明显的刷新现象,比如闪现、导航栏标题消失等。
    原生的下拉刷新没有明显现象,很平滑。

    5、如果开发人员没有禁用掉WebView的长按手势,会弹出一个系统默认的快捷菜单:拷贝、查询、添加、分享。这个页面就是H5页面。

    6、如果打开一个页面顶部有个进度条,就是H5页面。当然很多H5页面也没有加进度条。

    7、页面的底部导航  在上拉的时候 如果跟着一起滚动,就是H5页面。

    8、H5弹框、页面跳转等和原生的效果都不一样,可以仔细看下。

    9、H5页面点击 输入框,弹出的键盘上面一般都有“完成”按钮,原生的没有。

    三、APP原生和H5什么时候使用

    1、核心需求 要用原生,比如淘宝里的产品详情页、订单页、支付页等。
    非核心需求 可以考虑用H5,遇到功能调整,可以快速发布。比如淘宝首页的特色好货、热门市场等栏目 需要经常变动,用H5来做比较灵活。

    2、阶段性的营销活动页面,特别是功能、布局等经常需要修改的需求,可以用H5来做。比如节日的有奖活动页面,经常需要调整,用H5做会更灵活。

    转载于:https://www.cnblogs.com/wanghaihong200/p/9128286.html

    展开全文
  • 一、APP内嵌H5和原生的区别 1、原生的页面运行速度快,比较流畅。 H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿。 2、H5页面的很多交互都没有原生的好,比如弹层、输入时候的页面滑动 等。H5的效果...

    一、APP内嵌H5和原生的区别

    1、原生的页面运行速度快,比较流畅。
    H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿。

    2、H5页面的很多交互都没有原生的好,比如弹层、输入时候的页面滑动 等。H5的效果相对比较low,没有原生的好看,也没有原生默认的动画等效果。

    3、原生APP修改页面要重新发布,等待审核(现在iOS的审核速度已经提高到1天到2天)。
    H5页面的修改 可以随时上线,不用等待审核。

    4、H5跨平台,iOS和android需要各自开发。相对原生,H5开发成本低。

    5、原生APP能很好的使用设备底层功能,如摄像头、方向传感器、重力传感器等。H5有所限制。
    比如android里的H5对摄像头和方向传感器就需要再多做一些处理。再比如你不想用系统默认的手机相册样式,就要用原生来开发了。

    6、H5过度依赖于网络,网络不好的时候卡到不行,并且刚打开看到的都是一个空白页面。
    默认的H5页面每次打开都会重新请求页面(可以做缓存,不过基本很少有做的)。
    H5比原生更费流量,H5除了加载html还要加载js、css这些资源文件,相比原生网络加载速度慢。

    二、APP原生和H5页面如何分辨

    1、android手机可以修改设置:  设置—》开发者选项—》显示布局边界(Show layout bounds) 。
    这样就能看到控件的布局了,如果包含图片、文字等信息的一整块区域只有一个边框,应该就是H5实现的。
    iOS在真机上没有这个选项。一般开发人员可以 用mac上的Reveal软件 来查看APP的布局,或者用网络抓包来分析是否为H5页面。

    2、新打开页面,如果页面是个空页面,基本就是H5页面。原生的页面一般都会有一些控件提前放在页面中。
    如果空页面 上拉还有大块黑色的背景,就是H5页面,不过现在很多开发人员已经做了优化,不会显示黑色的大色斑。

    3、关闭网络后,如果是整个的空白页,这个基本就是H5页面。如何页面还有控件基本就是原生的。

    4、下拉刷新的时候H5会有一个明显的刷新现象,比如闪现、导航栏标题消失等。
    原生的下拉刷新没有明显现象,很平滑。

    5、如果开发人员没有禁用掉WebView的长按手势,会弹出一个系统默认的快捷菜单:拷贝、查询、添加、分享。这个页面就是H5页面。

    6、如果打开一个页面顶部有个进度条,就是H5页面。当然很多H5页面也没有加进度条。

    7、页面的底部导航  在上拉的时候 如果跟着一起滚动,就是H5页面。

    8、H5弹框、页面跳转等和原生的效果都不一样,可以仔细看下。

    9、H5页面点击 输入框,弹出的键盘上面一般都有“完成”按钮,原生的没有。

    三、APP原生和H5什么时候使用

    1、核心需求 要用原生,比如淘宝里的产品详情页、订单页、支付页等。
    非核心需求 可以考虑用H5,遇到功能调整,可以快速发布。比如淘宝首页的特色好货、热门市场等栏目 需要经常变动,用H5来做比较灵活。

    2、阶段性的营销活动页面,特别是功能、布局等经常需要修改的需求,可以用H5来做。比如节日的有奖活动页面,经常需要调整,用H5做会更灵活。

    四、现在常用的方案

    1、有四种方式来做APP:Web App(纯Web页面)、Hybrid App(web和原生混合开发)、 Native App(原生APP)、Weex和React Native(用类似js、html来写原生效果的页面)。
    2、现在没有全部用H5来做APP的,交互体验太差。
    3、Hybrid App 前几年火过,其努力去打造类似于Native App 的体验,但仍受限于技术,网速,等等很多因素。并不是很完美。
    4、现在很多大公司在尝试用Weex和React Native或者DeviceOne 来实现一些经常改动的页面或者活动营销页面,可以随时发布,交互效果还和原生的一样。其中Weex站在了React Native这个巨人的肩膀上,借鉴并做了更好的尝试,我个人更建议用Weex。

    展开全文
  • h5页面嵌入到了原生app内, 所以需要接收原生app的方法,以及向原生app传值 解决办法 1.原生app调用h5的方法 showSearch是h5代码中控制是否显示popup层的方法名,直接在h5中: //js与原生app交互 window.showSearch...
  • jsBridge H5和原生交互

    2019-12-17 11:31:03
    js调用原生约定方法名encyclopedia 注意需要判断设备类型 然后调用方法如下 ios:window.webkit.messageHandlers.encyclopedia.postMessage({}); android:window.android.encyclopedia(); 原生调用js 方法 ...
  • H5和原生App的区别

    2020-04-26 10:32:26
    H5 原生App 运行环境 浏览器 基于操作系统 例如:安卓、IOS 优点 1. 不需要下载安装 2. 几乎不占用手机存储空间 3. 方便快捷,点开即用 4. 传播成本低 1. 流畅度高,体验好2. 系统功能完全契合,功能强大 ...
  • h5和原生java交互

    千次阅读 2017-10-11 14:49:53
    安卓混合开发——原生Java和H5交互,保证你一看就懂! <!-- 作者区域 --> <img src="//upload.jianshu.io/users/upload_avatars/3036523/910684bd-f25b-4
  • h5和原生的交互

    2018-11-07 14:11:03
    button 按钮与原生的交互 &lt;/button&gt; var btn = document.getElementById("subBtn"); var u = navigator.userAgent; btn.onclick = function() { transmit('bigPay', '', ''); } fu....
  • H5页面调用原生页面,首选JavaScriptCore,JSContext搭配JSExport: - (void)setupJsContent { //获取当前JS环境 JSContext *_content = [self.webView valueForKeyPath:@"documentView.webView.mainFrame....
  • H5和原生APP做交互

    2019-02-20 16:58:41
    WebViewJavascriptBridge是H5与app交互的一个第三方插件 1、在当前h5页面引入以下代码 function setupWebViewJavascriptBridge(callback) {  if (window.WebViewJavascriptBridge) { return callback...
  • H5和原生开发的区别

    千次阅读 2019-02-19 09:21:28
    自从接触APP也有四年多了,这里我想简单的介绍下这两者的区别程序猿、企业应如何正确又快速的做出此款APP的制作时涉及的技术方面的决定。 以下我将以最通俗的说法分7点讲述: 一、概念 a) H5:即Html5,接触过...
  • H5和原生APP之间的区别

    千次阅读 2018-10-08 11:03:15
    产品上线后,带着各种坑后的总结原因方发现很多人都说纯H5 APP一次编写就能支持androidIOS两种不同的APP,大大降低了开发成本。可实际的工作中却发现并不是如此,既不省事儿,又有很多BUG,而且各种css的兼容性的....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,887
精华内容 754
关键字:

h5和原生