前两篇文章大概介绍了ionic以及页面的写法,这篇文章主要讲一下cordova
的用法(其实也没啥好讲的)和项目结尾工作
1. cordova的使用
由于之前那个简单的项目有一个更换头像的功能,可以拍照也可以选择本地图片。这个涉及到调用设备的相册和相机。
在ionic
官网上的Native
中的列表中搜索camera
,正好这个既可以拍照也可以选择照片(单选,可以满足我们的需求)。
- 在
App.module.ts
全局引入Camera
- 在所需的页面使用
Camera
- 写代码
- 写完代码需要打包在模拟器或真机上测试
- 测试?了就可以继续其他功能了
本项目相关Cordova
部分代码如下:
selectPicture() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then(
(imageData) => {
// 这里处理图片并上传
// 相关接口和处理不写了
this.avatarUrl = 'data:image/jpeg;base64,' + imageData
},
(err) => {
console.log(err)
}
)
}
takePhoto() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.NATIVE_URI,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.CAMERA
}
this.camera.getPicture(options).then(
(imageData) => {
// 这里处理图片并上传
// 相关接口和处理不写了
this.avatarUrl = imageData
},
(err) => {
console.log(err)
}
)
}
2. 项目打包前
- 我们用的app都有一个默认图标和启动页,ionic有一个统一设置的,首先我们需要ui设计给出1024*1024的图标和2732*2732的启动页的图片,然后分别命名为
icon.png
,splash.png
,并将图片放入resources
文件夹中。 - 输入命令
ionic cordova resources ios -icon --force
(以ios
示例,android
类似),这个是生成图标,启动页和这个类似。 - 项目一般还有欢迎页,欢迎页就是页面,所以是自己写的,没有快速生成的方法。
3. 项目打包
这个简单的项目到这里也没有什么好讲的,接下来就是要打包成一个可用的app了,这里简单的讲一下android打包签名;ios的我会贴个链接(因为这个比较麻烦,按照给的步骤来其实也差不多了,有不知道的也可以私信我)
- 添加平台
ionic cordova platform add android
- 生成
Android
包ionic cordova build android
这个是生成debug
包,这个可以连接谷歌浏览器,更明显的看输出,还可以修改css
-
debug
没什么问题的了,可以给安装包签名了(这里只介绍文件配置签名,不知道叫啥名字) - 输入命令
keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore
-
android自动签名
,在platform\android
目录新建名为release-signing.properties
的文件 - 生成签名包
ionic cordova build android --release
- ios项目打包上线链接https://www.jianshu.com/p/cf2... (做链接步骤前也要
add ios
和build ios
,然后用xcode打开*.xcodeproj,接下来的步骤就差不多了)
说明: -genkey 产生密钥 -alias demo.keystore 别名 demo.keystore
-keyalg RSA 使用RSA算法对签名加密
-validity 40000 有效期限4000天
-keystore demo.keystore
release-signing.properties内容
storeFile=E:/demo.keystore
key.alias=demo.keystore
key.store.password=****
key.alias.password=****
4. 总结
其实我说的在官网上基本都可以找到,包括Android和iOS的打包上线以及等等,有什么不太了解和问题先看官网,如果是cordova
出错的话,去github
上看issue
。
最后给上demo的地址:https://github.com/MonicaTang...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。