[TOC]
# Cordova 原生插件
這里舉一個獲取手機相冊的例子,輸入以下代碼安裝 imagepicker 插件
~~~
$ ionic cordova plugin add add cordova-plugin-telerik-imagepicker
~~~
之后在需要用到的頁面,使用以下方法即可調用手機相冊
~~~
showAlbum() {
this.platform.ready().then(() => {
(<any>window).imagePicker.getPictures(photo => {
console.log(photo[0]);
});
});
~~~
# Ionic Native
Ionic Native 與原生 Cordova 插件不同,它的安裝需要進行兩步。以 ActionSheet 插件舉例
~~~
$ ionic cordova plugin add cordova-plugin-actionsheet
$ npm install --save @ionic-native/action-sheet
~~~
**第一個步驟和之前安裝插件完全相同,第二步則是安裝 Ionic 封裝的代碼**。所以不需要的時候我們也要輸入兩條指令**才能徹底刪除**。
~~~
$ ionic cordova plugin rm cordova-plugin-actionsheet
$ npm uninstall --save @ionic-native/action-sheet
~~~
Ionic Native 的使用方法,官方文檔寫的已經很簡單了,我簡單舉一個例子。
~~~
showActionSheet() {
let buttonLabels = ['你好', '確定'];
const options: ActionSheetOptions = {
title: '你好Ionic',
buttonLabels: buttonLabels,
addCancelButtonWithLabel: '取消',
androidTheme: this.actionSheet.ANDROID_THEMES.THEME_HOLO_LIGHT,
destructiveButtonLast: true
};
this.actionSheet.show(options);
}
~~~
# 地圖插件
cordova-plugin-amaplocation
## 導航
[cordova_plugin_amap_navigation](https://github.com/Mobishift/cordova_plugin_amap_navigation)
# 圖片處理
## 壓縮
## [ionic-img-viewer](https://github.com/Riron/ionic-img-viewer)
Twitter的靈感體驗來可視化圖片:
## [cordova-plugin-crop](https://github.com/ihadeed/cordova-plugin-crop)
## [cordova-plugin-ImagePicker](https://github.com/giantss/cordova-plugin-ImagePicker)
cordova相冊仿微信多選插件
[ionic3圖片選擇+照相 目前最好用的插件+BUG修復](https://www.jianshu.com/p/d84ac72c386c)
## [DmcSDK/cordova-plugin-mediaPicker](https://github.com/DmcSDK/cordova-plugin-mediaPicker)
~~~
ionic cordova plugin add cordova-plugin-mediapicker-dmcbig --variable IOS_PHOTO_LIBRARY_USAGE_DESCRIPTION="to upload photo as avatar or product image"
~~~
# 支付
支付寶 :
```
cordova plugin add https://github.com/hhjjj1010/cordova-plugin-alipay-v2.git --variable APP_ID=[your AppId]
```
微信支付:
銀聯:
# WebView
## [x5webview for cordova](https://github.com/runner525/x5webview-cordova-plugin)
x5webview-cordova-plugin 是騰訊瀏覽服務(TBS)為cordova框架提供的用于android平臺的cordova插件,旨在為android平臺提供更好的webview瀏覽體驗.
## [Edc.zhang](https://github.com/Edc-zhang)
# 掃描插件
[cordova-gizwits-scan-qrcode](https://github.com/gizwits/cordova-gizwits-scan-qrcode)
cordova掃碼插件
[ionic3 使用QR Scaner 掃描](https://www.jianshu.com/p/45f8b44b9a42)
使用 qr-scanner 背景是白屏的 ?
ion-app元素, 添加屬性: `background: none transparent` (仔細看作者的demo)
# 分享插件
https://github.com/Luomusha/cordova-plugin-sharesdk (具有授權登錄功能)
QQURLSCHEME:QQ回調Scheme。例如:QQ41DF25B4,“QQ”+騰訊QQ互聯應用appId轉換成十六進制(不足8位前面補0),例如“QQ05FC5B14”
WBREDIRECTURL 第三方應用授權回調頁面。授權回調頁對移動客戶端應用來說對用戶是不可見的,所以定義為何種形式都將不影響,但是沒有定義將無法使用SDK認證登錄。建議使用默認回調頁https://api.weibo.com/oauth2/default.html (可以在新浪微博開放平臺->我的應用->應用信息->高級應用->授權設置->應用回調頁中找到)。
## 微信分享簽名
應用部署完成后,需要用于獲取安裝到手機的第三方應用簽名的apk包。點擊下載 [簽名生成工具](https://res.wx.qq.com/open/zh_CN/htmledition/res/dev/download/sdk/Gen_Signature_Android2.apk),
安裝完成后執行, 輸入自己應用的包名, 就可以獲得一串簽名了. 小心仔細地把簽名填寫到微信平臺 Android 下的相關位置并提交.
到這里, 應該就沒有大問題了, 注意需要調試微信相關功能的時候記得用加上 `--release`, wishes~
```
https://github.com/behring/cordova-plugin-sharesdk (具有單個分享功能)
```
**注意**:騰訊提供了許多個的開放平臺。差不多每個大的產品都提供了開放平臺,比如微信、QQ郵箱,財付通等。這里面有2個比較易混的,一個是[QQ互聯](http://connect.qq.com/),一個是[騰訊開放平臺](http://open.qq.com/)。QQ互聯主要是為了給第三方網站或移動應用提供登錄信息。而騰訊開發平臺,則是為托管型的應用(平臺應用和移動應用)提供服務的。不過現在QQ互聯正在往騰訊開發平臺上遷移,**要在QQ互聯平臺上關聯開放平臺應用**。
[MOB 微信分享閃退 errCode -6](https://blog.csdn.net/feitian145623/article/details/51752093)
::原因是微信開放平臺的md5簽名跟手機簽名不一致了。用MD5簽名生成器生成下替換下就OK啦
## 總結
最后在這里發現了最新的sharesdk~
https://github.com/kuaimacode/cordova-plugin-sharesdk (此插件有會報錯,但是具有最新的一鍵登錄功能,修改后可用)
在結合以上兩者!開發了分享 和 第三方登陸功能 功能!
自己上傳到了自己的github上!
ionic 3 安裝命令:
~~~
ionic cordova plugin add "git-url或者下載到本地路徑安裝" --save --variable Mob_AppKey="266ed2972d02e" --variable Mob_AppSecret="eb9260ab7819beb9c7b0be96dbb67eaf" --variable QQAPPID_ANDROID=1106978986 --variable QQAPPKEY_ANDROID=Ywh2vbqjpxMM0qG9 --variable QQAPPID_IOS=1106978986 --variable QQAPPKEY_IOS=Ywh2vbqjpxMM0qG9 --variable QQURLSCHEME=QQ41FB28AA --variable WECHATAPPID=wxdb9054c450b74988 --variable WECHATAPPSECRET=71ec8c720e159a1ffbb56615039ddecc --variable WBAPPKEY=1130956472 --variable WBAPPSECRET=9229ebda36c619fd952a0c9938200e06 --variable WBREDIRECTURL=http://www.baidu.com/auth
~~~
# 圖片
[PhotoViewer](https://github.com/sarriaroman/photoviewer)
~~~
根據Url顯示圖片
支持手勢,可放大縮小
帶分享按鈕,可分享圖片
帶關閉按鈕
加載錯誤時自動關閉組件
支持Base64
~~~
# 原生HTTP請求
## [cordova-plugin-native-http](https://github.com/zyra/cordova-plugin-native-http)
# Deep Linking
## [cordova-ionic-phonegap-branch-deep-linking](https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking)
# [Microsoft ace](http://microsoft.github.io/ace)
微軟公司提供的插件,可以使用html和js非常容易的創建原生UI并調用原生代碼。
# 參考
[Cordova 社區 ](https://cordova.apache.org/plugins/)
Cordova 社區提供上千個插件,支持各種設備平臺的各類硬件特性。
[Github](https://github.com)
作為最大的程序員同性交友網站,在這里也可以搜索到的很多插件。
[Ionic Native](https://ionicframework.com/docs/native/)
Ionic 官方提供的插件地址,它與原生 Cordova 插件有所不同,后面會講到。
# 國內資源平臺
http://dacatec.com/jdcloud-site/
- PWA 概念
- Immutable
- Angular 基礎概念
- 入門參考
- Angular 更新總結
- Angular 生態系統
- Rx.js
- Ngrx
- CQRS/ES 模式
- Angular 5 詳解
- 測試
- 定義共享模塊
- 懶路由加載
- angular組件
- 雙向綁定及變化檢測
- 樣式
- ionic 3詳解
- ionic3
- ionic 插件
- Ionic 添加動畫
- Ghost-Loading
- 打包發布
- Android上架國內應用市場流程
- 總結
- 文章
- 問題合集
- Cordova
- 插件開發指南
- Android插件開發指南-官網
- IOS插件開發指南-官網
- Hooks 編寫
- 橋接技術
- ===cordova插件收集===
- 相關主題-官網
- 實戰-自定義插件流程
- UI 及 相關資源