【web开发 | 移动APP开发】 Web 移动开发指南（2017.01.05更新）

2021-12-21 16:31:56

版本记录

 - 版本1.0 创建文章（2016.12.30）

 - 版本1.1 更正了hybird相关知识；增加了参考文章（2017.01.05）；

        + Web APP更正为响应式移动站点与页面，简称响应式站点；

　

一、移动APP开发方式

响应式移动站点与页面（M站）
- 使用HTML+CSS+JS开发运行在移动端浏览器中的纯Web APP.可通过浏览器调用Device API.
Hybird APP
- 使用Native + Web（HTML+CSS+JS）混合开发
- 主要类型：
  - Native主体型：使用Web View加载web页（web和Native之间可以互相调用方法，可以传递参数）；
    - 多View混合型；
      - Native view & Web View 交替出现；
    - 单View混合型；
      - Native view & Web View 在同一个View内出现，相互依赖关联；
  - Web主体型；
    - 直接使用Web语言构建跨平台APP，可生成为APK、IPA格式安装包；
    - 用js编写，一些构建工具打包生成跨平台应用； ★
Native APP
- 使用原生程式编写运行；
- 主要类型：
  - 纯Native APP；
    - 基于Android、iOS、WP等手机本地操作系统，使用原生程式编写运行的APP；
  - react Native；
    - 用javascript+原生程式编写原生APP；

二、移动开发方式比较

	响应式站点	Hybird APP	Native APP
开发成本	低	中	高
维护更新	易	易	难
用户体验	差	优	优
Store or Market 认可	不认可	认可	认可
安装	不需要	需要	需要
跨平台	优	优	差/优（react native）

三、移动开发方式详解

3.1 响应式移动站点（M站）详解

3.2 Hybird APP详解

Native主体型
- JS与WebView交互；
  - 传参；
  - 调用方法；

3.3 Native APP详解（非使用web技术开发，作为与web技术的对比）

　

　

　

　

　　

参考资料：

（1）响应式移动站点（M站）、hybirdapp、nativeapp介绍： http://blog.csdn.net/mahoking/article/details/30235243

（2）webview&js基本交互： http://www.jianshu.com/p/6a7c91f1d804

（3）hybird性能优化： http://blog.csdn.net/stpeace/article/details/50279783

★（4）hybird之Web主体型——该种APP开发方式的解释&ionic布局入门： http://ionichina.com/topic/551b549e53c5c8f4148ef894

（5）react native中文站： http://reactnative.cn/

★（6）hybird之Web主体型——Web APP在MDN中的学习指南：https://developer.mozilla.org/zh-CN/Apps

　

　

（未完待续……）

　

更新说明：本文采用版本记录 + 标记更新 的方式进行更新标记。

- 对较为明显的改动进行历史记录；

- 更新后，最新内容会有 ★号标记；