ionic上传图片插件

Ⅰ ionic2中测试上传照片怎么弄

啊哈哈，知音啊。。。想当年我传大（绝对在要求尺寸里的）的它提示太大，需要XXX尺寸，我传了，它又说太小。。。这样颠来倒去，我都快掀桌了。。。最后解决方法。。。只要你没弄错，多传几遍就好了。。。就是系统犯抽

Ⅱ ionic中两张图片并排的css样式怎么写

1.page.html文件里写ionic提供的控件，比如：ion-header,ion-content, ion-title,ion-toobar,经管如此，有时候满足不了项目的界面，我们需要结合HTML的基本命令来完成设计，比如：div，p， img，a，等。
2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干扰的现象，后来发现，每个scss文件里有个页面定义，我们只要把当前页面的css定义放在这个页面定义就行，实现了css分离。（）本人刚学习网页编程，一切都在探索中）。示例如下：
age-page3 {
.page {
display: flex
align-items: center
text-align: center
margin: 0 auto
height: 100%
ackground-color: #abaaaa
adding-top: 5px
adding-bottom: 5px
// margin-top: 2px
这个page属性就放在了page-page3的大括号里面，保证了这个css定义只影响当前页面。

Ⅲ ionic 怎么引入百度报表插件 ECharts

ECharts开源来自网络商业前端数据可视化团队，基于html5 Canvas，是一个纯javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

Ⅳ ionic3 cordova插件与cordova android版本的兼容性问题

cmdnode -v（检查是否有node，-g表示全局安装，否则要配置环境变量。nodejs在官网下载推荐版recommended for most users）npm install -g cordova ionic（如已安装nodejs，可用npm安装cordova和ionic）（链接不上会报错，重新下载即可，下载太慢可分2步npm install -g cordova 和 npm install -g ionic 下载）

Ⅳ ionic滑动框，能一进入页面就从一个指定的ion-slide开始显示吗

在ionic 中， 图片的上传预览或者浏览中，类似微信中 可以点击到第N长图片后，预览的ion-slide-box 中能首先显示指定的 那一页，还有图片的位置的居中？？？如何居中？？？
据图浏览页面的 <ion-content > 部分代码：

<ion-content >
<ion-slide-box on-slide-changed="showall()"
show-pager="{{lookpictureInfo.pictures.length>1?true:false}}"
ng-style="allWindow_style"
>
<ion-slide ng-repeat="(index, picture) in lookpictureInfo.pictureList"
>
<ion-scroll zooming="true"
direction="xy"
style="text-align: center;
vertical-align: middle;
"
ng-style="allWindow_style"
>
<div >
<img ng-style="img_style" ng-src="{{picture.url}}">
</div>
</ion-scroll>
</ion-slide>
</ion-content>效果图：

Ⅵ ionic怎么获得当前应用的版本号插件

1、准备工作，添加插件

[java] view plain print?在CODE上查看代码片派生到我的代码片
如果cordova 未添加请先执行以下命令
1、npm install bower -g //安装bower
2、bower install ngCordova //安装cordova

1.1、添加获取APP版本信息插件
[java] view plain print?在CODE上查看代码片派生到我的代码片
ionic plugin add cordova-plugin-app-version

2.2、添加APP自动更新相关插件
[java] view plain print?在CODE上查看代码片派生到我的代码片
ionic plugin add cordova-plugin-file
ionic plugin add cordova-plugin-file-transfer
ionic plugin add cordova-plugin-file-opener2

2、在APP一运行的时候就进行检查版本信息(在run方法添加如下代码)
[java] view plain print?在CODE上查看代码片派生到我的代码片
.run(function($ionicPlatform, $http, $rootScope, $ionicActionSheet, $timeout, $cordovaAppVersion,
$ionicPopup, $ionicLoading, $cordovaFileTransfer, $cordovaFile, $cordovaFileOpener2) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
};
if (window.StatusBar) {
StatusBar.styleDefault();
};
//服务器上保存版本信息
$http.get('http://localhost/app/ver.json')
.then(function(data){
var serverAppVersion = data.data.verInfo;//服务器 版本
console.log("====>>服务器"+serverAppVersion);
$cordovaAppVersion.getVersionNumber().then(function(version) {
console.log("version=====本机>>>"+version+"====>>服务器"+serverAppVersion);
if (version != serverAppVersion) {
$ionicLoading.show({
template: "已经下载：0%"
});
var url = "http://192.168.1.77:8080/app/android-debug.apk";
var targetPath = "file:///mnt/sdcard/Download/android-debug.apk";
var trustHosts = true
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function (result) {
$cordovaFileOpener2.open(targetPath, 'application/vnd.android.package-archive'
).then(function () {
}, function (err) {
});
$ionicLoading.hide();
}, function (err) {
alert('下载失败');
}, function (progress) {
$timeout(function () {
var downloadProgress = (progress.loaded / progress.total) * 100;
$ionicLoading.show({
template: "已经下载：" + Math.floor(downloadProgress) + "%"
});
if (downloadProgress > 99) {
$ionicLoading.hide();
}
})
});
}
});
});

});

})

