高端网站建设公司哪家服务好,做app和做网站区别,网站首页的布局,交易网站模板移动端的开发技术是指针对移动设备如智能手机和平板电脑等便携终端进行应用程序和服务创建的过程。本文将主要介绍一下移动端的开发技术的历史进化历程。讲述h5#xff0c;跨平台#xff0c;原生的各种技术实现方案和他们各自的优势与不足。 移动开发#xff0c;不仅是编程技…移动端的开发技术是指针对移动设备如智能手机和平板电脑等便携终端进行应用程序和服务创建的过程。本文将主要介绍一下移动端的开发技术的历史进化历程。讲述h5跨平台原生的各种技术实现方案和他们各自的优势与不足。 移动开发不仅是编程技术的集合更是一种全新的思考方式和解决问题的方法。它要求开发者站在用户的角度考虑到各种使用场景兼顾美观与实用性实现技术与艺术的完美结合。从原生应用到跨平台解决方案从简单的工具到复杂的游戏移动开发正以前所未有的速度不断创新满足着亿万用户的个性化需求。
原生开发
原生应用程序是指某一个移动平台比如iOS或安卓所特有的应用使用相应平台支持的开发工具和语言并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。原生开发有以下 主要优势
可访问平台全部功能GPS、摄像头速度快、性能高、可以实现复杂动画及绘制整体用户体验好
主要缺点
平台特定开发成本高不同平台必须维护不同代码人力成本随之变大内容固定动态化弱大多数情况下有新功能更新时只能发版
跨平台技术
针对原生开发面临的问题业界一直都在努力寻找好的解决方案而时至今日已经有很多跨平台框架注意本书中所指的“跨平台”若无特殊说明即特指 Android 和 iOS 两个平台根据其原理主要分为三类
H5 原生Cordova、Ionic、微信小程序JavaScript 开发 原生渲染 React Native、Weex自绘UI 原生 (Qt for mobile、Flutter)
H5
这类框架主要原理就是将 App 中需要动态变动的内容通过HTML5简称 H5来实现通过原生的网页加载控件WebView Android或 WKWebViewiOS来加载以后若无特殊说明我们用WebView来统一指代 Android 和 iOS 中的网页加载控件。这种方案中H5 部分是可以随时改变而不用发版动态化需求能满足同时由于 H5 代码只需要一次开发就能同时在 Android 和 iOS 两个平台运行这也可以减小开发成本也就是说H5 部分功能越多开发成本就越小。我们称这种 H5 原生 的开发模式为混合开发 采用混合模式开发的App我们称之为混合应用或 HTMLybrid App 如果一个应用的大多数功能都是 H5 实现的话我们称其为 Web App 。目前国内各家公司小程序应用层的开发技术栈是 Web 技术栈而底层渲染方式基本都是 WebView 和原生相结合的方式。
JavaScript 开发 原生渲染 React Native、Weex
React Native 简称 RN 是 Facebook 于 2015 年 4 月开源的跨平台移动应用开发框架是 Facebook 早先开源的 Web 框架 React 在原生移动应用平台的衍生产物目前支持 iOS 和 Android 两个平台。RN 使用JSX 语言扩展后的 JavaScript主要是可以在 JavaScript 中写 HTML标签和 CSS 来开发移动应用。因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
由于 RN 和 React 原理相通并且 Flutter在应用层也是受 React 启发很多思想也都是相通的因此我们有必要深入了解一下React原理。 React 是一个响应式的 Web 框架我们先了解一下两个重要的概念DOM 树与响应式编程。
DOM树与控件树 文档对象模型Document Object Model简称DOM是 W3C 组织推荐的处理可扩展标志语言的标准编程接口一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说这是表示和处理一个 HTML 或XML 文档的标准接口。简单来说DOM 就是文档树与用户界面控件树对应在前端开发中通常指 HTML 对应的渲染树但广义的 DOM 也可以指 Android 中的 XML 布局文件对应的控件树而术语DOM操作就是指直接来操作渲染树或控件树响应式编程 React 中提出一个重要思想状态改变则UI随之自动改变。而 React 框架本身就是响应用户状态改变的事件而执行重新构建用户界面的工作这就是典型的 响应式 编程范式。原理如下
开发者只需关注状态转移数据当状态发生变化React 框架会自动根据新的状态重新构建UI。React 框架在接收到用户状态改变通知后会根据当前渲染树结合最新的状态改变通过 Diff 算法计算出树中变化的部分然后只更新变化的部分DOM操作从而避免整棵树重构提高性能。
Weex 是阿里巴巴于 2016 年发布的跨平台移动端开发框架思想及原理和 React Native 类似底层都是通过原生渲染的不同是应用层开发语法 即 DSLDomain Specific LanguageWeex 支持 Vue 语法和 Rax 语法Rax 的 DSL(Domain Specific Language) 语法是基于 React JSX 语法而创造而 RN 的 DSL 是基于 React 的不支持 Vue。
自绘UI 原生Qt
自绘引擎解决的是 UI 的跨平台问题如果涉及其他系统能力调用依然要涉及原生开发。这种平台技术的优点如下 性能高由于自绘引擎是直接调用系统API来绘制UI所以性能和原生控件接近。 灵活、组件库易维护、UI外观保真度和一致性高由于UI渲染不依赖原生控件也就不需要根据不同平台的控件单独维护一套组件库所以代码容易维护。
Flutter出世
Flutter 是 Google 发布的一个用于创建跨平台、高性能移动应用的框架。以下是Flutter的优势
Flutter 生态系统发展迅速社区非常活跃无论是开发者数量还是第三方组件都已经非常可观。现在 Google 正在大力推广FlutterFlutter 的作者中很多人都是来自Chromium团队并且 Github上活跃度很高。另一个角度从 Flutter 诞生到现在频繁的版本发布也可以看出 Google 对 Flutter的投入的资源不小所以在官方技术支持这方面大可不必担心。一套代码多端运行并且在开发过程中 Flutter 的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在 iOS 和 Android 模拟器或真机上可以实现毫秒级热重载并且不会丢失状态。
