敞开成长之旅！这是我参与「日新计划 12 月更文应战」的第15天，点击检查活动概况

什么是混合移动App开发【要点】

  1. 苹果上的软件是怎么开发出来的：运用的是 OC、或许运用Swift这门言语
  2. 安卓渠道上的软件又是怎么开发出来的：运用安卓相关的言语开发的，Java，安卓的控件进行开发
  3. 苹果和安卓渠道上共有的软件是怎么开发出来的：腾讯招两套开发人员【开发组】，手机京东
  4. 前端移动 App（Application）开发技能，去开发手机端的运用程序；
  5. 前端的混合移动App开发技能，并没有运用 苹果 或 安卓 官方引荐的 开发渠道和开发方法，而是扔掉了 官方供给的方法，运用 前端的独有的技能进行移动App开发体会；

什么是移动App开发：浅显的理解，便是把开发Web网站的技能（HTML+CSS+JS），经过某种方法，移植到移动App开发上进行运用，这种运用Web开发技能进行移动端开发体会的方法，叫做混合移动App开发！

关于移动App开发，需求知道的几个概念：

  • 原生开发：它的英文单词是（NativeApp）,指的便是运用 IOS、Android 官方供给的东西、开发渠道、配套言语进行 手机App开发的方法；

  • 混合开发：（HybirdApp）便是运用前端已有的技能，HTML + CSS + JS ，然后再调配一些相关的打包编译技能，就能够开发出一个手机App，装置到手机中进行运用；

  • 什么是App：App是（Application的缩写），意思是：可装置的运用程序；

  • App的分类：

    • 依照渠道来区分：
      • PC端：浏览器、代码编辑器、PC端的游戏、听歌的、看视频的、谈天的
      • 移动端：手机QQ、手机微信、手机爱奇艺、亡者农药
    • 依照功能来区分：
      • 游戏：愤恨的小鸡仔、植物大战僵尸、亡者农药…..LOL
      • 运用：非游戏类的软件，支付宝、陌陌、美团外卖、

  • App和Web的区别：

    • APP概念：App是（Application的缩写），意思是：可装置的运用程序；

    • 长处：流通、稳定、根本上一些App都能够脱网运转，用户体会好；

    • 缺陷：不能跨渠道

    • Web概念：特指那些根据浏览器的web网站（本质：便是网页）

    • 长处：能够跨渠道（浏览器天生便是跨渠道的）
    • 缺陷：没有App流通、不稳定，受限于网速和网络

为什么要学混合App开发

从程序员的视点剖析：

  1. 挣钱多（他人不会的你会，他人会的，你精通）
  2. 关于找作业来说：（React Native）市场需求量大，好找作业，提高咱们的职业竞争力
  3. 能接触到前端流行的技能和结构（各大公司根本都再用React），留意：再React中咱们全部都运用ES6语法（class）
  • 前端是一个永恒的职业???（只需世界上还有浏览器的存在，必定需求前端，只不过，跟着时刻的推移，技能更新换代，或许咱们对新技能的要求会越来高）
  • 屌丝的兴起之路：只能做页面 -> Ajax前后台数据交互 -> Jquery、Bootstrap -> webApp -> 三大结构 -> 能够做手机混合App/桌面运用 -> 能够做手机原生App -> 将来或许能够发射火箭发射卫星发射导弹 -> 终极目标：统一全宇宙
  1. （搞前端App开发）能购置一批牛逼的设备【苹果笔记本、IOS测验机、安卓手机（三星的、华为、小米）】

从企业的视点剖析:(挑选合适本身的移动App开发方法)【要点】

  • 节省开发成本
  • 从工资上：尽最大的或许，压榨员工的剩余劳动力
  • 从时刻上：由于 原生的安卓和IOS开发，它们的开发效率并不是很高，由于原生的代码复杂度比较高，因而原生的开发周期比较慢；假如采用移动App开发，那么，咱们的开发周期会很短；由于 HTML + CSS + JS 足够简略；（关于前端开发APP来说，有两种方法，其中，比较早的一种，也是比较简略的一种，便是 先开发出一个网站， 然后再把网站运转一行打包的指令，就能得到一个 APP了）
  1. 市面上常见的App开发方法

  • WebApp：根据浏览器完成的，有特定功能的网站，称作WebApp

    • 例如：百度脑图、m.jd.com/、https://m.…
    • 长处：跨渠道
    • 缺陷：依靠网络，有白屏效果，相对来说，用户体会差；不能调用硬件底层得设备，比如摄像头；

  • NativeApp：用android和Object-C等原生言语开发的运用

    • 长处：体会好；用户运用起来很流通；十分适合做游戏【性能高】；能够直接调用硬件底层的API；
    • 缺陷：不能跨渠道

  • HybirdApp：运用前端所学的常识去开发移动端App，兼具2者的优势

    • 长处：能够跨渠道；体会会好一些；也能够调用硬件底层的API
    • 缺陷：相关于原生体会稍微弱一丢丢；不适合做游戏；适合做非游戏类型的手机App；
    • 运用场景：

  • 留意： 运用 Java 或许 IOS 写出来的代码和程序，在终究运转的时分，普通的文本代码，都会被编译为 原生的机器码去运转，并不像 JS 这样，解析履行，Java代码是 编译履行的；

  1. 三种开发方法的原理和对比
    什么是混合移动App开发？