3、在服务端webapp下添加以下两个文件
[java] view plain print?在CODE上查看代码片派生到我的代码片
1、ver.json
2、Android-debug.apk

Ⅶ 如何为ionic webapp开发自定义插件

安装cordova插件管理工具，plugman
在终端中输入：
npm install -g plugman
安装命令与安装结果如下：

2
新建一个插件myEcho，用弹出框来显示我们的内容。
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
把其中的<pluginName>替换为 myEcho;
<pluginID> 替换为 com.lulee007.myEcho
<version> 替换为 0.0.1
[--path <directory>] [--variable NAME=VALUE] 这两个是可选参数，这里不写了。这样会在当前目录下（desktop）创建一个新的目录myEcho
在终端中输入：
plugman create --name myEcho --plugin_id com.lulee007.myEcho --plugin_version 0.0.1

执行命令后会在当前目录下生成一个文件夹，我这里的目录是在桌面下的myEcho.

3
向myEcho项目中添加一个android平台
plugman platform add --platform_name <platform>
把<platform>替换为 android
接着在终端中继续输入：
cd myEcho
然后输入：
plugman platform add --platform_name android
这时候查看我们的myEcho目录下的 src会新增一个目录android里面会有一个java文件：myEcho.java

END
插件项目修改配置
项目结构组成：
src 对应不同的平台，www 放我们的 javascript 文件，plugin.xml 是插件的配置文件。

2
先来看看配置文件：plugin.xml
解释一下关键的几个元素：
id: 插件的标识，即一开始我们新建插件输入的 ID，com.lulee007.myEcho
name：插件的名称，新建插件时输入的名称，myEcho
description：描述信息
js-mole：对应我们的 javascript 文件，src 属性指向 www/myEcho.js
platform：支持的平台，这里仅有一个 android，这是刚才我们通过“ plugman platform add --platform_name android ”添加进来的。
其中android下的config-file：
这里是android插件的配置信息，当安装到应用时，会添加到目标平台android下的 res/xml/config.xml 文件中，并将 src/android/myEcho.java，复制到 android 的 package 包中。

3
看下javascript文件：myEcho.js
文件内容很简单，第一句是引入cordova下的exec库
第二句是我们插件的执行插件方法，
exec(success, error, "myEcho", "coolMethod", [arg0]);
success:调用成功时的回调函数，
error:调用出错时的回调函数，
"myEcho"：插件名称，
"coolMethod"：执行插件里的方法，
[arg0]：可选参数，执行方法的参数数组。
这里我们把“exports.coolMethod”改为“window.plugins.myEcho”
并在“exports.coolMethod”上面添加一行：
window.plugins = window.plugins || {};
同样把“coolMethod”也改为“echo”。
最终修改后的js文件内容如图：

4
接着修改myEcho.java文件
可以看到myEcho继承自CordovaPlugin，并重载了execute方法。
在execute方法里有个判断，action.equals("coolMethod")，这表示如果执行的是我们的方法那就继续执行内部的逻辑并返回true，如果不是则直接返回false结束。
这里我们修改下方法：“coolMethod”为“echo”,并把方法coolMethod名称修改为echo。
最终修改后的java文件内容如下：

