【前端知识体系-JS相关】对移动端和Hybrid开发的理解?
1.hybrid是什么,为何使用hybrid呢?
- 概念:
- hybrid就是前端和客户端的混合开发
- 需要前端开发人员和客户端开发人员配合完成
- 某些环节也可能会涉及到server端
- 大前端:网页、APP、前端和server端交互的过程
- 存在价值:
- 可以快速迭代更新【关键】,无需APP审核(hybrid技术可以一天上线多次)
- 体验流畅(和Native开发的体验基本类似)
- 减少开发和沟通成本,双端公用一套代码
- webview:
- 是APP中的一个组价(App可以有Webview,也可以么有)
- 主要用于加载H5页面,是一个小型的浏览器内核
- file:// 协议
- file协议: 本地文件,快
- http(s): 网络加载、慢
- 扩展知识:Web标准都有哪些呢?
2.hybrid的具体实现流程?
2.1 使用场景
- 不是所有场景都适合使用hybrid
- 使用NA: 体验要求极致,变化不频繁(如头条的首页)
- 使用hybrid:体验要求高,变化频繁(如头条的新闻详情页面)
- 使用H5: 体验无要求,不常用(如举报、反馈等页面)
2.2 具体实现
- 前端做好静态页面(HTML,CSS,JS),将文件交给客户端
- 客户端拿到前端静态页面,以文件形式存储在APP中
- 客户端在一个Webview中
- 使用file协议加载本地静态文件
3.介绍一下hybrid更新和上线的流程?
3.1 优点
- 用户体验更好,跟NA体验基本一致
- 可以快速迭代,无需app审核 【关键】
3.2 缺点:
- 开发成本高:联调、测试、查bug都比较麻烦
- 运维成本高。(平台维护)
3.3 适用场景:
- hybrid:产品的稳定功能,用户体验高,迭代频繁
- H5:单词的运营活动(如XX红包),或不常用的功能
4.前端JS和客户端如何通讯?
- 类似于JSONP的数据请求方式
- schema协议的简介和使用
- 通讯的基本形式:调用能力,传递参数监听回调
- 对schema协议的理解和使用
- 调用schema代码的封装
- 内置上线的好处:更快、更安全
【前端知识体系-JS相关】对移动端和Hybrid开发的理解?的更多相关文章
- 【前端知识体系-JS相关】JS基础知识总结
1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...
- 【前端知识体系-JS相关】ES6专题系列总结
1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...
- 【前端知识体系-JS相关】JS-Web-API总结
2.1 DOM操作 2.1.1 DOM的本质是什么? <!-- DOM树:二叉树 --> /* <?xml version="1.0" encoding=&quo ...
- 【前端知识体系-JS相关】深入理解JavaScript异步和单线程
1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
- 【前端知识体系-JS相关】组件化和React
1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...
- 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点
1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...
- 【前端知识体系-JS相关】你真的了解JavaScript编译解析的流程吗?
1. JS编译解析的流程 1.1 JS运行分三步 语法分析(通篇扫描是否有语法错误),预编译(发生在函数执行的前一刻),解释执行(一行行执行). 1.2 预编译执行分五步 创建AO对象(Activat ...
- 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链
1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...
随机推荐
- 代码生成工具Database2Sharp的架构介绍
1)代码生成工具介绍 Database2Sharp是一款代码生成工具和数据库文档生成工具,该工具从2005年开始至今,一直伴随着我们的客户和粉丝们经历着过各种各样的项目开发,在实际开发中能带来效率的提 ...
- LabVIEW工控二进制数据存储
在文件存储的逻辑上,二进制文件基于值编码,而不是字符编码,其占用空间小,读取/写入速度快,但是译码比较复杂,不利用数据共享.根据具体编码方式的不同,二进制的使用方式也有所不同,如对bmp格式,规定了文 ...
- 表达式树练习实践:C#判断语句
目录 表达式树练习实践:C#判断语句 if if...else switch ?? 和 ?: 表达式树练习实践:C#判断语句 判断语句 C# 提供了以下类型的判断语句: 语句 描述 if 一个 if ...
- CSS3 3D变形 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)
2d x y 3d x y z 左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 ...
- vue浏览器全屏实现
1.项目中使用的是sreenfull插件,执行命令安装 npm install --save screenfull 2.安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下: toggleFull ...
- 使用Dynamics 365 CE Web API查询数据加点料及选项集字段常用查询
微软动态CRM专家罗勇 ,回复336或者20190516可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me. 紧接上文:配置Postman通过OAuth 2 implicit ...
- qt 使用OpenCV
使用MinGW编译OpenCV源码 下载OpenCV源码.CMake编译工具 编译安装完: Qt工程配置 INCLUDEPATH += D:/qt_work/opencv/build/install/ ...
- 我认为现代IDE编辑器应该具有的几个特性和Visual studio 2010增强
工作中要使用 VS 2010, 有好多年没有使用Visual studio 了, 试了一小会, 发现VS 2010 缺少不少现代IDE应有的特性, 我认为重要的是下面几个特性, VS2010 已经是1 ...
- 具名插槽 slot (二)
slot 是父组件与子组件的通信方式可以将父组件的内容显示在子组件当中或者说可以将 让你封装的组件变的更加的灵活,强壮! 在子组件中 通过为多个slot进行命名.来接受父组件中的不同内容的数据 这 ...
- OpenGL基础代码整理
3-1:画点,连成线 // OPENGL.cpp : Defines the entry point for the console application. // #include "st ...