什么是混合移动App开发？

  1. 谁在运用React Native？？？

企业怎么挑选合适自己的App开发方法

  1. 假如这个企业中，从前运用原生技能开发过一些APP，那么在保护的时分，必定需求运用原生技能来保护
  2. 假如企业中，需求做一些游戏级别的运用，那么引荐运用原生，由于原生运转效率高，对耗电量处理的很好；
  3. 假如企业做一些运用级别的非游戏软件，比如 淘宝、京东、美团，就能够运用 混合APP了；
  4. 在企业中，最主要的是好的点子，假如有了一个好的项目立案，那么最好要立即把这个项目做出来；这时分，运用混合App十分合适，由于开发周期很短，能快速上线，抢先占领市场；【裤衩开发】

企业中项目开发流程

  • 需求调研：产品定位、受众群体、市场需求、开发价值；【产出物：需求文档】
  • 产品规划：功能模块、流程逻辑；【产出物：规划文档，交互稿】，确认项目的根本功能；
  • 项目开发：项目架构、美工、前端、后台、测验【产品的把控】要理解前后端分离的概念
  • 运营保护：上线试运转、调Bug、微调功能模块、产品迭代

根据需求搞规划，根据规划做开发

企业技能选型 – 几大干流技能之间的联系

  1. Angular.js 和 Ionic
  • Angular1官网
  • Angular2官网
  • Ionic 中文网
  • Ionic 英文官网
  1. Vue.js 和 Weex
  • Vue.js官网
  • Weex文档
  • Weex – github地址 – 新
  • Weex – github地址 – 旧
  1. React.js 和 React-Native
  • React.js英文官网
  • ReactNative中文网
  • ReactNative英文网

Angular, Vue, React 这三个都是前端结构，咱们在进行混合App开发的时分，仅仅用到了这三个结构的【基础语法】罢了； Ionic， Weex， ReactNatvie 这三个都是打包东西（供给了相关的指令行，只需运转指定的指令，就能够把项目打包成一个手机App出来），能够把咱们开发出来的运用，终究打包成一个可装置的手机端程序装置包；一起，这三个东西，也供给了好用的一些小组件，便利咱们去构建移动App的用户界面；

前端混合App开发结构

  1. Html5+、ReactNative、Weex、Ionic
  2. 认识HTML5+
  • h5+是一个产业联盟，它有一些互联网成员，专门在我国推广H5
  1. HBuilder官网

开发结构之间的区别

  1. Html5+ 和 Ionic
  2. ReactNative 和 Weex

运用HBuilder生成安卓运用（在线）

API地址 Hbuilder这个东西，是一个在线打包东西，运用很便利，不需求在本地装备开发环境；直接将做好的网站，经过一些简略的操作，就能在线打包为一个App出来；

  • 在项目上右键 -> 发行 -> 发行为原生装置包

优点：本地不用装备开发环境；操作便利，关于程序员来说不关心打包的进程，打包进程关于咱们来说是透明的； 缺陷：程序员很少能干预打包的进程；源代码被提交到了云端的服务器，存在项目中心代码被泄露的危险；

环境变量的运用

效果：将需求大局运用的东西或许运用程序，装备到Path环境变量中，能够很便利的经过指令行的形式，在任何想要运转这些运用程序的当地，运转它们；

移动App开发环境装备【要点】

装置最新版别的java jdk

  1. 修改环境变量，新增JAVA_HOME的体系环境变量，值为C:Program Files (x86)Javajdk1.8.0_112，也便是装置JDK的根目录
  2. 修改体系环境变量Path，在Path之后新增%JAVA_HOME%bin;%JAVA_HOME%jrebin;
  3. 新建体系环境变量CLASSPATH，值为.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar;
  4. 保存一切的体系环境变量，一起退出体系环境变量装备窗口，然后运转cmd指令行东西，输入javac，假如能出现javac的指令选项，就表示装备成功！

装置Node.js环境