END
安装测试插件
这里用事先准备好的ionic项目myFirstApp来测试我们的插件。
这里不再赘述ionic项目的创建，具体可以参考我的另一篇经验。
直接在网络经验里搜索：如何用ionicframework进行混合移动应用开发
第一篇就是。

打开终端，在终端中输入：
cd myFirstApp
切换到myFirstApp目录下
输入：
cordova plugin add ../myEcho
显示已经安装myEcho插件到ios和android平台下

打开myFirstApp目录，可以看到在plugins目录下多了一个com.lulee007.myEcho目录。

打开myFirstApp目录下的www/js/controllers.js
添加如下代码到最后“PlaylistCtrl”位置：
window.plugins.myEcho("echo my text",
function(data){
alert(data);
},
function(error){
alert(error);
});

重新build然后run进行调试：
在终端里输入：
ionic build android
然后输入：
ionic run --device android
执行命令后结果如下图：

这时android设备上已经运行了我们的应用：
随便点击list的一个项，会弹出一个对话框，内容是“echo my text”

最后如果我们在测试中需要对插件进行更新，这时候只需要执行命令：
cordova plugin remove com.lulee007.myEcho
这里的“com.lulee007.myEcho”就是我们最开始新建插件的时候的插件ID。
重新安装还是这个命令：
cordova plugin add path/to/your/plugin/dir
把“path/to/your/plugin/dir”替换为自己的插件的目录就好了。

Ⅷ cordova splash screen 怎么添加ios

现在最新的Cordova 3以上的版本支持启动画面了，是通过cordova插件实现的。
目前Splash插件支持android，ios，blackberry等多个平台。
添加插件等过程如下：
添加SplashScreen插件
在cordova项目目录运行：

cordova plugin add org.apache.cordova.splashscreen

这个命令从插件git库下载插件代码到在工程的plugins目录下

修改config.xml配置文件

<preference name="SplashScreen" value="screen" /> <!-- 不带后缀png的文件名，默认是screen-->
<preference name="SplashScreenDelay" value="3000" /> <!-- Splash显示时间，默认是3000ms-->
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>

修改启动图片
可以看到启动图片的名字是screen.png,工程下有一些screen.png默认图片了，上面显示的是cordova logo，下面需要把这些图片换成你自己的启动画面，不需要支持的尺寸图片直接删掉就可以了。

在设备初始化完成后隐藏Splash画面

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide();
}

如果使用了ionic框架，直接在app.js 文件的 .run(['$ionicPlatform', function ($ionicPlatform) { ... } 里面加上 navigator.splashscreen.hide();

就可以了。

Ⅸ ionic 调用摄像头 截图保存呢时闪退

①如果要保存照片，需要设置destinationType是返回图像路径，然后设置saveToPhotoAlbum: true，这两个参数都设置才能保存照片,我发现如果设置了长和宽保存的照片质量会很差，去掉的画质量不错。但我Android会默认存到
file://storage/sdcard0/Pictures中，我手机相册没识别出来。而且这个时候虽然设置allowEdit: true，但是返回来的是源文件的路径，这个剪裁功能等于没有用。
②如果要截取图片，要设置allowEdit: true，设置长和宽，并且destinationType返回的是base64位编码字符串。
③当设置sourceType: Camera.PictureSourceType.CAMERA时，这个时候的选择图库的界面很难看，需要设置sourceType为0或者2这个时候调用的就是系统的图库，好看点。所以我们实现拍照，然后在拍照的成功回调中调用打开相册选择图片，效果会好一点。
④长和宽的设置只影响剪裁框的大小，也就是如果返回base64会影响图片的大小，返回uri不会影响。
⑤有可能会出现base64上传后图片自动旋转90度的问题,correctOrientation设置true即可

cordova-plugin-camera 插件说明文档

中文文档:http://www.jianshu.com/p/184f9d704c71

英文文档:https://www.npmjs.com/package/cordova-plugin-camera#camerapopoveroptions

Ⅹ web前端开发需要学习什么知识