前端第一天上班工作总结

华尔街疯子
444 阅读6分钟

了解混合开发

混合开发：兼容了ios和android不同系统的开发工具、语言、框架。

一、原生开发（Native App开发）：在Android、IOS等移动品台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如Android是利用Java、Eclipse、Android Studio；IOS是利用Objective-C/Swift和Xcode进行开发。

优点： 1）可访问手机所有功能（如GPS、摄像头等），可实现功能最齐全；

2）运行速度快、性能高，绝佳的用户体验；

3）支持大量图形和动画，不卡顿，反应慢；

4）兼容性强，每个代码都经过程序员精心设计，一般不会出现闪退的情况，还能防止病毒和漏洞的出现；

5）比较快捷地使用设备端提供的接口，处理速度上有优势。

缺点：1）开发时间长，平均周期3个月左右完成；

2）制作费用高昂，成本较高；

3）可移植性比较差，一款原生的App，Android和IOS都要各自开发，荣样的逻辑、界面要写两套；

4）内容限制（App Store限制）；

5）获得新版本时需要重新下载应用更新。

二、混合开发

  1. 混合开发的优缺点：
  • 优点：
    • 开发效率高，节约事件。同一套代码Android和IOS基本上都可使用；
    • 更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核；
    • 代码维护方便、版本更新快，节省产品成本；
    • 可离线运行；
    • 比web版实现功能多；
  • 缺点：
    • 加载缓慢/网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感；
    • 性能差、卡顿，用户体验没有原生的好；
    • 既懂原生开发又懂H5开发的人才难找；
  1. 混合开发方式

  • a. H5加壳：以IonIc和Uni-App为代表，基于WebView（Android下是WebView，IOS下是WKWebView）空间加载H5页面，同时通过框架预先实现的一些能力，实现对设备摄像头、文件系统等设备能力的调用。

  • b. JS Run原生：以ReactNative和Weex为代表，使用JS进行编写，在运行时映射成原生控件运行。

  • c. 其他：以Flutter为代表，直接重新弄了个引擎和运行时，自带体系（UI组件和渲染器），除了设备能力外UI方面全权Handle。

技术类型UI渲染性能开发效率框架代表
H5加壳WebView渲染一般高Ionic、UniApp
JS原生原生控件渲染好中RN、Weex
其他调用系统API渲染好高Flutter
  1. H5加壳

  • 通过原生SDK（软件开发工具包）提供的API，APP可以与系统底层通信，以创建UI组件或访问系统服务。这些组件被渲染到手机屏幕，屏幕产生的相应的事件会被传回给组件。因为每个平台的系统组件是不同的，你需要为每个平台开发单独的App，而Hybrid App不必这样，Hybird App 的原生UI组件用来展示交互复杂和渲染要求高的界面，其他的可以交给HTML5来展示。

  • 这类App实际上就是H5加了个壳子，典型的代表有Ionic和Uni-app开发者通过使用Angular或Vue等Web前端方式编写后运行在WebView中，由于WebView的许多限制，当这类App需要使用原生能力时，就需要通过JsBridge来进行桥接，这个JsBridge就是框架提供的API和插件。

  • 其运行示意图如下：

image.png

  1. JS Run原生
  • 以React Native和Weex为代表，RN是开山祖师。这类App在现在的手机上能应对绝大多数的业务和UI需求，性能也够，是很不错的方案。
  • 这类App使用JS编写代码，在编译和运行时会直接把对应的UI映射为原生UI，所以最终运行在设备上的还是原生的页面。这要求程序员对对应平台的原生开发有一定基础，尤其是需要自己写自定义控件时。
  • 优点：
    • 调试方便，安装好之后，就不需要频繁编译了，只需要reload一下，把js代码从云服务器下载下来就可以呈现改变代码后的效果
    • css-layout布局，这对于前端程序员来说，降低了学习成本，也大大减少了代码量。但是对于IOS或安卓开发者来说，刚开始接触时，得接受一些思想上的转变。
    • 跨平台，一套代码可以跨平台使用，减少人力，节省时间
    • 热更新，更方便的增量更新
  • 缺点：
    • 项目版本更新维护较频繁
    • 整体性能仍不如原生
    • 涉及底层的功能需要Android和IOS双端单独开发，JS调用
    • 学习成本高（需要熟悉原生）
    • 试错成本高，有些问题较少有解决方案，容易耽误开发进度
    • 要做出优质APP需要花费大量人力和时间去打磨
  1. 其他（Flutter）
  • Flutter自成一派，实现了一个自绘引擎，使用Flutter自己的布局和绘制系统。Flutter在框架设计上借鉴了非常多RN的思想。某种程度上可以理解为RN的升级版。
  • Flutter是谷歌的移动UI框架，可以快速在Android和IOS上构建高质量的原生用户界面，它的前身是谷歌试验项目Sky。Flutter提出了一切皆Widget的概念，除了基本的文本、图片、卡片、输入框、布局方式和动画等也都是由Widget组成的。通过使用不同类型的Widget，就可以实现复杂的界面。
  • 优点：
    • 混合开发中，最接近原生开发的框架；
    • 性能强大，流畅；
    • 优秀的路由设计；
    • 优秀的动画设计；
    • 简单易学，Dart语言更具优势；
    • 跨多种平台，减少开发成本；支持插件，可以访问原生系统的调用。
  • 缺点：
    • 脱离不开原生，开发人员需要具备原生（Android、IOS）基础开发能力；
    • 适配问题，开发工具版本升级，修改量大；
    • 原生集成第三方SDK后，兼容性适配是个令人头疼的问题；
    • 代码可读性差，对代码质量和管理要求较高；
    • Widget的类型难以选择，糟糕的UI控件API；
    • Flutter pacages和Dart packages上第三方sdk繁杂，适配性差，不可乱用；
    • 目前几乎没有第三方开发者平台开发Flutter的SDK，需要原生去集成
    • 打包后，apk/ipa要大很多
  1. 我们项目用何种框架？为什么？
  • 使用H5加壳，方便，快速上手，用熟悉的语言Vue，js
  • RN 和Flutter适用于有经验的原生Android和IOS开发者，新手上手难度大。
  1. Android WebView与JS交互
  • Android调用JS代码的2种方法：
    • 通过WebView的loadUrl()
    • 通过WebView的evaluateJavascript()
  • JS调用Android的方法有3种：
    • 通过WebView的addJavascriptInterface()进行对象映射
    • 通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url
    • 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息
  1. IOS WebView与JS交互
  • JS调用WKwebView方法
    • JS调用WKWebView都是通过WKScriptMessageHandler协议来实现
  • webview调用JS方法

    • 通过使用webViewJavascriptBridge

    • 通过原生的WKWebViewConfiguration

avatar
文章
阅读
粉丝