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前端開發需要學習什麼知識