Mac下安装PhoneGap开发环境

看到挺多招聘启事上要求会Hybrid ,然后Google了一下说PhoneGap为现在比较专业的开发平台,所以研究了一下,把安装过程先搞一搞,由于我的电脑上装过ReactNative 开发环境,所以感觉配置还是挺简单的

1.安装NODEJS:http://nodejs.org/
2.进入终端命令行使用npm安装cordova 代码如下:

$ sudo npm install -g cordova

到这就算安装好了,一条命令还是感觉挺简单的,不过可能是我电脑乱码七糟的东西安装比较多的事哈!
3.创建工程

$cordova create hello com.example.hello HelloWorld

hello-- 为项目名称(目录)
com.example.hello--包名 也是ios下的Bundle ID名
HelloWord--工程名
4.配置ios开发环境

$ cd hello
$ cordova platform add ios

5.添加插件(根据需求添加) ---google 搜的

添加插件命令 cordova plugin add *  
  设备信息插件:  
  cordova plugin add org.apache.cordova.device  
  网络连接插件:  
  cordova plugin add org.apache.cordova.network-information  
  cordova plugin add org.apache.cordova.battery-status  
  陀螺仪:  
  cordova plugin add org.apache.cordova.device-motion  
  cordova plugin add org.apache.cordova.device-orientation  
  cordova plugin add org.apache.cordova.geolocation  
  摄像头拍照录制等:  
  cordova plugin add org.apache.cordova.camera  
  cordova plugin add org.apache.cordova.media-capture  
  cordova plugin add org.apache.cordova.media  
  访问文件:  
  cordova plugin add org.apache.cordova.file  
  cordova plugin add org.apache.cordova.file-transfer  
  提醒:  
  cordova plugin add org.apache.cordova.dialogs  
  cordova plugin add org.apache.cordova.vibration  
  联系人:  
  cordova plugin add org.apache.cordova.contacts  
  全球化:  
  cordova plugin add org.apache.cordova.globalization  
  闪屏(启动画面):  
  cordova plugin add org.apache.cordova.splashscreen  
  打开新的浏览器 (InAppBrowser):  
  cordova plugin add org.apache.cordova.inappbrowser  
  调试主控制台:  
  cordova plugin add org.apache.cordova.console

6.打开工程

Mac下安装PhoneGap开发环境_第1张图片
屏幕快照 2017-09-17 上午11.12.35.png

7.工程目录结构

Mac下安装PhoneGap开发环境_第2张图片
屏幕快照 2017-09-17 上午11.13.49.png

8.运行代码

Mac下安装PhoneGap开发环境_第3张图片
屏幕快照 2017-09-17 上午11.02.45.png

9.开发工具
开发工具最好选择Adobe Dreamweaver 我再往上的找的破解版
http://www.sdifen.com/dreamweaver-cs6-mac.html

  1. Dreamweaver 创建目录
Mac下安装PhoneGap开发环境_第4张图片
屏幕快照 2017-09-17 上午11.18.35.png

保存的时候保存到hello工程下的index.html进行替换


Mac下安装PhoneGap开发环境_第5张图片
屏幕快照 2017-09-17 上午11.20.54.png

各位亲千万不要替换错啦,一起在根目录下也有一个www文件夹呦

Mac下安装PhoneGap开发环境_第6张图片
屏幕快照 2017-09-17 上午11.26.17.png

10.最后再重新运行一下工程

Mac下安装PhoneGap开发环境_第7张图片
屏幕快照 2017-09-17 上午11.26.04.png

就算大功告成,剩下就是各位亲开始自己风骚的操作了。。。

你可能感兴趣的:(Mac下安装PhoneGap开发环境)