本文通过构建一个简单的相册功能,来演示如何使用 ionic 和 cordova 来扩展应用使用相机和本地存储(sqlite)的能力。本文参考了 ionic 的官方文档中的一个案例,只是更简化,并且修正了官方案例不能在 ionic 4 中运行的问题。如果想参考官方文档,可以直接访问: Your First Ionic App: Angular
安装 cordova
1
yarn global add cordova
系统显示
1 2 3 4 5 6 7 8 9 10
yarn global v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.9: The platform "win32" is incompatible with this module. info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "cordova@9.0.0" with binaries: - cordova Done in 21.71s.
yarn add v1.16.0 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.9: The platform "win32" is incompatible with this module. info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 46 new dependencies. info Direct dependencies ├─ @ionic-native/camera@5.10.0 ├─ cordova-android@8.0.0 ├─ cordova-plugin-device@2.0.3 ├─ cordova-plugin-ionic-keyboard@2.1.3 ├─ cordova-plugin-ionic-webview@4.1.1 ├─ cordova-plugin-splashscreen@5.0.3 ├─ cordova-plugin-statusbar@2.4.3 └─ cordova-plugin-whitelist@1.3.4 info All dependencies ├─ @ionic-native/camera@5.10.0 ├─ android-versions@1.4.0 ├─ ansi@0.3.1 ├─ base64-js@1.3.0 ├─ big-integer@1.6.44 ├─ bplist-parser@0.1.1 ├─ cordova-android@8.0.0 ├─ cordova-common@3.2.0 ├─ cordova-plugin-device@2.0.3 ├─ cordova-plugin-ionic-keyboard@2.1.3 ├─ cordova-plugin-ionic-webview@4.1.1 ├─ cordova-plugin-splashscreen@5.0.3 ├─ cordova-plugin-statusbar@2.4.3 ├─ cordova-plugin-whitelist@1.3.4 ├─ cross-spawn@6.0.5 ├─ dedent@0.7.0 ├─ deep-equal@1.0.1 ├─ define-properties@1.1.3 ├─ defined@1.0.0 ├─ elementtree@0.1.7 ├─ endent@1.3.0 ├─ es-abstract@1.13.0 ├─ es-to-primitive@1.2.0 ├─ fast-json-parse@1.0.3 ├─ for-each@0.3.3 ├─ fs-extra@8.1.0 ├─ has-symbols@1.0.0 ├─ has@1.0.3 ├─ is-date-object@1.0.1 ├─ is-regex@1.0.4 ├─ is-symbol@1.0.2 ├─ minimist@1.2.0 ├─ object-inspect@1.6.0 ├─ objectorarray@1.0.3 ├─ plist@3.0.1 ├─ properties-parser@0.3.1 ├─ resolve@1.11.1 ├─ resumer@0.0.0 ├─ shelljs@0.5.3 ├─ string.prototype.codepointat@0.2.1 ├─ string.prototype.trim@1.1.2 ├─ tape@4.11.0 ├─ through@2.3.8 ├─ underscore@1.9.1 ├─ xmlbuilder@9.0.7 └─ xmldom@0.1.27 Done in 176.87s.
1
ionic cordova plugin add cordova-plugin-camera
系统提示
1 2 3 4 5 6 7
> cordova.cmd plugin add cordova-plugin-camera
You have been opted out of telemetry. To change this, run: cordova telemetry on. Installing "cordova-plugin-camera"for android Subproject Path: CordovaLib Subproject Path: app Adding cordova-plugin-camera to package.json
在 config.xml 文件中增加以下内容:
1 2 3 4
<!-- Required for iOS 10: Camera permission prompt --> <edit-configfile="*-Info.plist"mode="merge"target="NSCameraUsageDescription"> <string>Used to take pictures</string> </edit-config>
添加本地存储插件
1
ionic cordova plugin add cordova-sqlite-storage
系统显示
1 2 3 4 5 6 7 8
> cordova.cmd plugin add cordova-sqlite-storage
You have been opted out of telemetry. To change this, run: cordova telemetry on. Installing "cordova-sqlite-storage"for android installing external dependencies via npm for package name: cordova-sqlite-storage npm install of external dependencies ok Adding cordova-sqlite-storage to package.json
1
yarn add @ionic/storage
系统显示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.9: The platform "win32" is incompatible with this module. info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 5 new dependencies. info Direct dependencies ├─ @ionic/storage@2.2.0 └─ cordova-sqlite-storage@3.2.1 info All dependencies ├─ @ionic/storage@2.2.0 ├─ cordova-sqlite-storage-dependencies@2.0.1 ├─ cordova-sqlite-storage@3.2.1 ├─ localforage-cordovasqlitedriver@1.7.0 └─ localforage@1.7.1 Done in 34.61s.
修改App模块,引入插件
打开 app.module.ts 文件,引入 Camera 和 IonicStorageModule 模块, 修改后的代码如下:
ionic serve --devapp > ng.cmd run app:ionic-cordova-serve --host=0.0.0.0 --port=8100 --cordova-mock --consolelogs --consolelogs-port=53703 [ng] WARNING: This is a simple server for use in testing or debugging Angular applications [ng] locally. It hasn't been reviewed for security issues. [ng] Binding this server to an open connection can result in compromising your application or [ng] computer. Using a different host than the one passed to the "--host" flag might result in [ng] websocket connection issues. You might need to use "--disableHostCheck" if that's the [ng] case. [INFO] Waiting for connectivity with ng...
[INFO] Browser window opened to http://localhost:8100!
并自动打开浏览器对应用进行访问。在浏览器中,可以看到开发的界面,但是当你按下拍照的按钮时,得到的是一个错误: “Native: tried calling Camera.getPicture, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator. Camera issue:cordova_not_available”, 说明在应用中用到的本地功能在浏览器中是不可用的。这时我们就需要用到 ionic 的测试工具了: Ionic DevApp。 “Ionic DevApp”是一个手机上运行的 App, 支持 iOS 和 Android 平台,可以到 App Store, Google Play 进行下载。