IONIC 二月 25, 2017

IONIC 2 开发笔记

文章字数 4.1k 阅读约需 4 mins. 阅读次数 0

因为IONIC2才刚刚开始进入正式版, 中文文档基本都是不全的, 我现在开发都是在看英文文档
在开发的过程中遇到了很多文档没有描述的问题, 而且开发的过程中遇到一些框架本身没有完善的功能和存在的BUG

我会在这个日记里面记录一些文档没有写的, 和我开发过程中遇到的一些坑和经验, 希望可以帮助那些刚刚接触IONIC2的程序猿们!

APP配置

域名配置

因为跨域问题,在开发时如果要用到本地环境进行开发(ionic serve),必须配置proxy

  • Proxy位于项目根目录下的 ionic.config.json
  • 只需要把proxyUrl改为你本地环境的API地址
{
  "name": "rlph",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://api.dev"
    }
  ]
}
  • 然后把API地址的常量制定为/api/这个proxy
  • 在根目录下/src/config.ts里面把“API_SERVER”的值改为“/api/“
  export let data = {
      "API_SERVER" : "/api/"
  }

上线APP配置

  • 首先你需要配置真是服务器API地址
    配置API地址是在根目录下/src/config.ts里面把“API_SERVER”的值改为线上API地址
  export let data = {
      "API_SERVER" : "http://api.domain.com/"
  }

开发常见问题

APP run 失败

当运行ionic run android的时候可能会遇到该报错:

Error: Failed to install apk to device: [  1%] /data/local/tmp/android-debug.apk
[  2%] /data/local/tmp/android-debug.apk
...
[100%] /data/local/tmp/android-debug.apk
        pkg: /data/local/tmp/android-debug.apk
Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE]
  • 此问题是因为已有签名的APP存在手机上, 需要想删除该APP才能安装测试(debug)版的apk
  • 在cmd运行以下代码即可解决问题:
adb uninstall my.package.id

Ionic 2 自带的native文件上传(FILE TRANSFER)插件无法获取成功返回内容

这个是Ionic 2 核心代码里面的一个BUG, 在一下版本下是有问题的
Ionic CLI Version: 2.2.1

  • 首先找到项目根目录下以下路径里面的filetransfer.d.ts文件
node_modules\ionic-native\dist\es5\plugins\filetransfer.d.ts
node_modules\ionic-native\dist\esm\plugins\filetransfer.d.ts
  • 分别修改以上两个文件里面的代码
//把这一行:
upload(fileUrl: string, url: string, options?: FileUploadOptions, trustAllHosts?: boolean): Promise<FileUploadResult | FileTransferError>
//改为: 
upload(fileUrl: string, url: string, options?: FileUploadOptions, trustAllHosts?: boolean): Promise<FileUploadResult>

在安卓下使用相册选择时, 返回的图片路径不能再显示问题

  • 首先在这个例子使用的是cordova-plugin-camera组件(Cordova的相机插件)
  • 首先引入需要的类
  • FilePath 这个类就是用来修复安卓上图片URI的问题的
import { Camera, File, FilePath } from 'ionic-native';
  • 使用 FilePath.resolveNativePath(imagePath) 这个方法来纠正图片URI
Camera.getPicture(options).then((imagePath) => {
 // 特殊安卓图片库的处理
 this.nativeFilePath = imagePath;
 if (this.pl.is('android') && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
   FilePath.resolveNativePath(imagePath)
   .then(filePath => {
       this.nativeFilePath = filePath;
       let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
   });
 } else {
   var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
 }
}, err => {
 // this.presentToast('选择图片失败.');
});
0%