Hybrid选型和PhoneGap开发环境搭建

时间 2019-11-09

标签 hybrid 选型 phonegap 开发环境搭建栏目 Hybrid 繁體版

原文原文链接

简介

主流的Hybrid App如今有两种方案：html

以PhoneGap为表明，使用HTML页面进行构建的App
以Titanium为表明，经过NodeJS驱动编译Native层的代码，从而产生近似于Native的效果

关于Titanium，在另一篇文章里作尝试，今天纪录的是PhoneGap开发的环境搭建java

WHY (为何要这么作)

对于使用native和hybrid的哪个能更好的开发，常常会有争执。不谈争执，只说为何要选择hybridnode

开发速度快。早期以Hybrid进行快速开发快速试错，甚至能够在其中采用ABTesting验证哪种设计更好，当版本逐渐稳定，从Hybrid过分到Native能够说是如今最好的开发模式
快速发布。若是没有淘宝或者微信的推送更新功能，那仍是考虑用Hybrid的增量更新功能，甚至有些活动页面能够直接访问线上站点，提升更新的效率，绕开了某些store的审核机制
大规模团队协做。以模块进行切分，最后合并不须要作总体的build优化了开发的效率

因此选型上就直接选择了hybrid毕竟开发人员少的状况下这是最好的方案，比较了国内的AppCan没有犹豫的选择了PhoneGap，后者开发的时间长，文档和各类辅助工具齐全。android

HOWTO (如何去作)

PhoneGap号称已经免费了，可是考虑到它有收费的不良记录仍是采用了它的开源版本cordova，cordova 是基于 apache 协议进行开发的。ios

在开发过程当中采用了基于nodejs的The Command-Line Interfacegit

安装nodejs
安装coordova模块angularjs
```
sudo npm install -g cordova
```
这个安装过程须要花费很长的时间，推荐采用淘宝的npm镜像github
安装android开发环境而且配置环境变量，在Terminal里面输入android看看有没有android的版本管理器出来就说明配置有没有作好，关于如何配置环境变量搜素一下，mac推荐看这里
安装ant，cordova采用ant来作的持续集成，须要配置ant环境，搜素一下，mac的看这里
建立HelloWorld执行命令web
```
cordova create hello com.example.hello HelloWorld
```
这个过程异常的艰难，但愿你有个好网络macos
配置开发平台，进入hello目录，执行
```
cordova platform add android
```
编译
```
cordova build
```
安装，很是不喜欢虚拟机，因此直接插上android运行
```
cordova run android
```
若是但愿启动虚拟机
```
cordova emulate android
```
而后一个很傻的，没有什么功能的应用就装在手机上了
进一步开发，用Android Studio导入工程，在\hello\www目录下就是html开发内容，hybrid的开发就在这里作

在这个阶段中对环境变量的修改

export PATH="$PATH:/Users/xxx/android-sdk-macosx/platform-tools"
export PATH="$PATH:/Users/xxx/android-sdk-macosx/tools"
export PATH="$PATH:/Users/xxx/android-sdk-macosx"
export PATH="$PATH:/Users/xxx/apache-ant-1.9.4/bin"
export JAVA_HOME=`/usr/libexec/java_home`

SUPPLEMENT（补充）

mobile web ui的选型，列举一下如今流行的一些ui库做为选型的标的

ionic
famo

famo与angularjs进行了深度的整合，可是考虑到ionic对cordova的封装，准备用ionic

安装ionic cli
```
$ npm install -g cordova ionic
```

建立项目

$ ionic start myApp tabs

这个步骤很是的耗费时间，网络啊网络

➜  Project  ionic start bee-app tabs
Creating Ionic app in folder /Users/xxx/myApp based on tabs project

The directory /Users/xxx/myApp already exists.
Would you like to overwrite the directory with this new project?
(yes/no): yes

Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================]  100%  0.0s

Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
[=============================]  100%  0.0s

Update config.xml
Initializing cordova project
Fetching plugin "org.apache.cordova.device" via plugin registry
Fetching plugin "org.apache.cordova.console" via plugin registry
Fetching plugin "com.ionic.keyboard" via plugin registry

Your Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd myApp

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or visit the Ionic docs: http://ionicframework.com/docs

+---------------------------------------------------------+
+ New Ionic Updates for February 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Add ngCordova to your project for easy device API access
+ bower install ngCordova
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
+---------------------------------------------------------+

Create an ionic.io account to use the Ionic View app and other features?
(Y/n): Y

注册ionic

在ionic start的最后询问是否Create an ionic.io account to use the Ionic View app and other features?，选择Y，进行账号注册
更新项目
```
$ ionic login 
$ ionic upload
```

运行项目

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic run android

Hybrid选型和PhoneGap开发环境搭建

简介

WHY (为何要这么作)

HOWTO (如何去作)

SUPPLEMENT（补充）

REFERENCE (参考)