ionic初学者引导

前两篇文章大概介绍了ionic以及页面的写法,这篇文章主要讲一下 cordova 的用法(其实也没啥好讲的)和项目结尾工作

1. cordova的使用

由于之前那个简单的项目有一个更换头像的功能,可以拍照也可以选择本地图片。这个涉及到调用设备的相册和相机。

ionic 官网上的 Native 中的列表中搜索 camera ,正好这个既可以拍照也可以选择照片(单选,可以满足我们的需求)。

  1. App.module.ts 全局引入 Camera
  2. 在所需的页面使用 Camera
  3. 写代码
  4. 写完代码需要打包在模拟器或真机上测试
  5. 测试:ok:了就可以继续其他功能了

本项目相关 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的我会贴个链接(因为这个比较麻烦,按照给的步骤来其实也差不多了,有不知道的也可以私信我)

  1. 添加平台 ionic cordova platform add android
  2. 生成 Androidionic cordova build android 这个是生成 debug 包,这个可以连接谷歌浏览器,更明显的看输出,还可以修改 css
  3. debug 没什么问题的了,可以给安装包签名了(这里只介绍文件配置签名,不知道叫啥名字)
  4. 输入命令 keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore
  5. android自动签名 ,在 platform\android 目录新建名为 release-signing.properties 的文件
  6. 生成签名包 ionic cordova build android --release
  7. ios项目打包上线链接 https://www.jianshu.com/p/cf2... (做链接步骤前也要 add iosbuild 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...


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python编程初学者指南

Python编程初学者指南

[美]Michael Dawson / 王金兰 / 人民邮电出版社 / 2014-10-1

Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。Python可以用于很多的领域,从科学计算到游戏开发。 《Python编程初学者指南》尝试以轻松有趣的方式来帮助初学者掌握Python语言和编程技能。《Python编程初学者指南》共12章,每一章都会用一个完整的游戏来演示其中的关键知识点,并通过编写好玩的小软件这种方式来学习编程,引发读者的兴趣,降低学习的难度。每章最后都会......一起来看看 《Python编程初学者指南》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具