H5移动开发

H5移动开发

一、H5移动开发颠覆原生

移动端跨平台开发的各种技术

1、移动应用现状

• 移动端应用有这几种：WebAPP、NativeAPP、HybridApp
• WebAPP就是网站，HTML+CSS+JS开发，用浏览器访问
• UA，UserAgent（用户代理）

• 跨终端web适配方式：（使用谷歌浏览器，测试F12，各个大型公司主要是用前两种）

  • 多模版形式 —–百度
  • 跳转形式 —–淘宝
  • 响应式解决 —–bootstrap

• NativeAPP 是用原生语言开发，用户需要下载安装手机应用，相对于WebAPP可以离线应用，不需要联网，但是开发成本大，敏捷程度低，开发效率低

• HybridApp中和了WebAPP、NativeAPP各自的优势，使用HTML+CSS+JS开发，兼容多个平台，用户也需要下载安装，并调用手机的摄像头、通讯录功能，HybridApp的静态资源也在手机本地。

2、HTML5垫付原生开发的意义和原因

• 成本
• 利润
• 风险
• 敏捷
• 应用开发会提交到应用商店审核
• 迭代

3、HTML5未来趋势分析

• 入口单一
• 简单应用H5

4、HTML5学习路线

• 开发环境
  
  • 好的编辑器如Sublime、Atom、Visual Studio Code
    
    • Sublime Text3安装包管理插件一直出问题，不只是系统原因还是其他原因，这里建议不要安装官方的exe程序，而是使用免安装的压缩包 ，选择对应平台的对应版本，下载解压之后，复制解压后的文件到需要的程序安装目录，建议不要放在C盘，之后可以将解压后的文件中exe启动程序固定到开始屏幕，便于使用，之后下载安装包管理器，打开exe程序，在view-show control打开控制台输入网页中的命令，安装成功，在菜单栏preference菜单下有package control目录，可以使用Ctrl+shift+P，打开包管理器，选择需要安装的插件，进行安装，详细视频教程可以参考这里，重新安装在win7上，果然插件安装成功，估计还是win10系统的问题，才会出现这么多坑，无奈之下，在win7上安装解压版的，再移植到win10系统。当然如果win10系统想直接安装的话也可以手动安装，比如Markdown Preview，可通过手动安装，在页面下方有一个Manual Install的选项，如下图所示，依照步骤，亲测可用。同样手动安装的方法也适用于其他插件，具体看各个插件是否有手动安装的步骤;但是有时候手动安装的方式也无效（有些插件并非官方出品），这时候就只能在win7上安装好，再复制整个软件打包移植到win10系统。
  • 好的浏览器，推荐Google Chrome
  • 手机，iOS和Android、

• 基础知识储备

  • 打好基本功：HTML+CSS+JS
  • JavaScript很重要
  • 多做一些基础案列

• Framework

  • BootStrp
  • Semantic UI
  • AngularJS
  • zeptojs

• 移动web

- 移动APP

常见的开发方式

• Cordova（前身是PhoneGap）科尔多瓦
  
  • 官网
  • 中间件桥接
  • 淘宝 NPM 镜像（NPM是node.js的一个包管理工具，node package manage的缩写）
    PS:Cordova是一个平台，需要前提是安装配置Node.JS环境,

• 快速入门
  
  • 安装Cordova
    
    • Cordova命令行运行在Node.js上，可在 NPM上使用。遵循平台的具体指导 ，以安装其他平台依赖关系。打开命令提示符或终端，然后键入npm install -g cordova。
  • 创建一个项目
    
    • 使用命令行工具创建一个空白Cordova项目。导航到要创建项目的目录，然后键入cordova create 。对于一整套选项，键入cordova help create。
  • 添加一个平台
    
    • 创建Cordova项目后，导航到项目目录。从项目目录中，您需要添加一个要构建应用程序的平台。要添加平台，请键入cordova platform add 。有关您可以添加，运行的完整平台列表cordova platform。
  • 运行你的应用程序
    
    • 从命令行运行cordova run 。
  • 文档
  • Cordova应用程序架构的高级视图
    
  • 插件
    
    • 插件是科尔多瓦生态系统的组成部分。它们为Cordova和本机组件提供了一个接口，用于彼此通信并绑定到标准设备API。这使您能够从JavaScript调用本机代码。
    • pache Cordova项目维护了一组名为 Core Plugins的插件。这些核心插件为您的应用程序提供访问设备功能，如电池，摄像头，联系人等。
    • 除了核心插件之外，还有几个第三方插件可以提供对所有平台上不一定可用的功能的附加绑定。您可以使用插件搜索或npm搜索Cordova插件。您还可以开发自己的插件，如插件开发指南中所述 。插件可能是必要的，例如，在Cordova和自定义的本机组件之间进行通信。

注意：创建Cordova项目时，它没有任何插件。这是新的默认行为。任何您想要的插件，即使是核心插件，都必须明确添加。

• HTML5+

  • 官网
  • Native.js

• Rective Native

  • React Native 中文网

  - 官网