ionic 呼叫自定義cordova外掛
ionic 作為一個跨平臺h5框架,收到越來越多的開發人員的歡迎,如何通過ionic去呼叫原生開發的SDK?可以通過 js 呼叫cordova 外掛的方式來實現。本文通過一個簡單的例子程式,來實現通過ionic 來呼叫 原生介面。該例子通過網頁開啟原生的的一個UIViewController。
1. 安裝plugman
npm install -g plugman
可以不安裝,只要按照要求的目錄機構建立檔案即可,plugman可以幫助我們快速的生成外掛的目錄結構。
2. 生成corodva 框架模板
plugman create --name customPlug --plugin_id custom-plugin-demo --plugin_version 1.0
3. 新增模板支援
plugman platform add --platform_name ios
經過以上幾步,就再customPlug目錄生成了如下檔案
4. 修改plugin.xml 為
<?xml version='1.0' encoding='utf-8'?> <plugin id="custom-plugin-demo" version="1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>customPlug</name> <js-module name="customPlug" src="www/customPlug.js"> <clobbers target="customPlug" /> </js-module> <platform name="ios"> <config-file parent="/*" target="config.xml"> <feature name="m'y"> <param name="ios-package" value="customPlug" /> </feature></config-file> <source-file src="src/ios/customPlug.m" /> </platform> </plugin>
5.修改customPlug.js 為如下
6.修改customPlug.mvar argscheck = require('cordova/argscheck'), exec = require('cordova/exec'); var customPlugin = {}; customPlugin.echo = function(successCallback, errorCallback, arg0 ,arg1 ,arg2) { exec(successCallback, errorCallback, "myplug", "helloworld", [arg0,arg1,arg2]); }; module.exports = customPlugin;
/********* customPlug.m Cordova Plugin Implementation *******/
#import <Cordova/CDV.h>
@interface customPlug : CDVPlugin {
// Member variables go here.
}
- (void)helloworld:(CDVInvokedUrlCommand*)command;
@end
@implementation customPlug
- (void)helloworld:(CDVInvokedUrlCommand*)command
{
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] > 0) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end
7. 生成packagejson
plugman createpackagejson <directory>
8 . 安裝plugin
sudo cordova plugin add ../customPlug/
9.ionic 呼叫cordova外掛
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var customPlug: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
toSetting() {
customPlug.helloworld(function (msg) {
}, function (msg) {
}, 'true', 'ios', "dfsdfsdfsdf" );
}
}
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p class="setting_name" (click)="toSetting()">測試</p>
</ion-content>
10. 修改工程檔案,通過plugin 傳遞進來的方法,呼叫native方式,我這裡打開了一個viewcontroller
呼叫的另外viewcontroller 返回的方法是
相關推薦
ionic 呼叫自定義cordova外掛
ionic 作為一個跨平臺h5框架,收到越來越多的開發人員的歡迎,如何通過ionic去呼叫原生開發的SDK?可以通過 js 呼叫cordova 外掛的方式來實現。本文通過一個簡單的例子程式,來實現通過ionic 來呼叫 原生介面。該例子通過網頁開啟原生的的一個UIViewC
ionic和ionic2 環境下編寫自定義cordova外掛
1 增加android的平臺 對於一個ionic專案,在主目錄下通過以下命令列增加android平臺。 cordova platform add android 然後在platforms目錄下就會出現一個android資料夾: 之後可以使用配置了
Android與js互動(四)自定義cordova外掛
首先昨天我做測試的時候js端一直無法呼叫寫在js的方法後來查了資料才知道是在index.html中使用js時 需要刪除這一行 <meta http-equiv="Content-Security-Policy" content="default-src 'self'
ionic2中利用自定義cordova外掛(Plugin)ts調iOS原生的值(iOS原生的值傳給ts)
一、安裝外掛 1、安裝plugman $npm install -g plugman 如果出現下面的錯誤,在前面加"sudo"(sudo可以將許可權提升到超級使用者級別,即Windows中的管理員)
【cordova學習筆記02】自定義開發外掛,外掛集成了谷歌的RS232通訊操作的程式碼
1、cordova開發的另外一個難點就在於如何自定義自己的外掛,將自己的原生Android程式碼抽離出來,做成外掛的形式整合到app。中。如何開發自定義外掛,請你先詳細地閱讀完這個網址:https://www.jianshu.com/p/02e17c392144裡面的內容。下
Fiddler開發實踐之自定義匯出外掛
一、準備工作 1.安裝fiddler4; 2.vs2010以上(下方演示截圖都是基於vs2015的); 3.開啟fiddler debug相關功能; 在下圖位置輸入如下內容: 顯示錯誤和異常資訊: prefs set fiddler.debug.extensions.showerro
織夢新增超過兩百個自定義欄位後在使用addfields呼叫自定義欄位出錯的解決方法
dedecsm 自定義模型 新增自定義欄位(個數一百多個),使用addfields 方法呼叫,出現呼叫不出來的情況【addfields 裡面就能新增145個欄位,多了直接亂碼或者無法顯示】 解決方法 分別開啟 include/dedehtml2.class.
自定義jquery外掛
開發自定義Jquery外掛 這幾年隨著各種前端框架的出現,操作DOM被更多的封裝起來,有些專案你甚至可以完全拋開jquery進行開發,但不可否認的是,jquery多年來作為前端工程師的必備基本功夫有其不可替代的作用,即使你不用jquery,你也應該掌握他: 大多數專案依然在採用jquery,雖然不作
Vue 自定義一個外掛的用法及案例
1.開發外掛 install有兩個引數,第一個是Vue構造器,第二個引數是一個可選的選項物件 MyPlugin.install = function (Vue, options) { // 1. 新增全域
layui呼叫自定義方法提示未定義的解決辦法
呼叫test()時提示未定義 layui.use(['layer', 'form', 'element'], function(){ var layer = layui.layer ,form = layui.form ,element = layui.element &
Problem B: 指標:呼叫自定義交換函式,完成5個浮點數從小到大排列
#include<stdio.h> int swap(float *p1,float *p2) { float flag; if(*p1>*p2) { flag=*p1; *p1=*p2; *p2=flag;
Problem D: 指標:呼叫自定義排序函式sort,對輸入的n個數進行從小到大輸出。
#include<stdio.h> int sort(int *p,int n) { int i,j,temp; for(i=0;i<n-1;i++) for(j=i;j<n;j++) if(p[i]>p[j]) {
PHPCMS推薦位呼叫自定義欄位
第1步:成功登入到phpcms後臺。 第2步:開啟內容>>內容相關設定>>模型管理>>找到自己相對應的模型。 第3步:開啟模型找到並開啟“欄位管理”,在自己需要顯示的欄位上點選“修改”。 第4步:在最後倒數第三個”在推薦位標籤中呼叫“上選擇是並確定儲存
自定義nodelet外掛
參考連結: http://wiki.ros.org/nodelet http://wiki.ros.org/nodelet/Tutorials/Running a nodelet http://wiki.ros.org/nodelet/Tutorials/Porting nodes to n
python呼叫自定義模組方法
Python模組是一個Python檔案,以.py結尾,包括了Python物件定義和Python語句,能讓Python程式碼段更有邏輯性、更好用、更易懂,既然Python模組有這麼多好處,那麼該如何引用Python模組呢? import語句 自定義模組可以採用import語
關於nagios系統下使用shell指令碼自定義監控外掛的編寫以及沒有實時監控圖的問題
關於nagios系統下shell自定義監控外掛的編寫、指令碼規範以及沒有實時監控圖的問題的解決辦法 在自已編寫監控外掛之前我們首先需要對nagios監控原理有一定的瞭解 Nagios的功能是監控服務和主機,但是他自身並不包括這部分功能,所有的監控、檢測功能都是通過各種外掛來完成的。 啟動Nagios後,
sort函式呼叫自定義的 swap 時的問題
自定義swap函式時,加上了測試語句 : cout<<"test swap!"<<endl; 但是在測試的時候sort似乎並沒有呼叫我寫的swap函式,cout << “test swap!” << endl; 沒有輸出出來. 原因是 當元素數目過
sonarqube如何使用自定義規則外掛
1.將寫好的自定義規則外掛的jar包放到外掛目錄裡面 /Users/zhaijing/Downloads/sonarqube-6.7.5/extensions/plugins 2.然後重啟sonarqube /Users/zhaijing/Downloads/sonarqube-6.7
Elasticsearch 實現自定義排序外掛
外掛入口: package ttd.ugc.plugin; import org.elasticsearch.plugins.Plugin; import org.elasticsearch.script.ScriptModule; /** * Created by ji
自定義 Gradle 外掛學習記錄
參考:https://juejin.im/entry/577bc26e165abd005530ead8 ## 建立Model 1.在Android studio 中建立Model,切換到project模式; 2.刪除model下的除build.gradle檔案和src/main目錄以