iOS版Cordova安装开发

之前有个做ffmpeg的大神。由于公司开发app的过程中需要有音视频播放(后期会有直播)这一块,老总是一位5,60岁的超级大佬,不用网上的第三方云服务(百度云,七牛云...)播放音视频.无奈自己去研究ffmpeg这一块。由于在ffmpeg这一块”略懂“,在群里就碰到上面说的ffmpeg大神。推荐我先了解下Cordova插件,后期自己自定义插件。然后我就有幸接触这一块。本着多学一些技多不压身的态度去看看学学。

Cordova:

在介绍Cordova之前,必须先提一下PhoneGap。PhoneGap 是Nitobi软件公司2008年推出的一个框架,旨在弥补web 和iOS 之间的不足,使得web 和 iPhone SDK 之间的交互更容易。后来又加入了Android SDK 和BlackBerry SDK,再然后又陆续加入了更多的平台。但是在2011年,Nitobi公司被Adobe收购,PhoneGap也被提交到Apache Incubator。由于Adobe现在拥有PhoneGap商标,PhoneGap v2.0版产品就更名为Apache Cordova。据说Cordova是Nitobi团队当时坐落的街道名称,用此名来纪念Nitobi团队的贡献。Apache Cordova是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。

提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

什么是Cordova插件?

插件就是一些附加代码用来提供原生组件的JavaScript接口,他允许你的App可以使用原生设备的能力,超越了纯粹的Web App。

Cordova工程结构

从下面这幅图可以看出Cordova工程的结构,以及与Native API 之间的关系。

iOS版Cordova安装开发_第1张图片

由上图可以看出,其实Cordova的使用分为上面几个框架结构,在Native与web之间交互。

Cordova的安装

安装cordova命令行工具,贴出官网的步骤:(可以去官网看看)

$ npm install -g cordova

$ cordova create MyApp

$ cd MyApp

$ cordova platform add ios

$ cordova run ios

官网就是官网的,对于小白来说还是看不懂。

下面贴出自己的实践过程:

1.下载Node.js

我下载的是最新版本8.1.0

iOS版Cordova安装开发_第2张图片
Mac 电脑,下载后双击,一直next

下载后在终端:sudo npm install -g cordova

iOS版Cordova安装开发_第3张图片
sudo npm install -g cordova
iOS版Cordova安装开发_第4张图片
sudo npm install -g cordova

2.sudo cordova create myDemo com.ztt.myDemo.hello HelloWorld

(下面的2个图片是没有加sudo权限的cordova create myDemo com.ztt.myDemo.hello HelloWorld,直接提示我

localhost:~ hqtech$ cordova/usr/local/lib/node_modules/cordova/node_modules/configstore/index.js:53 

throw err;

^

Error: EACCES: permission denied, open'/Users/hqtech/.config/configstore/update-notifier-cordova.json'

You don't have access to this file.

不能访问这个文件,因为没权限,解决的办法:

A.直接在每个命令前+sudo

B.切换到su权限下,以后的命令就不要+sudo了

iOS版Cordova安装开发_第5张图片
iOS版Cordova安装开发_第6张图片

A.直接在每个命令前+sudo

iOS版Cordova安装开发_第7张图片
sudo cordova create myDemo com.ztt.mydemo.hello HelloWorld

B.切换到su权限下,以后的命令就不要+sudo了

iOS版Cordova安装开发_第8张图片
sudo passwd root 作者更倾向于第一种方法,看的直观

3.cd myDemo

iOS版Cordova安装开发_第9张图片
cd myDemo

4.cordova platform add ios(此处的ios都是小写的)

iOS版Cordova安装开发_第10张图片
cordova platform add iOS

5.sudo cordova build

iOS版Cordova安装开发_第11张图片
sudo cordova build
iOS版Cordova安装开发_第12张图片

到这里cordova的创建算是告一段落

打开工程

iOS版Cordova安装开发_第13张图片
iOS版Cordova安装开发_第14张图片
iOS版Cordova安装开发_第15张图片

cordova安装的坑(勿踩)

1.The file “HelloWorld.xcworkspace” could not be unlocked.

iOS版Cordova安装开发_第16张图片

选中工程文件夹点右键,在 “显示简介"——>"共享与权限"——>"-+"号。 添加本用户(就是你登录的那个账号),授予读写权限,并点击下方的设置符号选择"应用到包含的项目",操作如下图:

iOS版Cordova安装开发_第17张图片

2.Error: Path already exists and is not empty: /Users/zhaotong/Desktop/cordova/Demo

iOS版Cordova安装开发_第18张图片

原因是在cordova的目录下已经存在一个名为Demo 的文件夹

3.Error:Unexpeced token H in JSON at position 0

iOS版Cordova安装开发_第19张图片
Error:Unexpeced token H in JSON at position 0

解决:创建的命令检查下

对的:sudo cordova create myDemo com zit.mydemo.hello HelloWorld

输入密码时:是英文的输入法(犯了低级❌)

4.就是权限问题,每次命令时我的都要+sudo

配置后的demo工程地址:https://github.com/mrzhao12/cordovaDemo

总的来说cordova的第一次接触坑还是很多了,至于以后的cordova自定义插件,还是慢慢学吧,阿弥陀佛

你可能感兴趣的:(iOS版Cordova安装开发)