留意：需求装置最新的长时间稳定版别，不要实验版别；装置结束之后的node.js会主动装备到大局体系环境变量中 装置结束后，能够输入node -v检查node版别号；

装置C++环境

大多数情况下操作体系自带C++环境，不需求手动装置C++环境； 假如运转报错，则需求手动装置visual studio中的C++环境；

装置Git环境

Git装置结束后，会主动装备到体系环境变量中； 能够经过运转git --version来检查是否正确装置和装备了Git的环境变量；

装置Python环境

  1. 留意：装置Python时分，只能装置2.的版别，留意勾选装置界面上的Add Python to path，这样才干主动将Python装置到体系环境变量中；
  2. 装置结束之后，能够在指令行中运转python，检查是否成功装置了python。

装备安卓环境

  1. 装置installer_r24.3.4-windows.exe，最好手动挑选装置到C盘下的android目录
  2. 翻开装置的目录，将android-25、android-23(react-native有必要依靠这个)解压后，放到platforms文件夹下
  3. 解压platform-tools，放到platform-tools文件夹下
  4. 【这一步直接疏忽即可！】tools文件夹不解压覆盖也行；解压tools，放到装置根目录中
  5. 解压build-tools_r23.0.1-windows.zip(react-native有必要依靠这个)、build-tools_r23.0.2-windows.zip(weex有必要依靠这个)和build-tools_r23.0.3-windows.zip，并将解压出来的文件夹，分别改名为版别号23.0.1、23.0.2和23.0.3；在装置目录中新建文件夹build-tools，并将改名为版别号之后的文件夹，放到新创立出来的build-tools文件夹下
  6. 在装置目录中，新建extras文件夹，在extras文件夹下新建android文件夹；解压m2responsitory文件夹和support文件夹，放到新建的extras -> android文件夹下
  7. 装备装置环境变量：在体系环境变量中新建ANDROID_HOME，值为android SDK Manager的装置途径C:UsersliulongbinAppDataLocalAndroidandroid-sdk，紧接着，在Path中新增;%ANDROID_HOME%tools;%ANDROID_HOME%platform-tools;

ReactNative快速打包

  1. 装置完node后建议设置npm镜像以加速后面的进程（或运用科学上网东西）。留意：**不要运用cnpm！**cnpm装置的模块途径比较奇怪，packager不能正常辨认！

npm config set registry registry.npm.taobao.org –global
npm config set disturl npm.taobao.org/dist –global

  1. Yarn、React Native的指令行东西（react-native-cli）

  • Yarn是Facebook供给的替代npm的东西，能够加速node模块的下载。React Native的指令行东西用于履行创立、初始化、更新项目、运转打包服务（packager）等使命。

    npm install -g yarn react-native-cli

  • 装置完yarn后同理也要设置镜像源：

    yarn config set registry registry.npm.taobao.org –global
    yarn config set disturl npm.taobao.org/dist –global

  1. 运转react-native init AwesomeProject创立React-Native项目
  2. 运转cd AwesomeProject切换到项目根目录中，运转adb devices来保证有设备连接到了电脑上
  3. 运转react-native run-android打包编译安卓项目，并布置到模拟器或开发机中
  4. 运转上一条指令之前，要保证有设备连接到了电脑上，能够运转adb devices检查当前接入的设备列表，打包好的文件，放到了androidappbuildoutputsapk目录下
  5. 入坑攻略

问题1：敞开悬浮框权限；
问题2：Could not get BatchedBridge, make sure your bundle is packaged correctly
解决方案：在终端中，进入到项目的根目录，履行下面这段指令行：
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
运转之前，需求保证android/app/src/main/目录下有assets文件夹，假如没有，手动创立之~，再运转上面的指令；
问题3：could not connect to development server
解决方案：晃动手机，引发设置属性窗口，点击“Dev settings”，再点击Debuug server host 出现设置ip地址窗口，填写Ip地址和端口号8081，例如192.168.1.111:8081

Weex快速打包

  1. 装置依靠:Weex 官方供给了 weex-toolkit 的脚手架东西来辅助开发和调试。首先，你需求最新稳定版的 Node.js 和 Weex CLi。
  2. 运转npm install -g weex-toolkit装置Weex 官方供给的 weex-toolkit 脚手架东西到大局环境中
  3. 运转weex create project-name初始化Weex项目
  4. 进入到项目的根目录中，翻开cmd窗口，运转weex platform add android装置android模板，初次装置模板时，等待时刻较长，建议fq装置模板
  5. 翻开android studio中的安卓模拟器，或许将启用USB调试的真机连接到电脑上，运转weex run android，打包布置weex项目
  6. 布置完成，检查项目效果