phonegap已经不再是phonegap,而是phonegap build,用来打包的。
以前phonegap中,用来JS与native通信的模块,现在叫做cordova,也就是现在要套壳的话,是套cordova。
安装
sudo npm install -g cordova
1 | sudo npm install -g cordova |
---|
坑一:公司内网,公司内网npm镜像会遇到部位外链依赖下载不了。
坑二:部分npm包在安装的时候需要编译,Mac默认没有安装编译器(如Linux的GCC),需要手动安装Xcode Command Line Tools。
坑三:用外网吧,内网无形中增加各种bug。
初始化项目
cordova create helloWorld info.mxgw "helloWorld" cd helloWorld cordova platform add ios
123 | cordova create helloWorld info.mxgw "helloWorld"cd helloWorldcordova platform add ios |
---|
此时,helloWorld目录下面,会有www目录,将我们的页面放到该目录中,并在页面中引入cordova.js
编译cordova,生成Xcode的项目
cordova prepare 或者 cordova build
1 | cordova prepare 或者 cordova build |
---|
两个命令的区别在于:
prepare,在Xcode里面需要再build,才能运行。
build,在Xcode中不需要再build,可直接运行。
此时在helloWorld/platforms/ios里面,就有了我们iOS的项目代码,此时可以直接Xcode打开,并编译运行,有证书的还可以真机运行测试。
调用二维码插件
https://github.com/wildabeast/BarcodeScanner
安装插件的方式,在终端里面,输入
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
1 | cordova plugin add https://github.com/wildabeast/BarcodeScanner.git |
---|
然后重新执行一次cordova的编译
cordova prepare 或者 cordova build
1 | cordova prepare 或者 cordova build |
---|
这个时候,在页面中,就可以通过如下方式调用扫描二维码功能了。
cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com", function(success) { alert("encode success: " success); }, function(fail) { alert("encoding failed: " fail); });
12345 | cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com", function(success) { alert("encode success: " success);}, function(fail) { alert("encoding failed: " fail);}); |
---|
使用插件注意事项
1、cordova.js文件必须置于cordova生成的www目录下面。
2、 cordova plugin add 方式安装完插件后,cordova_plugin.js的内容会变成我们插件的相关依赖(例如这里会变成AMD的方式声明依赖barcodeScanner.js文件)。
3、我们不需要在页面写明引入cordova_plugin.js和barcodeScanner.js。只需要再执行 cordova prepare 一次,cordova.js会自动引入cordova_plugin.js到页面中,并将相关插件(barcodeScanner.js)引入到页面中。