精华内容
下载资源
问答
  • 混合app
    2020-12-29 06:39:26

    前言

    工作中接到开发混合app的需求,以前没有接触过,做了一段时间调研,也写个几个项目,就过程中遇到的问题,谈谈想法。

    调研阶段

    经过一阵google搜索,大致了解了几种方案,按照类别可以分成以下几类:

    类别

    代表

    native APP

    react-native(jsx)、weex(vue)

    hybrid APP

    dcloud(mui、5+SDK)、ionic(angular、cordova)、webview加载SPA应用

    web APP

    浏览器加载SPA应用

    注:并未考虑原生 APP。

    各种方案的优缺点,网上有很多详细的文章,这里就不一一叙述了,大家可自行搜索。

    实践阶段

    1. React-Native

    接下来就是一个一个的尝试,最早接触过React-Native开发,就先说说它。

    React-Native提供了常用的组件,JSX语法,生态圈也比较繁荣,有很多插件。

    坑也比较多:

    前期对windows平台以及android平台支持不太友好,在此平台上搭建环境简直想哭,建议mac;

    list组件存在性能问题,初入门的面对一大堆英文文档研究性能问题,还是有一点点勉强的;

    打包要兼顾ios和android,需要一定的原生基础,但不多;

    键盘遮挡问题;

    navigator不是太好用;

    2. Ionic

    稍微尝试了下Ionic框架,简单理解就是,Ionic提供UI框架,angular作为mvvm渲染框架,cordova作为中间件,并负责打包。

    Ionic的UI组件丰富,大大方便了前端的开发工作,但是UI设计严格要求的话,还是需要自己定制的。

    3. Dcloud

    dcloud提供了hbuilder开发工具,mui框架,以及5+sdk,致力于提高HTML5性能体验。

    mui不仅提供的UI组件丰富,还提供了事件管理、网络请求等功能,真的是一应俱全,而且有相关的完整demo。

    坑:

    普遍反映社区不活跃,官方论坛回复也很慢。

    对于熟悉mvvm模式的开发而言,不算好消息,dcloud采用的是类似jquery操作dom的方式

    项目比较散乱,代码冗余,和目前流行的前端项目工程化还是有差距的

    vue + mui 集成,相对比较困难,但是本人还是成功了。

    客户端反映,集成复杂,权限问题严重。

    4. weex

    感觉还有待提高,对初学者很不友好。

    从环境搭建,到建立项目工程,再到调试打包,没有一份合理的指导,入坑需谨慎。

    坑:

    weex-toolkit 升级后不再支持init命令

    npm需要> 5.0

    使用vue-router需要将项目改造成单页面,即修改webpack配置文件为单入口

    vue-router需要设置默认值,否则会显示空白

    navigator方式跳转在web端不行,需要使用playground调试

    在自己编写的组件中使用v-for指令,playground中调试一直报错,Web正常。

    flex-direction默认不是row

    5. webview嵌套

    前端工程可自行架构,但要注意和客户端商量好交互方式。

    单页面和多页面都是可以的。

    单页面有一些注意的地方,重定向最好不要用,replace比push更好用。

    webview就相当于浏览器,如果从原生跳转到嵌套SPA页面,再跳转到原生,可以像浏览器一样正常逐级返回。

    从原生跳转到SPA页面,首先要跳转到SPA项目的路由入口才能继续向下一级跳转。

    更多相关内容
  • 混合App开发原理

    2021-01-03 23:03:09
    混合APP就是在:android系统和ios系统直接使用系统默认浏览器进行轻量的嵌套使用,是基于原生js和html5来开发的,原生是需要浏览器的,它可以在不升级App的情况下不动态更新,节省很多开发资源,而webvi
  • 基于混合APP的生产设备监测系统研究.pdf
  • 混合app

    千次阅读 2020-12-07 20:36:16
    今天,我们来聊一聊什么是混合app 目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别...

    今天,我们来聊一聊什么是混合app

    目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧!

    一、APP原生开发

    原生开发(Native App开发),是在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发。比如Android是利用Java、Eclipse、Android studio;IOS是利用Objective-C 和Xcode进行开发。
    通俗点来讲,原生开发就像盖房子一样,先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等,都是经过精心的设计。原生APP也一样:通过代码从每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码写出来,一层层,一段段全用代码写出来。
    优点:

    1、可访问手机所有功能(如GPS、摄像头等)、可实现功能齐全; 2、运行速度快、性能高,绝佳的用户体验;
    3、支持大量图形和动画,不卡顿,反应快; 4、兼容性高,每个代码都经过程序员精心设计,一般不会出现闪退的情况,还能防止病毒和漏洞的出现;
    5、比较快捷地使用设备端提供的接口,处理速度上有优势。

    缺点:

    1、开发时间长,快则3个月左右完成,慢则五个月左右; 2、制作费用高昂,成本较高;
    3、可移植性比较差,一款原生的App,Android和IOS都要各自开发,同样的逻辑、界面要写两套; 4、内容限制(App
    Store限制); 5、获得新版本时需重新下载应用更新。

    二、Web APP (HTML5)开发

    HTML5应用开发,是利用Web技术进行的App开发。Web技术本身需要浏览器的支持才能进行展示和用户交互,因此主要用到的技术是HTML5、Javascript、CSS等。
    优点:

    1、支持设备范围广,可以跨平台,编写的代码可以同时在Android、IOS、Windows上运行; 2、开发成本低、周期短;
    3、无内容限制; 4、适合展示有大段文字(如新闻、攻略等),且格式比较丰富(如加粗,字体多样)的页面;
    5、用户可以直接使用新版本(自动更新,不需用户手动更新)。

    缺点:

    1、由于Web技术本身的限制,H5移动应用不能直接访问设备硬件和离线存储,所以在体验和性能上有很大的局限性;
    2、对联网要求高,离线不能做任何操作; 3、功能有限; 4、APP反应速度慢,页面切换流畅性较差; 5、图片和动画支持性不高;
    6、用户体验感较差; 7、无法调用手机硬件(摄像头、麦克风等)。

    三、混合APP开发(原生+H5)

    混合开发(Hybrid App开发),是指在开发一款App产品的时候,为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说,这就是网页的模式,通常由“HTML5云网站+APP应用客户端”两部份构成。
    混合开发是一种取长补短的开发模式,原生代码部分利用Web View插件或者其它框架为H5提供容器,程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。

    优点:

    1、开发效率高,节约时间。同一套代码Android和IOS基本上都可使用;
    2、更新和部署比较方便,每次升级版本只需要在服务器端升级即可,不再需要上传到App Store进行审核;
    3、代码维护方便、版本更新快,节省产品成本; 4、比web版实现功能多; 5、可离线运行。

    缺点:

    1、功能/界面无法自定:所有内容都是固定的,不能换界面或增加功能;
    2、加载缓慢/网络要求高:混合APP数据需要全部从服务器调取,每个页面都需要重新下载,因此打开速度慢,网络占用高,缓冲时间长,容易让用户反感;
    3、安全性比较低:代码都是以前的老代码,不能很好地兼容新手机系统,且安全性较低,网络发展这么快,病毒这么多,如果不实时更新,定期检查,容易产生漏洞,造成直接经济损失;
    4、既懂原生开发又懂H5开发的高端人才难找。

    三、混合APP开发(原生+H5)

    混合开发(Hybrid App开发),是指在开发一款App产品的时候,为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说,这就是网页的模式,通常由“HTML5云网站+APP应用客户端”两部份构成。
    混合开发是一种取长补短的开发模式,原生代码部分利用Web View插件或者其它框架为H5提供容器,程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
    优点:

    1、开发效率高,节约时间。同一套代码Android和IOS基本上都可使用;
    2、更新和部署比较方便,每次升级版本只需要在服务器端升级即可,不再需要上传到App Store进行审核;
    3、代码维护方便、版本更新快,节省产品成本; 4、比web版实现功能多; 5、可离线运行。

    缺点:

    1、功能/界面无法自定:所有内容都是固定的,不能换界面或增加功能;
    2、加载缓慢/网络要求高:混合APP数据需要全部从服务器调取,每个页面都需要重新下载,因此打开速度慢,网络占用高,缓冲时间长,容易让用户反感;
    3、安全性比较低:代码都是以前的老代码,不能很好地兼容新手机系统,且安全性较低,网络发展这么快,病毒这么多,如果不实时更新,定期检查,容易产生漏洞,造成直接经济损失;
    4、既懂原生开发又懂H5开发的高端人才难找。

    上面我们了解了三种主流APP,那么我们再来说说怎么进行和安卓 和 ios交换数据

    初始化

    // 初始化方法
    function init (obj) {
        // 在页面初始化我们可以拿到原生端给我们传来的初始化数据,他们会默认调用一次初始化方法
        console.log(obj)
    }
    
    

    调用方法

    // 判断h5在ios还是安卓
    function detect(){
            var equipmentType = "";
            var agent = navigator.userAgent.toLowerCase();
            var android = agent.indexOf("android");
            var iphone = agent.indexOf("iphone");
            var ipad = agent.indexOf("ipad");
            if(android != -1){
                equipmentType = "android";
            }
            if(iphone != -1 || ipad != -1){
                equipmentType = "ios";
            }
            return equipmentType;
        }
    
    // 我们定义好一个 上传图片方法,放在一个公用的js文件中
    function updataImg (obj,callback) {
        if(equipmentType == "android") {
            // 调用android方法,比如是
            android.webviewupdataJs(obj,callback)  // 浏览器不认识的方法,是安卓定义好的方法
        } else {
            ios.webviewupdataJs(obj,callback)
        }
        console.log(obj)
    }
    
    

    最后终极大总结

    说一下我对混合开发的理解

    总结:通俗来讲,就是将h5我们写好的移动端页面,放到ios设备以及安卓设备中,在里面我们可以享受ios和安卓给我们的所有支持,通过方法调用,回调函数进行使用 给我们提供的方法
    对安卓 和 ios交换数据就是方法调用方法

    展开全文
  • 该项目基于 vant-ui 框架,解决移动端开发和混合开发遇到常见问题,例如:mock 数据、h5 与 native 通信、h5 调试、适配、国际化等问题 Project setup yarn install Compiles and hot-reloads for development yarn ...
  • 混合app打包文件.zip

    2020-06-28 15:17:09
    混合开发打包的两种apk ,文章链接: https://editor.csdn.net/md?articleId=106999460
  • app-混合app-webapp区别

    2018-01-24 10:35:28
    移动应用开发的三种方式比较 移动应用开发的方式,目前主要有三种: Native App: 本地应用程序(原生App) Web App:网页应用程序(移动web) Hybrid App:混合应用程序(混合App
  • 用ionic框架构建的混合app打包并发布到App Store详细步骤
  • 什么是混合APP开发

    千次阅读 2021-04-28 18:29:56
    混合APP开发 移动APP开发的三种方式: native APP native APP 是指本地应用程序,也叫原生AP。内部运行的是二进制数据,也就是说原生语言最后是直接转换成二进制数据运行的,可以调用最底层的设备API。如手机...

    混合APP开发

    移动APP开发的三种方式:

    1. native APP
      native APP 是指本地应用程序,也叫原生AP。内部运行的是二进制数据,也就是说原生语言最后是直接转换成二进制数据运行的,可以调用最底层的设备API。如手机摄像头、日历、设备信息等。原生APP是使用相应平台特有的开发工具和语言进行开发的,如android app ,这使得应用程序外观和性能极佳,但是开发成本很高。每一种操作系统都要独立的开发项目。
    2. web APP
      web APP是指网页应用APP,也叫移动APP。开发成本低,但是无法调用原生的功能。依赖于MOBILE BROWER(移动设备中的浏览器)运行,内部执行普通的网页代码,也可以理解为是网页在移动设备上执行。移动app使用H5 CSS JS技术即可实现,”一次编译,多个设备运行“。
    3. hybrid APP
      混合应用,也叫混合APP,是上面两种方式的混合。结合两者居中的状态,比较适合现代开发。主要是通过web前端技术实现的,在一个原生APP内嵌一个轻量级的浏览器,然后使用h5开发一部分原生的功能,这部分功能可以在不升级APP的情况下动态更新。
      在这里插入图片描述
      三种开发方式的对比:
      在这里插入图片描述
      教科书式的解答。

    原生怎么与h5通信

    其实通信原理是android原生的方法和h5的方法都挂载在window下面,然后通过事件的触发和回调来实现交互。

    展开全文
  • 混合APP开发流程

    2021-01-11 23:17:31
    混合APP开发流程 文章目录混合APP开发流程一、什么是混合APP?二、搭建框架1.搭建vue基础框架2.rem自适应屏幕配置HBuilder打包过程 一、什么是混合APP? 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决...

    混合APP开发流程


    一、什么是混合APP?

    通俗的介绍一下混合APP(Hybrid App)
    混合APP是指web app,就是普通的web网页,外面套了一层原生的壳,相当于一个原生的壳里面有一个WebView网页

    二、搭建框架

    1.搭建vue基础框架

    包括路由,vuex,i18n等
    此次省略一万字。。。

    2.rem自适应屏幕配置

    rem和em的区别

    rem是相对html的,而em是相对于使用em单位的元素的字体大小
    代码如下(示例):

    p{
    	font-size:20px;
    	padding:10em;// 这里的10em是相对与20px的,也就是20*10=200px
    }
    

    代码如下(示例):

    //designWidth:设计稿的实际宽度值,需要根据实际设置
    //maxWidth:制作稿的最大宽度值,需要根据实际设置
    //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
    (function(designWidth, maxWidth) {
    	var doc = document,
    		win = window,
    		docEl = doc.documentElement,
    		remStyle = document.createElement("style"),
    		tid;
    
    	function refreshRem() {
    		var width = docEl.getBoundingClientRect().width;
    		maxWidth = maxWidth || 540;
    		width>maxWidth && (width=maxWidth);
    		var rem = width * 100 / designWidth;
    		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    	}
    
    	if (docEl.firstElementChild) {
    		docEl.firstElementChild.appendChild(remStyle);
    	} else {
    		var wrap = doc.createElement("div");
    		wrap.appendChild(remStyle);
    		doc.write(wrap.innerHTML);
    		wrap = null;
    	}
    	//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
    	refreshRem();
    
    	win.addEventListener("resize", function() {
    		clearTimeout(tid); //防止执行两次
    		tid = setTimeout(refreshRem, 300);
    	}, false);
    
    	win.addEventListener("pageshow", function(e) {
    		if (e.persisted) { // 浏览器后退的时候重新计算
    			clearTimeout(tid);
    			tid = setTimeout(refreshRem, 300);
    		}
    	}, false);
    
    	if (doc.readyState === "complete") {
    		doc.body.style.fontSize = "12px";
    	} else {
    		doc.addEventListener("DOMContentLoaded", function() {
    			doc.body.style.fontSize = "12px";
    		}, false);
    	}
    })(360, 1024);
    
    

    在main.js中直接引入这个js文件

    //引入rem文件
    import './assets/public/rem.js';
    

    使用rem单位
    在任何css预加载中都可以使用rem作为单位,例如:

    font-size:0.18rem;// 只需要按设计稿中的尺寸/100就好,他会自动转换
    

    三、HBuilder打包

    我这边使用的是云打包,然后生成下载链接后,因为云打包的下载链接只能下载五次,所以我们直接把app下载下来放到服务器上,然后通过手写一个接口实现下载功能,就可以无限下载啦

    展开全文
  • 混合App开发,HBuilder开发移动App

    千次阅读 2021-06-13 11:33:42
    使用HBuilder开发混合App: Hbuilder:是一个在线打包工具,不需要在本地配置开发环境;直接将做好的网站,通过一些简单的操作,就能在线打包为一个App; 混合APP开发常见技术:Html5+、ReactNative、Weex、Ionic;...
  • 混合APP开发

    2020-12-07 21:54:02
    文章目录前言一、什么是混合app?二、混合app开发优缺点1.优点:2.缺点:三、混合APP开发(原生+H5)总结 前言 一、什么是混合app? 通俗来讲,就是将h5我们写好的移动端页面,放到ios设备以及安卓设备中 在里面...
  • 混合App自动化测试

    千次阅读 2022-01-07 16:07:02
    app如果是混合型,及安卓原生和H5,appium无法定位H5,需要其他的工具进行元素定位,大致步骤如下: 一、切换进入web页面中 1、UC-devtools工具 运用这个工具进行app中web页面定位,查看元素 2、定位web页面,需要先...
  • 原生app和混合app、webapp有哪些区别?优略势对比 目前市场主流的APP主要分三种:原生APP、WebAPP和混合APP三种,这里对三者的区别进行详细分析。 原生APP是什么? 原生APP就是利用Android、iOS平台官方的开发语言、...
  • 混合APP优化加速方案.pdf
  • 简介 目前,移动APP市场非常之巨大,世界上有很多人都在用着各种不同类型的手机... 混合App(Hybrid App) 什么是Native App? 原生App是基于特定的移动设备和平台进行开发的应用,比如(Android,iOS,Windows),因
  • Hybrid App混合应用):即为原生 WebView 加 HTML5 网页内容的形式。只需要开发一套 HTML5 业务逻辑,就可以同时运行在不同的平台上,相对比较灵活,内容可以快速更新,开发维护成本较低。最大的缺点就是性能远...
  • 基于SAE的北斗信息服务混合App开发.pdf
  • 2018web前端开发-----混合app项目开发实战视频教程,是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过应用商店来获取应用 。 如安装在 iOS 和 Android 设备上的客户端。
  • tgx 淘共享商城混合app开发
  • 本资源是spring boot集成ionic开发的混合app,适合想学习ionic的小伙伴们,学习成本低,适合想学app开发的朋友
  • 原文地址
  • 环境安装参考 搭建环境,解除禁用函数,设置伪静态,绑定运行目录等等 然后设置所有目录为可读写权限 ...APP和小程序是X版本的,请用hbuildx生成本地APP包和生成微信小程序 然后改动APP和小程序接口地址即可
  • 混合APP模式、双重缓存 异步刷新技术在中国电信集约星级服务中的应用.pdf
  • h5+混合app打包步骤

    2020-09-15 17:32:31
    选择5+app-->项目命名-->文件路径; 3、选择项目中的manifest.json文件,模块配置:选择指纹、蓝牙等等;图标配置中-->选择app图标-->自动生成所有图标;app常用其他设置-->支持cpu不要勾选; ...
  • 1.原生APP原生APP是什么?原生APP就是利用Android、iOS平台官方的开发语言、开发类库、工具进行开发。比如安卓的java语言,iOS的object-c 语言。在应用性能上和交互体验上应该是最好的。优点:1、可访问手机所有功能...
  • 原生app、webapp、混合app的区别介绍

    千次阅读 2020-09-30 09:49:18
    目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧...
  • vue + vuex + vue-router 可以很轻松的构建一个单页应用 开发工具: Vue-cli 自己写的一个gitbook教程:https://phantomgary.gitbooks.io/vue-spa-app/content/ 如果你想实现后台开发的前后端分离。也...
  • 由于移动端的webview自带网页缓存机制,所以经常出现H5和原生交互开发时,前端开发人员给移动端提供了一个固定的网址路径,让移动端调用加载,当前端开发人员已经重新上传了新的网页内容,移动端加载的仍是以前的...
  • 前端常见面试题之----混合app的使用

    千次阅读 2020-12-07 19:50:54
    混合app的使用前言一、什么是混合开发?二、混合开发的优势三、作为h5如何使用总结 前言 这里就是关于混合开发了,也是经常问到的。现在的移动端,大部分都是混合开发 一、什么是混合开发? 简单来说就是一种原生+...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 96,504
精华内容 38,601
关键字:

混合app

友情链接: 59564345read_SP3.zip