1.hybrid是什么,为何使用hybrid呢?

  1. 概念:

    • hybrid就是前端和客户端的混合开发
    • 需要前端开发人员和客户端开发人员配合完成
    • 某些环节也可能会涉及到server端
    • 大前端:网页、APP、前端和server端交互的过程
  2. 存在价值:
    • 可以快速迭代更新【关键】,无需APP审核(hybrid技术可以一天上线多次)
    • 体验流畅(和Native开发的体验基本类似)
    • 减少开发和沟通成本,双端公用一套代码
  3. webview:
    • 是APP中的一个组价(App可以有Webview,也可以么有)
    • 主要用于加载H5页面,是一个小型的浏览器内核
  4. file:// 协议
    • file协议: 本地文件,快
    • http(s): 网络加载、慢
    • 扩展知识:Web标准都有哪些呢?

2.hybrid的具体实现流程?

2.1 使用场景

  1. 不是所有场景都适合使用hybrid
  2. 使用NA: 体验要求极致,变化不频繁(如头条的首页)
  3. 使用hybrid:体验要求高,变化频繁(如头条的新闻详情页面)
  4. 使用H5: 体验无要求,不常用(如举报、反馈等页面)

2.2 具体实现

  1. 前端做好静态页面(HTML,CSS,JS),将文件交给客户端
  2. 客户端拿到前端静态页面,以文件形式存储在APP中
  3. 客户端在一个Webview中
  4. 使用file协议加载本地静态文件

3.介绍一下hybrid更新和上线的流程?

3.1 优点

  1. 用户体验更好,跟NA体验基本一致
  2. 可以快速迭代,无需app审核 【关键】

3.2 缺点:

  1. 开发成本高:联调、测试、查bug都比较麻烦
  2. 运维成本高。(平台维护)

3.3 适用场景:

  1. hybrid:产品的稳定功能,用户体验高,迭代频繁
  2. H5:单词的运营活动(如XX红包),或不常用的功能

4.前端JS和客户端如何通讯?

  1. 类似于JSONP的数据请求方式
  2. schema协议的简介和使用
  3. 通讯的基本形式:调用能力,传递参数监听回调
  4. 对schema协议的理解和使用
  5. 调用schema代码的封装
  6. 内置上线的好处:更快、更安全

【前端知识体系-JS相关】对移动端和Hybrid开发的理解?的更多相关文章

  1. 【前端知识体系-JS相关】JS基础知识总结

    1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...

  2. 【前端知识体系-JS相关】ES6专题系列总结

    1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...

  3. 【前端知识体系-JS相关】JS-Web-API总结

    2.1 DOM操作 2.1.1 DOM的本质是什么? <!-- DOM树:二叉树 --> /* <?xml version="1.0" encoding=&quo ...

  4. 【前端知识体系-JS相关】深入理解JavaScript异步和单线程

    1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...

  5. 【前端知识体系-JS相关】深入理解MVVM和VUE

    1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...

  6. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

  7. 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点

    1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...

  8. 【前端知识体系-JS相关】你真的了解JavaScript编译解析的流程吗?

    1. JS编译解析的流程 1.1 JS运行分三步 语法分析(通篇扫描是否有语法错误),预编译(发生在函数执行的前一刻),解释执行(一行行执行). 1.2 预编译执行分五步 创建AO对象(Activat ...

  9. 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链

    1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...

随机推荐

  1. PHP fastcgi_finish_request 方法

    本文介绍,PHP运行在FastCGI模式时,FPM提供的方法:fastcgi_finish_request. 在说这个方法之前,我们先了解PHP有哪些常用的运行模式? PHP运行模式 CGI 通用网关 ...

  2. zookeeper C client API 和zkpython 的安装

    1 zookeeper C API 安装 yum install -y ant 在解压的zookeeper包中执行: ant compile_jute 进入src/c 安装:yum -y instal ...

  3. 【学习笔记】动态规划—各种 DP 优化

    [学习笔记]动态规划-各种 DP 优化 [大前言] 个人认为贪心,\(dp\) 是最难的,每次遇到题完全不知道该怎么办,看了题解后又瞬间恍然大悟(TAT).这篇文章也是花了我差不多一个月时间才全部完成 ...

  4. Python入门36道经典练习题

    [程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? num_list=[] cou=0 for i in range(1,5): for j in rang ...

  5. CAD打印图纸要怎么操作?简单方法分享给你

    大家日常生活中多多少少的都接触到过CAD文件,CAD图是借助CAD制图软件来进行绘制完成的.唯一的困惑就是CAD图纸的格式大多数均为dwg格式的,查看起来不是那么的方便?所以很多设计师们都会选择将图纸 ...

  6. c冒泡排序

    外层循环需要循环和len一样的次数 //定义一个函数,该函数返回NSString void bubbleSort(int nums[],unsigned long len) { //控制本轮循环是否发 ...

  7. nginx高级用法

    功能 说明 配置语法 配置位置 配置举例 结果验证 备注 rewrite 跳转重定向(不同于代理的跳转重定向,此处nginx不是代理服务器,而是本身就是web服务器) rewrite 正则表达式 re ...

  8. golang中的接口

    CSDN找的一个网页,照着抄练一次. 差不多的使用场景都在了. package main import ( "fmt" ) type People interface { Retu ...

  9. 2. Go语言—包概念

    一.包的概念 和python一样,把相同功能的代码放到一个目录,称之为包 包可以被其他包引用(若包中变量/函数被其他包调用,名需大写) main包是用来生成可执行文件,每个程序只有一个main包 包的 ...

  10. excel工资表,转化为word工资单

    1.新建excel表,.xls格式; .xlsx格式的添加到word中会报错‘无法打开数据源’(office 2007): 2.新建word文档.docx格式: 3.邮件——开始邮件合并——信函,选择 ...