混合app开发介绍---入门级

混合app开发

混合app开发介绍

• application（应用）
• 用前端的知识（html,css,js）开发出来手机App的方式就叫做混合App开发

App开发的三种类型

• WebApp:跑在手机浏览器中运行的web应用（微信公众号，微信小程序）
• NativeApp:用android和Object-C等原生语言开发的应用
• HybridApp:就是在Html5网站外面加了一个原生的容器，兼具2者的优势

App开发三种方式原理对比图

三种App开发优缺点对比图

企业如何选择用那种方式开发产品那？

• 企业要根据自身的特点进行app开发方式的选择，不要为了混合而混合
• 混合app开发方式不是银弹,混合app更适合为初创型公司快速占领市场，还有业务型的app更适合用
• 混合app的开发方式是未来的主流趋势。
  
  • 原生混合html页面
  • html页面加原生容器的壳子

App开发的一些常见平台

混合App的

Ionic

• Ionic官网 http://ionicframework.com/
• Ionic中文网 http://www.ionic.wang/

Html5+

• 官网http://www.dcloud.io/

AppCan

• 官网地址:http://www.appcan.cn/

原生App的

ReactNative

• RN官网https://facebook.github.io/react-native/
• RN中文网http://react-native.cn/

weex

• weex官网http://alibaba.github.io/weex/

webApp的

微信公众号

• https://my.oschina.net/u/1416844/blog/796475
• https://my.oschina.net/u/1416844/blog/796470
• https://my.oschina.net/u/1416844/blog/796474

微信小程序

• https://my.oschina.net/u/1416844/blog/759209

混合app环境安装

注意

• 所有的开发环境都安装在c盘
• 所有目录不要出现中文

系统环境安装

java环境配置

• 在百度上搜索“java jdk下载”并安装
• 配置到全局变量JAVA_HOME中http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

Node环境配置

• node要下载最新的LTS（长期支持版本）版本
• npm升级到最新版本
  
  • npm install npm@latest -g

c++环境配置

• 最好是用vs去安装c++环境

git环境配置

• 在百度搜”git下载”，并安装
• 配置到全局变量http://jingyan.baidu.com/article/9f7e7ec0b17cac6f2815548d.html

Python环境配置

• 在百度搜”python下载”，并安装
• 配置到全局变量http://jingyan.baidu.com/article/48206aeafdcf2a216ad6b316.html

android环境配置

Android ADT（android develop tools）安装

• android的环境配置有很多种方式，我们选择的是手动安装方式
  
  • Android Studio
  • Eclipse
  • 手动安装

• 从http://www.androiddevtools.cn/下载android所需要的包

  

• 点击installer_r24.3.4-windows进行安装，其他文件只需要解压缩后，放置结构如下图即可。Android项目结构

  • build-toos有些特殊，文件夹必须是版本号

  

• Android-sdk
  Platform-tools
  Tools
  Build-tools
  extras
  一共有6个东西需要安装

Android环境变量配置

• ANDROID_HOME：C:\Program Files\android（有tools文件夹的根目录）
• path：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
• 在命令窗口输入adb进行检测

混合app快速开始

下载项目并打包