精华内容
参与话题
问答
  • 混合式开发

    2019-03-17 17:44:00
    现如今APP开发有两个主流的方向:原生App 以及移动Web App。 什么是原生app(Native app)? 在智能手机上运行的App应用程序有NativeAPP(基于本地操作系统运行)和Web APP(基于手机浏览器运行),其中Native ...

    现如今APP开发有两个主流的方向:原生App 以及移动Web App。

    什么是原生app(Native app)?

     

    在智能手机上运行的App应用程序有NativeAPP(基于本地操作系统运行)和Web APP(基于手机浏览器运行),其中Native App就是原生App的意思,所以原生App开发也就是指基于本地操作系统的App开发服务。如今市面上多数的APP软件开发都是使用的原生程序编写的应用程序,也就是说大部分的手机APP属于原生APP应用软件。

     

    原生APP访问和兼容的能力也比较好,可以支持在线或者离线消息推送或是进行本地资源访问,以及摄像、拨号、蓝牙、功能的调取。原生APP开发有许多的优势,如原生APP是针对不同的平台为用户提供不同的体验、原生应用可以节约宽带成本、访问本地资源、打开的速度更快并为用户提供最佳的用户体验和优质的用户界面等。

     

    什么是web app?

    Web App是一种框架型APP开发模式(HTML5 APP 框架开发模式),具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部分构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。

     

     

    原生app和web app区别?

    开发方面:

    原生APP:每一种移动操作系统都需要独立的开发项目,iphone版本、Ipad版本、安卓版本。每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)等等3.需要使用各自的软件开发包,开发工具以及各自的控件。开发成本高、开发速度慢、维护成本高。三个平台(IOS、安卓、windows)的规则、推广、运营都不相同。官方应用商店对APP上线审核流程比较复杂而且很慢,会严重影响APP的发布上线。

     

    Web App :因为运行在移动设备的浏览器上,所以只需要一个开发项目。可以通过HTML、 CSS或者JavaScript来进行Web APP的开发。开发成本低、开发速度快。

     

    功能方面:

    原生App:原生APP是一个系统性的应用程序,可以类比于电脑上的软件。原生app可以调用移动终端的硬件设备, 比如:麦克风、摄像头、短信、GPS、蓝牙、重力感应等。实现功能丰富

    Web App:Web APP可以类比于电脑上的网页。Web APP更多是页面展示类的APP。只能使用有限的移动硬件设备功能。更多用于页面展示,侧重于简单的交互,无法使用很多硬件设备独特的功能。

     

    应用安装使用方面:

    原生App:需要通过应用商店将原生app下载到手机上或移动终端上。以独立的应用程序运行

    用户必须手动去下载并安装这些原生App,原生应用可以节约宽带成本,可以访问本地资源、缓存。

    Web App:通过移动设备上的浏览器访问,软件更新只需要更新服务器就够了,用户层面不需要做任何操作。不需要安装客户端,可以节省手机终端的内存空间。

     

    版本控制方面:

    原生App:用户可以自由地选择是否更新软件版本,所以会出现不同用户同时使用不同版本的情况。同时也会导致维护成本比较高。使用旧版本的用户无法体验新版本的完整功能。

    Web App:所有的用户都是用同样的版本,所有用户获得的功能都是相同的。版本更新比较方便,直接在服务器侧更新数据即可。一个功能做好了就能上线,一天更新几十次都毫无压力。如果客户端只是个浏览器,那一切都会变得很简单。另外web统一性高,跨平台适用时开发量少。由于其入口不明显(浏览器导航或者随意点击链接进入),让用户记住的门槛也随之拔高,每次推广导入的流量都可能沦为一次性努力,用户留存率低。

     

    加载速度方面:

    原生App:原生APP由“云服务器数据+APP应用客户端”两部分构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。访问的时候,不需要重新下载加载应用页面框架,只需要加载数据即可。所以加载速度更快,页面响应更快。

    Web App:而Web APP打开一个页面,都需重新加载页面的所有元素,访问速度受手机终端性能和网络环境的限制,导致加载速度慢,而且操作频繁容易卡死。

     

     

    -----------------------------

    总之  原生App偏向于交互,注重用户体验(导航切换、勾选选项、图片、视频等操作),Web APP偏向与浏览和简单的交互。 一些功能需要访问硬件(摄像头、传感器等),使用原生App, Web APP用于信息展示。 成本有限时,核心的功能使用原生APP,周边辅助的功能可以使用Web App。

    现状:比较流行的方法就是将原生App 和Web App进行融合,就是说应用大的框架是原生的,其他详细的内容就通过网页封装,这样做的好处就是在方便更新的同时,也能保证核心功能的交互体验。

      

      

     

    转载于:https://www.cnblogs.com/sxxya/p/10547965.html

    展开全文
  • 使用混合式开发APP的不在少数。 但是想要集成你们的产品,就基本只有放弃。 因为像uniapp,apicloud这种两种比较常用的混合式开发,必须把原生做成一个library使用。 而野火目前直接做成library是...
  • 原生开发、H5开发和混合式开发的区别 目前市场上主流的APP分三种: 1.原生APP 2.Web APP(即H5) 3.混合APP,还有flutter等 三种开发模式对比如下: 1.原生开发(Native App开发) 优点:可访问一台手机的所有功能,...

    原生开发、H5开发和混合式开发的区别

    目前市场上主流的APP分三种:
    1.原生APP
    2.Web APP(即H5)
    3.混合APP,还有flutter等

    三种开发模式对比如下:

    1.原生开发(Native App开发)

    优点:可访问一台手机的所有功能,比如GPS、摄像头、扬声器等,可实现最齐全的功能;
    运行速度快、性能高,用户体验最佳;
    支持大量图形、动画的计算,不卡顿,随着CPU的优秀,反应和速度越来越快;
    兼容性高,每个代码经过设计,一般不会出现闪退,还能抵御和防止病毒或漏洞;
    比较快捷的使用设备端提供的接口,处理速度快。
    缺点:开发时间长,制作费昂贵,成本高;
    可移植性较差,一款原生的App,需要再安卓和苹果系统各自开发,同样的需求需要写两套逻辑或代码;
    内容受限制(App Store限制)
    必须等用户下载才可以使用,每次新版本都需要用户重新下载或更新
    因为开发周期长,会造成需求迭代较慢,上线慢

    2.Web APP(h5开发)

    可以在手机端浏览器里打开的网页就称为webapp。Web技术本身需要浏览器的支持才可进行展示和交互,
    因此主要用到的技术是html、css、js或vue、react等框架语言。
    优点:开发成本低,开发周期短;
    无平台内容的限制;
    支持设备广,可跨平台,一套代码可以同时运行在安卓、IOS、windows上运行
    用户可以直接看到或感知最新版本,即无需用户手动更新或下载
    缺点:由于本身技术的限制,H5还不能直接访问设备的一些硬件条件(摄像头、麦克风等);
    体验和性能较原生有很大的局限性;
    对联网要求高,无网的情况下无法做任何操作;
    页面切换的流畅性较差,多动画下卡顿,用户体验与原生比较差;
    图片和动画的支持性不高;

    3.混合开发—Hybrid App开发

    混合开发(Hybrid App开发),是指在开发一款App产品的时候,为了提高效率、节省成本而利用原生与
    H5的开发技术的混合应用。

    优点:开发效率高、节约时间成本。同一套代码在安卓或IOS基本上通用;
    更新和部署比较方便,每次升级不需要上传到App Store或应用市场审批;
    代码维护方便、版本更新快;
    比web的实现功能会多一些。
    缺点:功能界面无法自定义,内容都是通过设计固定好的;
    对网络要求高,每个页面都需要重新下载,缓冲时间长,容易给用户造成等待的反感;
    安全性较低。

    在混合式开发中,如何辨别出原生和H5

    1. 看加载方式—如果再打开新页面时,导航栏下面有一条加载的线的话,这个页面多半就是H5页面,反之则
      是原生页面。微信里打开我们的H5页面常见有个绿色的加载线条。
    2. 看app顶部导航栏是否会有关闭的按钮—这个判断在某些场景可以进行判断,一般app内原生页面不会添加
      关闭按钮(除非设计需要)
    3. 看布局(只限安卓手机)—可以打开手机的>开发者选项>显示布局边界,此时可以看到,一般H5的页面布局
      是一整块,而原生空间的布局是密密麻麻的
    4. 看复制文章的提示—此判断方式不太准确,只可作为参考,比如有些H5的页面没有对复制选择功能做屏蔽的话,可以发现在
      文章页面长按页面,会出现文字选择、粘贴
    5. 看断网情况—把手机的网络断掉,然后打开页面。还可以正常显示东西的一般是原生页面。显示404或错误页面的
      是html页面。原生部分页面是可以继续正常打开的,打不开的原生页面和H5报错信息也是有区别的
    6. 下拉页面的时候,若在下拉处显示网址提供方的大部分都是H5

    总结与思考:

    三种方式各有优缺点,选择合适自己团队的,选择适合自己需求、成本、时间的,才是最好的方案,就像技术本身没有绝对的好坏之分,只有不断锤炼,让每一种技术都发挥出最大的作用,才是一个开发者或团队的最佳使命。

    展开全文
  • hybrid混合式开发学习

    2019-03-15 09:38:10
    优势:可快速迭代更新,无须App审核体验流畅,毕竟是原生减少开发成本,客户端和前端公用一套代码理解webview一个小型的浏览器内核,可以加载html网页,显示网页,是app中的一个组件具体实现前端做好静态页面(html...
    hybrid 即客户端app里面嵌入h5页面,客户端和前端进行交互。

    优势:

    可快速迭代更新,无须App审核

    体验流畅,毕竟是原生

    减少开发成本,客户端和前端公用一套代码


    理解webview

    一个小型的浏览器内核,可以加载html网页,显示网页,是app中的一个组件

    具体实现

    前端做好静态页面(html、js、css),将文件交给客户端,一般是放在服务器上,提供一个服务器地址给客户端

    客户端拿到前端静态页面、以文件的形式存储在app中

    客户端在webview中使用file协议加载静态页面


    hybrid 更新上线流程

    主要打开app,回去服务端动态进行版本号对比,如果不一样,app会弹出提示用户更新,下载最新的包

    前端干的活,维护服务端更新的静态资源包(html js css)

    前端  服务端 客户端 三者协调


    前端 客户端 如何通信

    html  js  css  在手机上做的事情很有限,很多功能都需要app原生来做

    微信公开开放给开发者的客户端能力,让js有能力操作手机的功能(js_sdk)

    前端开发只需要调动js即可


    比如一个新闻详情页面,前端如何获取内容

    不能用ajax获取,第一跨域,第二速度慢

    客户端获取新闻内容,前端js回调拿到内容再渲染

    客户端可以在点击的同时获取数据(prefetch)

    js必须在html页面渲染完成才能通过ajax获取数据


    schema 协议

    重用的协议有 http  https ftp SMTP


    file协议:本地文件,快

    http(s)协议:网络加载、慢

    前端调用客户端能力 - schema协议

    协议规则:


    微信的协议 (前面的协议名称可以自定义)

    定义好以后,前端的js就可以和后端进行通信了


    var iframe = docuemnt.createElement('iframe')
    iframe.style.display = 'none'
    iframe.src='weixin://dl/scan'   //iframe 会访问微信的scan功能
    var body = document.body || document.getElementByTagName('body')
    body.appendChildren(iframe)
    setTimeOut( () => {
        body.removeChildren(iframe)
        iframe = null
    })
    
    //如果要加上参数 和 回调函数 callBack,那么就这样写
    window['_weixin_scan_callback'] = function(result){
        alert(result)
    }
    iframe.src='weixin://dl/scan?k1=v1&k2=v2&k3=v3&callback=_weixin_scan_callback'
    
    代码演示:客户端拿到参数执行对应的函数
    function invokeScan() {
        window['_invoke_scan_callback_'] = function (result) {
            alert(result)
        }
    
        var iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        // iframe.src = 'weixin://dl/scan'  // 重要!
        iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&k3=v3&callback=_invoke_scan_callback_'
        var body = document.body
        body.appendChild(iframe)
        setTimeout(function () {
            body.removeChild(iframe)
            iframe = null
        })
    }复制代码


    schema协议调用封装成native.js

    (function (window, undefined) {
    
        // 调用 schema 的封装
        function _invoke(action, data, callback) {
            // 拼装 schema 协议
            var schema = 'myapp://utils/' + action
    
            // 拼接参数
            schema += '?a=a'
            var key
            for (key in data) {
                if (data.hasOwnProperty(key)) {
                    schema += '&' + key+'='+ data[key]
                }
            }
    
            // 处理 callback
            var callbackName = ''
            if (typeof callback === 'string') {
                callbackName = callback
            } else {
                callbackName = action + Date.now()
                window[callbackName] = callback
            }
            schema += 'callback=callbackName'
    
            // 触发
            var iframe = document.createElement('iframe')
            iframe.style.display = 'none'
            iframe.src = schema  // 重要!
            var body = document.body
            body.appendChild(iframe)
            setTimeout(function () {
                body.removeChild(iframe)
                iframe = null
            })
        }
    
        // 暴露到全局变量
        window.invoke = {
            share: function (data, callback) {
                _invoke('share', data, callback)
            },
            scan: function (data, callback) {
                _invoke('scan', data, callback)
            }
            login: function (data, callback) {
                _invoke('login', data, callback)
            }
        }
    
    })(window)复制代码

    js代码调用客户端能力

    document.getElementById('btn1').addEventListener('click', function () {
        // invokeScan()
        window.invoke.scan({}, function () {})
    })
    document.getElementById('btn2').addEventListener('click', function () {
        window.invoke.share({
            title: 'xxx',
            content: 'yyy'
        }, function (result) {
            if (result.errno === 0) {
                alert('分享成功')
            } else {
                alert(result.message)
            }
        })
    })复制代码

    将以上封装的代码打包,叫做native.js,内置到客户端

    客户端每次启动webview,都默认执行native.js

    本地加载,免去网络加载的时间,速度更快

    本地加载,没有网络请求,黑客看不到scheme协议、更安全


    总结

    通讯的基本形式:调用能力,传递参数、监听回调

    对schema协议的理解和使用

    调用schema代码的封装


    展开全文
  • 1.ios不能获取文本焦点 -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;...如有这段代码需要删掉或另做处理才能正常获取文本输入框焦点 ...form action="javascript:...

    1.ios不能获取文本焦点

     -moz-user-select: none;
    
    -webkit-user-select: none;
    
    -ms-user-select: none;
    
    user-select: none; 
    

    如有这段代码需要删掉或另做处理才能正常获取文本输入框焦点

    2.ios 不能点击元素
    给元素添加样式 cursor: pointer 就可以点击了

    3.搜索时软键盘确认键不是搜索
    在input框外添加一层form表单元素即可

    <form action="javascript:return true">
    
            <input  placeholder="搜索" type="search" />
    
    </form>
    

    4.在ios端无法识别某些图片
    可能是图片有空格, 在路径中会将空格转为%20,在ios端无法识别此图片,安卓端不受影响。删掉图片名称的空格再试试或许就可以了

    展开全文
  • 123
  • 原生与H5混合式开发详解

    千次阅读 2019-02-18 00:48:30
    声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!! 目录 ...前几天有朋友问到:“Android电商开发有什么难点和技术点吗?你做那个联想商城、万达商...
  • ### 安装weex 工具 OSX环境 ``` $ sudo chmod -R 777 /usr/local/lib/node_modules/ $ npm i -g weex-toolkit // 安装不要使用sudo执行 $ weex -v // 查看当前weex工具版本 ...执行完命令后,在 awesome..
  • Android和H5混合式开发框架基本实现
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 一、做什么?...可在百度搜索MUI和HPlus开发文档可以进行学习。标签图库:阿里巴巴矢量图库 具体用法不赘述了。 代码展示: xingfudao_index.html代码: <!doctype html> <html...
  • 本项目开发半个月就紧急上线第一版本,中间经过2次大版本迭代,一个月不到就做到用户量超过10w+,后面也算做到了市场中的前三。这个项目也算是某个点间的红利,当我们决定做这个之前,市面上只有一两家产品,一个月...
  • 一、完善登录页面的功能二、商品列表2.1之前的前端代码2.2通过js从后端拿到的数据三、商品明细四、加入购物车添加注册账号和忘记密login.html<!doctype ...
  • 混合式开发资料汇总

    2018-03-15 20:49:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 从接触安卓开发的第一天起,我想我已经爱上了开发,哈哈哈,愿你我坚持下去的理由都是热爱,共勉!这几天没有更新博客,是因为我学习去了(没有相见的日子,我在努力哈哈哈)。有想过用模拟器来运行的,但是模拟器太...
  • 修改图标新建项目检出到本地--------------------------1.api.ajax var loginName = $api.val($api.byId('uname')); var passWord = $api.val($api.byId('psd')); api.ajax({ url : '...
  • 安卓混合式开发(Hybrid) 1环境搭建 1.1首先,下载 Android Studio (Intellij Idea)  下载地址:http://www.android-studio.org/ 1.2其次,更新下载 Android SDK (JDK)  Android SDK 指的是Android专属的...
  • 今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的“无为,而无所不为”,也无法理解范仲淹的“不以物喜不以己悲”。可是再没兴趣,学习还是要继续!!!为了让自己放松,去趟博物馆,不但没有起到...
  • 混合式开发工程师 资深UI工程师 Android底层开发工程师 Android资深架构师 学习路线,必备知识点清单,实战案例
  • Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新...
  • vux 混合式开发

    2016-11-25 20:01:42
  • AppCon 混合式开发

    2016-11-25 20:03:41
    http://www.appcan.cn

空空如也

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

混合式开发