ionic初學者引導（三）

前兩篇文章大概介紹了ionic以及頁面的寫法，這篇文章主要講一下 cordova的用法（其實也沒啥好講的）和項目結尾工做

1. cordova的使用

因爲以前那個簡單的項目有一個更換頭像的功能，能夠拍照也能夠選擇本地圖片。這個涉及到調用設備的相冊和相機。
在 ionic官網上的 Native中的列表中搜索 camera，正好這個既能夠拍照也能夠選擇照片（單選，能夠知足咱們的需求）。

1. 在App.module.ts全局引入Camera
2. 在所需的頁面使用Camera
3. 寫代碼
4. 寫完代碼須要打包在模擬器或真機上測試
5. 測試🆗了就能夠繼續其餘功能了

本項目相關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. 生成Android包ionic 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 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...