移动端开发的方式

移动端开发的方式

移动终端技术选型步骤及移动终端开发方法

目前主要有四种开发模式：

前三种开发模式示意图：

由于成本和周期问题，原生开发模式被放弃。

由于App需要调用移动操作系统的API，因此放弃了移动Web模式。

最终选择跨平台解决方案

旧方案

（主要作为参考，不作为最终技术选型方案）

它是一个开发跨平台Web应用程序的工具，使用前端技术来开发应用程序。

底层逻辑是：HTML+CSS构建页面，使用JS与原生平台交互，展示原生平台的功能。

提供一组与设备相关的API，移动应用程序可以通过这些API访问本机设备功能，例如摄像头、麦克风等。

它还提供了一组统一的类库和特定于设备的本机后端代码以供这些库使用。

缺点：

离子

基于它，它可以与Vue和React一起使用。

缺点：

使用 C# 作为编程语言开发。 允许开发人员跨不同平台共享大部分代码，同时保留本机应用程序的性能和外观。 可以与.NET生态系统无缝集成。

缺点：

新的跨平台解决方案

（最终的技术方案将从以下技术方案中选出）

Uni-App/Weex

使用的框架：Vue

开发者编写一套代码，可以发布到iOS、H5、各种小程序（微信/支付宝/百度/今日头条/QQ/钉钉/淘宝）、快应用等平台。 是双引擎渲染，同时支持和weex渲染。

使用场景：由于uni-app的技术门槛相对较低，很难实现交互和性能的精细定制。 主要适用于外包等快速发展的市场，市场上没有代表性产品。

优势：

缺点：

当心：

uni-app的nvue开发应用程序，语法是vue语法的子集。 例如：

项目建设：

从入门到实践：Uni-app跨平台开发与应用：/post/...

享受全端开发：

威克斯

1.已嵌入Weex，有两套引擎：和weex

2. 据资料显示，weex 已经不再维护得太多了。

所以我们只在这里讨论它。

反应

（下文中的rn、react、RN均指React，同一个框架）

使用的框架：React

React（简称RN）是2015年4月开源的跨平台移动应用开发框架，是早期开源JS框架React在原生移动应用平台上的衍生品。 目前支持iOS和两大平台。

使用场景：市场上有很多成熟的产品。 请看下面APP开发者工具的分析。

项目建设流程：

最新版本React环境搭建：/post/...

主要参考文章：

React技术在小米有品App中的应用：/post/...

云音乐React系统搭建与开发：/a/...

优势：

缺点：

它是的移动UI框架，可以在iOS和

优势：

缺点：

用 Dart 完成同一页面进行比较：

语言：

<div class="greybox">  
  <div class=redbox>  
    smaple text  
  div>  
div>  
.greybox {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: #e0e0e0; /* grey 300 */  
  width: 320px;  
  height: 240px;  
  font: 18px  
}  
.redbox {  
  background-color: #ef5350; /* red 400 */  
  padding: 16px;  
  color: #ffffff  
}

飞镖语言：

var container = new Container( // grey box  
  child: new Center(  
    child: new Container( // red box  
      child: new Text(  
        "smaple text",  
        style: new TextStyle(  
          color: Colors.white,  
          fontSize: 18.0,  
        ),  
      ),  
      decoration: new BoxDecoration(  
        color: Colors.red[400],  
      ),  
      padding: new EdgeInsets.all(16.0),  
    ),  
  ),  
  width: 320.0,  
  height: 240.0,  
  color: Colors.grey[300],  
);

可以看出Dart语言采用的是嵌套模式。

Dart语言是一种只有js的语言，没有html和css。 需要使用js来创建元素，并使用js的style方法来给每个元素设置样式。 您无法编写 html 和 css 代码。 前端已经发展成各种MVC等视图逻辑分离的架构。 还有Vue这样的组件化模式，方便利用各种轮子快速完成界面。 Dart界面开发模型与之前的模型不同。

不同解决方案的特点比较

学习成本

低的

中间

高的

语言

镖

表现

一般来说

好的

最多

三方库

较少的

许多

许多

原生开发协作

不需要太多

需要紧密的原生协作开发

需要紧密的原生协作开发

维护代码数量

本机通信开销

较大

较大

小的

可持续性

降低

高的

高的

公司

（以下内容是对上表的扩展和解释，如果只是想直观地比较三者，只需看表即可）

如何选择特别小的公司跨平台，只关注成本，一套就可以：性能要求，功能比较复杂，可能涉及更多原生链接：||开发者工具分析

通过开发者工具，分析apk包，得到一些社交软件和常用软件的开发框架选型。

总结

社会应用：

最常用的软件：

跨平台和本机开发协作