通过一个月的Cordova学习, 我将知识点总结为三部分:
- 纯Cordova开发---不依赖原生平台
- 原生平台混合Cordova开发
- 插件开发
在进行Cordova开发之前, 先花点时间了解一下的Cordova的原理和Cordova的框架结构.
- Cordova是开发跨平台web App的工具, 使用前端技术来开发App, 可以节省成本和快速发布.
- Cordova的底层逻辑是:HTML+CSS搭建页面, 使用JS和原生平台交互来展示原生平台的功能.
- Cordova所有功能是建立在各种插件上的, 所以插件开发是Cordova开发的重点.
纯Cordova开发
这种开发模式不需要各原生平台开发人员参与, 只需要前端猿将开发好的web App放入到Cordova工程中, 然后使用Cordova-CLI(Cordova命令行界面)将web App和各种插件配种好后, 就可以build, run进行各平台的构建和调试了. 以下是纯Cordova开发的步骤:
- Cordova的安装
- 使用Cordova-CLI创建Cordova项目----创建Cordova项目后, 前端猿就可以在
www/进行开发, 今后的大部分工作都集中在这个文件下.- 添加平台
- 添加插件
- 构建Cordova项目
- 在各原生平台上运行Cordova App
- Cordova项目更新
一.Cordova的安装
CLI工具需要使用npm来安装, 因为它被发布到了npm.
按照下面步骤来按照CLI:
- 下载和安装Node.js.
- (可选)如果你的电脑没有安装Git的话, 下载和安装git client, 因为后续CLL需要使用git来下载git仓库中的资源. 各OS的安装方法自行百度.
- 使用Node.js中的
npm来安装cordova模块.cordova模块会自动被npm下载.-
在OS x和linux下
$ sudo npm install -g cordova如果出现"xx/xx/xx(例如/usr/local/share) permission denyed"的错误,可以在
npm命令前加上sudo前缀. -
在window中
C:\>npm install -g cordova上面的
-g标志告诉npm全局安装cordova. 否则, 它将安装在当前工作目录的node_modules子目录中.
-
安装之后, 你应该能够在命令行上运行cordova, 不需要参数, 它会打印帮助文本.
二.创建Cordova工程
1.使用CLI命令创建 create
cd到维护源代码的目录, 并创建一个cordova项目:
$ cordova create hello com.example.hello HelloWorld
这将为你的cordova应用程序创建所需的目录结构. 默认情况下, cordova create脚本会生成一个基于Web的框架应用程序, 其主页是项目下www/目录中的index.html文件
打开Mac终端输入上面的命令, 创建一个Cordova项目, 得到项目目录结构如下:
上面的Create命令的解释:
- 保存项目的路径, 比如上面的"hello", 该路径是缺省的.
- 项目的id, 默认值是
io.cordova.hellocordova; 安卓中的Java包名, iOS的bundleID都需要用到这个, 所以最好不要缺省, 或者要好好对待这事, 该值以后可以修改. - 项目的name, 默认是
HelloCordova, 该值也可以修改, 安卓平台可能会使用该值作为类名. - 上面
id和name的都会配到config.xml中
15450994158002.jpg
2.使用模板创建工程 --template
使用模板App中的代码可以快速搭建你的cordova-app.
-
首先你要去npm网站上, 使用关键字
cordova:template来搜索可以用的template. 如下图所示:
15446646202387.jpg 这里我使用第二template-
cordova-template-ngx-onsenui来创建一个项目, 可以的命令有如下:
$ cordova create hello com.example.hello HelloWorld --template <npm-package-name>
$ cordova create hello com.example.hello HelloWorld --template <git-remote-url>
$ cordova create hello com.example.hello HelloWorld --template <path-to-template>
- 我选择第一个命令, 在我本地创建如下项目:
cordova create UseCordovaTemplate personal.zxx.cordovatemplate --template cordova-template-ngx-onsenui
无错执行完上面命令后, done! 使用模板生成了一个新项目.
我们来看下, 使用模板创建的项目的和不是模板创建的区别:
发现多了几个文件和一个
src文件夹.
- 接下来添加平台-iOS:
cedardeiMac-6:Desktop zhouxingxing$ cd UseCordovaTemplate/
cedardeiMac-6:UseCordovaTemplate zhouxingxing$ cordova platform add ios
添加成功后, 会在`platforms/`生成一个iOS项目:
- 然后我运行构建, 运行cordova项目
cordova build ios
cordova run ios
发现一个错误:
No target specified for emulator. Deploying to iPhone-X, 12.1 simulator
/Users/zhouxingxing/Desktop/UseCordovaTemplate/platforms/ios/build/emulator/HelloCordova.app/Info.plist file not found.
上网搜索, 发现是因为Xcode 10更新了构建系统, 但cordova并支持, 官方给出的解决方案是手动选择不适用系的构建系统:
# Cordova CLI
cordova run ios --buildFlag='-UseModernBuildSystem=0'
cordova build ios --buildFlag='-UseModernBuildSystem=0'
详细信息请参考:https://github.com/apache/cordova-ios/issues/407
下面的添加平台platform/插件plugin/构建build/运行run这些命令都需要你刚才创建项目的路径下工作, 比如刚才的*/hello/.
3.添加平台 platform
- 下面的这些命令必须在上面创建项目的目录下运行, 或者子目录也行
$ cd hello
- 添加你App定位的平台. 我们将添加'ios'和'android'平台并确保它们保存到config.xml和package.json:
$ cordova platform add ios
添加完iOS后, 查看项目结构, 发现在platform目录下多了一个ios/, 里面的内容是一个iOS项目目录:
并且安装了一个叫cordova-plugin-whitelist的插件, 在plugins/也发现多了一个文件夹.
同样安装Android平台后, `platform`也会多一个安卓项目:
$ cordova platform add android
- 查看你添加的平台:
$ cordova platform ls
运行添加或删除平台的命令会影响项目
platform目录的内容, 其中每个指定的平台都显示为子目录
注意:使用CLI构建应用程序时, 你不应编辑/platforms/目录中的任何文件. Cordova在准备构建应用程序或重新安装插件时, 会定期自动覆盖此目录中的文件.
-
config.xml的变化
15451003095257.jpg
更多关于平台的操作(比如, 删除平台, 添加特定版本的平台, 从本地添加平台)请看参考Cordova-CLI参考
4.添加插件 plugin
插件的定义:
- 插件是指能够使Cordova WebView和相应原生平台就行交互的注入代码包. 插件给基于Web的App提供对原生设备和平台功能的访问.
- 本质上是一个js文件+原生类(比如Android的Java类,iOS的OC类), JavaScript接口供前端调用,这影藏了背后的各种native代码的实现.
插件添加和删除
- 插件添加可以通过插件id和Git repo的url来添加:
$ cordova plugin add cordova-plugin-xyprogress //通过插件id
$ cordova plugin add https://github.com/cheerszhou/CordovaPulginForTest.git //通过Git url添加
添加完插件后, 在项目目录的下plugins/会显示你添加的插件:
而且config.xml中也会注册这些插件:
- 插件删除:
$ cordova plugin rm cordova-plugin-xyprogress
运行上面命令后, 在plugins/和config.xml也会删除相应的插件
- 插件更新,先删除,后在添加:
$ cordova plugin rm cordova-plugin-xxxx
$ cordova plugin add cordova-plugin-xxxx
- 列举安装的插件:
$ cordova plugin ls
更多关于如何管理(按版本添加, 插件冲突)插件的命令请参考Cordova-CLI参考
5.构建和运行
创建项目, 添加平台和插件后, 你可以进行构建App了. 在构建之前, 你需要检查你的开发环境是否搭建好了, 因为构建各个平台的App需要的环境是不一样的, 比如iOS你需要安装Mac系统, Xcode, xcode-select, ios-deploy.
- 检查各平台需要的环境要求:
$ cordova requirements
运行上面命令, 你从terminal中可以看到如下提示信息, 安装提示信息去搭建各平台需要的环境:
关于各平台的构建环境, 请看:
1. 安卓平台环境要求
2. iOS平台环境要求
3. Windows平台环境要求
- 使用
$ cordova build构建所有平台项目, 也可以构建特定平台, 如iOS:
$ cordova build ios
更多关于build的命令请参考Cordova-CLI参考
- 使用
$ cordova run来构建并运行所有平台, 也可使用下面带选项的命令:
- 在Android平台上,名为Nexus_5_API_23_x86模拟器上运行的当前cordova项目的发布版本. 运行时使用特定构建配置：
cordova run android --release --buildConfig=..\myBuildConfig.json --target=Nexus_5_API_23_x86
- 使用真机或模拟器（如果没有连接设备）在Android平台上运行当前cordova项目的调试版本. 跳过构建：
cordova run android --nobuild
- 在ios设备上运行当前cordova项目的调试版本：
cordova run ios --device
- 枚举可用于运行此应用程序的所有连接设备和可用模拟器的名称：
cordova run ios --list
- 或者模拟器中运行:
cordova emulate ios
//指定模拟器使用的模拟设备:
cordova emulate ios --target iPhone-6s
cordova emulate ios --target iPhone-6s-Plus
运行后, 默认显示的www下的index.thml页面,下面是iOS和Android运行效果图:
6.调试和测试
调试一般通过
cordova run命令运行各平台模拟上, 可以直观看到结果Cordova创建的iOS/android平台项目是可以直接打开的. Xcode/Android Studio内置的调试/分析工具对你进行iOS/android插件开发时非常有用. 请注意, 在各平台IDE中打开项目时, 建议你不要在IDE中编辑代码. 这将会改变项目的
platform文件夹(而不是www)中的代码, 并且更改可能会被覆盖. 相反, 你应该编辑www文件夹中的代码, 并通过运行cordova build复制你的更改到各个平台.插件开发者如果要在native IDE中进行开发时, 可以用
--link标志来将他们开发插件通过cordova plugin add加入项目中. 这样插件链接的文件会相互影响---platform中的插件文件改变会反映在插件的原文件中(反之亦然).使用Safari和Chrome进行调试
三.升级Cordova和项目
- 安装cordova工具后, 你始终可以通过运行以下命令将其更新到最新版本:
$ sudo npm update -g cordova
- 使用此语法安装特定版本:
$ sudo npm install -g cordova@3.1.0-0.2.0
- 运行
cordova -v以查看当前正在运行的版本. 要查找最新发布的cordova版本, 你可以运行:
$ npm info cordova version
- 要更新你要定位的平台:
$ cordova platform update android --save
$ cordova platform update ios --save
...etc.
原生平台混合Cordova开发
可以在原生App使用Cordova中的web页面, 这节分为块内容, 分别是:
- iOS项目中混合Cordova
- Android项目中混合Cordova
在iOS项目中混合Cordova
一.将Cordova项目资源添加到Xcode项目中
首先你有一个iOS原生项目, 比如CordovaHybridByPod
你有一个Cordova项目, 如果没有使用
cordova create创建一个, 并添加iOS平台, 因为后面需要用到cordova项目中的内容-
打开你的iOS项目, 然后将cordova中的顶层config.xml文件复制到iOS项目下, 并且选择Create groups for any added folders
15451156495138.jpg -
将
CordovaLib/CordovaLib.xcodeproj复制到Xcode项目中
15451164624141.jpg -
在Xcode项目导航栏中选择
CordovaLib.xcodeproj, 然后在File Inspector中, 设置Location为Relative to Group
15451172791832.jpg -
选中Xcode项目的target, 然后在Build Settings中的Other Linker Flags中添加
-force_load和-Objc
15451175544109.jpg注:这里有个bug, 官网说添加
-force_load和-Objc, 发现添加-force_load后, 原生buildbuild报错. 所以网上有人推荐添加-all_load和-Objc. 打开Build Phases中的Link Binaries with Libraries, 将下面的库添加进去:
AssetsLibrary.framework
CoreLocation.framework
CoreGraphics.framework
MobileCoreServices.framework
-
打开Target Dependencies和Link Binaries with Libraries都加入
CordovaLibbuild后的产物CordovaLib.a, 如果看不到libCordova.a, 可以在Cordova项目目录下运行cordova build命令.
15451193738756.jpg 在Build Settings中的Header Search Paths.加入下面这些值:
"$(TARGET_BUILD_DIR)/usr/local/lib/include"
"$(OBJROOT)/UninstalledProducts/include"
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
"$(BUILT_PRODUCTS_DIR)"
二.使用CDVViewController
- 添加下面的头文件:
#import<Cordova/CDVViewController.h>
- 创建一个新
CDVViewController实例, 在其他地方使用时, 强引用它:
CDVViewController* viewController = [CDVViewController new];
- (可选)设置
wwwFolderName属性, 默认为www:
viewController.wwwFolderName = @"myfolder";
- (可选),在
config.xml中<content>标签中设置start page, 也可以是本地文件:
<content src="index.html"/>
...或者一个远程地址:
<content src="http://apache.org" />
- (可选),设置属性
useSplashScreen, 默认值为NO:
viewController.useSplashScreen = YES;
- 设置view frame, 总要设置为最新的值:
viewController.view.frame = CGRectMake(0,0,320,480);
- 添加Cleaver到view中:
[myView addSubview:viewController.view];
- 首先我将cordova中的包含
index.html添加到Xcode项目, 然后在ViewController.m中使用CDVViewController如下:
```
//
// ViewController.m
// CordovaHybridByPod
//
// Created by developer_zxx on 2018/12/13.
// Copyright © 2018 developer_zxx. All rights reserved.
//
#import "ViewController.h"
#import <Cordova/CDVViewController.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (IBAction)showCordovaWebview:(UIButton *)sender {
CDVViewController * cordovaVC = [[CDVViewController alloc]init];
cordovaVC.wwwFolderName = @"www";
[self presentViewController:cordovaVC animated:YES completion:nil];
}
@end
```
-
运行结果:
15451218123026.jpg 之后Cordova中的webView就交给
www下的前端资源来管理了
在Android项目中混合Cordova
首先你有一个Android原生项目, 比如NativeProjectForAndroid
你有一个Cordova项目, 如果没有使用
cordova create创建一个, 并添加Android平台, 因为后面需要用到cordova项目中的内容-
将Cordova项目中的
platforms/android/下的res/config.xml,assets/www/下的文件添加到你安卓项目相应的目录下
15451299418564.jpg -
将将Cordova项目中的
platforms/android/下的CordovaLib作为Android项目的moudle导入
15451304082351.jpg
-
将
cordova-plugin-whitelist插件的Java实现类添加到Android项目,该类在platforms/android/src/java中可以找到.
15451308578311.jpg -
此时你可以在Android原生项目中使用
CordovaActivity.java, 该类显示www下的资源, 在MainActivity.java中跳转到Cordova Webview中.
15451311657579.jpg -
运行结果:
15451316891061.jpg
插件开发
Cordova项目中大量使用插件, 除了Cordova平台提供的核心插件外, 开发者需要针对一些额外需求自定义开发插件.
一. 插件工作的原理
- Cordova插件是通过JavaScript对外提供接口来访问native功能, 从而能让前端在web app中开发类似native的功能.
- 每个JavaScript对外提供的方法最终是通过调用Cordova提供的
cordova.exec方法来调用native中的方法 - 插件中方法最终都是调用native方法, 所以需要相应的native方法实现
- 插件开发包含三个主要部分分别是:JavaScript接口, 原生类的实现, config.xml配置文件
二. 插件开发示例
下面按步骤讲解一个插件开发，该插件实现toast功能
A.搭建插件结构
- 当你打算去写一个插件时, 最好先去阅览一遍已存在的插件, 这样你就可以有的放矢, 并且可以去github看相应的源代码.
- 上面的插件结构你可以手动创建, 也可以使用plugman来帮你搭建, 最好使用plugman(如果没有安装, 可以使用
npm install -g plugman)来搭建, plugman搭建如下:
命令:plugman create --name [插件名] --plugin_id [插件ID] --plugin_version [插件版本号]
例子:plugman create --name ZxxToast --plugin_id cordova-plugin-zxxToast --plugin_version 1.0.0
-
上面的插件文件结构边包含：
- www，里面是一个js文件，插件的JavaScript接口部分
- src，原生平台代码实现，可以包含Android，iOS，WP等，你要支持哪个平台，就在下面创建一个平台子文件夹，如某个已经发布的插件:
15451327489750.jpg-
config.xml, 该文件起配置作用，制定插件的关键信息，初始如下， 后面还需对其进行编辑：
15452203423842.jpg
B.创建JavaScript接口
接下来是创建给前端调用的js接口，这里需要一些前端知识。
-
打开插件目录下
www中的ZxxToast.js文件，在ZxxToast.js中提供你想要的输出的接口function ZxxToast() { } ZxxToast.prototype.optionsBuilder = function () {//构建传给native的参数 // defaults var message = null; var duration = 1.0; var position = "center"; var addPixelsY = 0; return { withMessage: function(m) { message = m.toString(); return this; }, withDuration: function(d) { duration = d.toString(); return this; }, withPosition: function(p) { position = p; return this; }, withAddPixelsY: function(y) { addPixelsY = y; return this; }, build: function() { return { message: message, duration: duration, position: position, addPixelsY: addPixelsY }; } }; }; ZxxToast.prototype.showWithOptions = function (options, successCallback, errorCallback) { options.duration = (options.duration === undefined ? 'long' : options.duration.toString()); options.message = options.message.toString(); cordova.exec(successCallback, errorCallback, "Toast", "show", [options]);//调用原始api，Toast为原始类名 ,show为原始类提供的方法 }; //js 提供给外部的api ZxxToast.prototype.show = function (message, duration, position, successCallback, errorCallback) { this.showWithOptions( this.optionsBuilder() .withMessage(message) .withDuration(duration) .withPosition(position) .build(), successCallback, errorCallback); }; ZxxToast.install = function () { if (!window.plugins) { window.plugins = {}; } window.plugins.ZxxToast = new ZxxToast(); return window.plugins.ZxxToast; }; cordova.addConstructor(ZxxToast.install);上面的show方法就是对外提供的接口.
JavaScript接口提供了前端接口, 使其成为插件中最为重要的部分. 你可以随意构建你的JavaScript接口, 但你必须在后面使用下面语法来调用
cordova.exec和原生平台进行通信:
cordova.exec(function(winParam) {},
function(error) {},
"service",
"action",
["firstArgument", "secondArgument", 42, false]);
下面解释每个参数的作用:
-
function(winParam) {}:一个成功回调函数. 如果exec调用成功, 该函数会被调用, 参数由你传入. -
function(error) {}:一个错误回调函数. 如果操作完成失败, 该函数会调用. -
service:用来被原生调用的服务名. 与之对应的是原生类, 更多信息在下面各平台的指导中. -
action:用来被原生调用的动作, 与之对应的类, 请看原生平台指导 -
[/* arguments */]: 一组传给原生环境的参数
C.原生平台对插件接口的实现
这里先实现iOS平台的接口支持
- 因为插件类需要引用Cordova库的
CDVPlugin类, 所以先创建一个空的Cordova项目, 然后添加iOS平台, 用到的命令如下:
$ cordova create CordovaDemo
$ cordova platform add ios
$ cordova build ios
-
用Xcode打开在刚才创建的Cordova项目下的
platforms/ios/中的iOS工程:
15452233552528.jpg -
在Xcode中创建一个名为Toast的OC类:
15452235505656.jpg
上面的提供的方法, 在JavaScript接口中可以通过exec()方法中的action参数来指定.
-
类Toast的实现文件Toast.m如下:
#import "Toast.h" #import "Toast+UIView.h" #import <Cordova/CDV.h> @implementation Toast - (void)show:(CDVInvokedUrlCommand*)command { NSDictionary* options = [command argumentAtIndex:0]; NSString *message = options[@"message"]; NSString *duration = options[@"duration"]; NSString *position = options[@"position"]; NSNumber *addPixelsY = options[@"addPixelsY"]; if (![position isEqual: @"top"] && ![position isEqual: @"center"] && ![position isEqual: @"bottom"]) { CDVPluginResult * pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"位置参数无效. 有效的参数可选：top, center, bottom"]; [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; return; } NSTimeInterval durationMS ; if ([duration doubleValue] < 1.0) { CDVPluginResult * pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"时间参数无效. 时间参数必须>1.0"]; [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; return; } else { durationMS = [duration doubleValue]; } [self.webView makeToast:message duration:durationMS position:position addPixelsY:addPixelsY == nil ? 0 : [addPixelsY intValue] data:nil styling:nil commandDelegate:self.commandDelegate callbackId:command.callbackId]; CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK]; pluginResult.keepCallback = [NSNumber numberWithBool:YES]; [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } - (void)hide:(CDVInvokedUrlCommand*)command { [self.webView hideToast]; CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK]; [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } @end -
在刚才创建
ZxxToast插件目录的src/创建一个文件名为ios和android的文件夹(后续用),然后将将上面创建的native类实现copy进去, 如果原生类依赖某些第三库, 也要copy进去:
15452250601299.jpg
D.配置plugin.xml文件
-
添加原生平台配置
<?xml version='1.0' encoding='utf-8'?> <plugin id="cordova-plugin-zxxToast" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>ZxxToast</name> <name>Toast</name> <description> 让webview弹toast框 </description> <author>zhouxingxing</author> <js-module name="ZxxToast" src="www/ZxxToast.js"> <clobbers target="cordova.plugins.ZxxToast" /> </js-module> <engines> <engine name="cordova" version=">=3.0.0"/> </engines> <!-- ios --> <platform name="ios"> <config-file target="config.xml" parent="/*"> <feature name="Toast"> <param name="ios-package" value="Toast"/> </feature> </config-file> <header-file src="src/ios/Toast+UIView.h"/> <source-file src="src/ios/Toast+UIView.m"/> <header-file src="src/ios/Toast.h"/> <source-file src="src/ios/Toast.m"/> <framework src="QuartzCore.framework" /> </platform> </plugin> -
上面的节点解释:
id：代表这个插件的唯一标示，在上传到npm后，用户都是通过这个插件id去下载的
<name>：这里name可以和id不一样的，这个name就是插件的name，没有其他对应关系<js-module>:文件中可能会有多个js-module的，一个js-module就是一个调用的方式，这里用户调用的方式就是cordova.plugins.ZxxToast.xxxMethod，之后我们会对外提供toast这个方法，那调用方式就为cordova.plugins.ZxxToast.show
有关更多plugin.xml配置的相关信息, 请参考重要配置文件plugin.xml
F.插件调试
这里的插件调试即需要前端知识, 也需要原生开发经验所以有点难度. 而且测试代码需要在前端页面上实现. 所以下面的部分测试内容有可能不是那么的好.
-
为你的插件创建一个
package.json文件:ZXX_MBP:ZxxToast developer_zxx$ plugman createpackagejson /Users/developer_zxx/Desktop/cordova-plugin-zxxToast/ZxxToast //输入这个命令后, 命令行提示输入一些关键信息 name: (cordova-plugin-zxxToast) zmmzxxx //你在npm注册的用户名 version: (1.0.0) //版本 git repository: //可以输入github仓库地址, 你可以将插件发布到github, 这里我还没创建, 在发布的时候再去github创建代码库 author: zhouxingxing //作者 license: (ISC) MIT //许可证 About to write to /Users/developer_zxx/Desktop/cordova-plugin-zxxToast/ZxxToast/package.json: { "name": "zmmzxxx", "version": "1.0.0", "description": "\n 让webview弹toast框\n ", "cordova": { "id": "cordova-plugin-zxxToast", "platforms": [ "ios" ] }, "keywords": [ "ecosystem:cordova", "cordova-ios" ], "engines": [ { "name": "cordova", "version": ">=3.0.0" } ], "author": "zhouxingxing", "license": "MIT" } Is this OK? (yes) //回车就好 创建一个用来测试插件的Cordova项目:
$ cordova create TestCordovaPlugin
$ cd TestCordovaPlugin/
$ cordova platform add ios android
- 进入你上面创建的, 然后从本地添加你的插件:
$ Cordova plugin add /Users/developer_zxx/Desktop/cordova-plugin-zxxToast/ZxxToast
运行上面命令后, 打开TestCordovaPlugin项目, 在plugins/下发现了你开房的创建, 说明已经安装好了
- 编写测试代码, 打开
TestCordovaPlugin根目录www/下的index.html文件,添加一按钮<button onclick="window.app.showShortTop()">Toast showLongBottom</button>:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<button onclick="window.app.showShortTop()">Toast showLongBottom</button> //在首页添加测试按钮
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/Toast.js"></script>
</body>
</html>
- 打开
www/js/下的index.js文件, 在里面直接引用插件的js接口:
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
//测试
window.plugins.ZxxToast.show('Hello World!!!','4','bottom' ,function(a){
console.log('toast success: ' + a)
}, function(b){
alert('toast error: ' + b)
})
}
};
app.initialize();
- 使用
cordova run ios运行项目, 看效果:
- 然后你可以使用Xcode打开
platforms/ios/下的项目进行调试, 你对下图标记的文件就行修改调试, 调好后, 将修改同步到插件中即可:
15452741342015.jpg
原因安卓平台的插件开发和发布, 和iOS类似, 只是语言和开发环境变了, 可以参考下面的文章:
- 使用plugman创建插件-android:https://blog.csdn.net/u014284625/article/details/79922677
- apache-cordova官方文档:https://cordova.apache.org/docs/en/latest/
三. 发布插件
插件的js接口, 原生代码都已经实现了, 那么你测好后, 就可以发布该插件了
你可以将插件发布到任何基于npmjs的注册处, 但推荐的是npm注册处. 这样其他开发者能够使用plugman或cordova-cli来自动安装你的插件.
-
为了发布插件到npm, 你需要按照下面步骤:
- 安装
plugmanCLI:
$ npm install -g plugman- 为你的插件创建一个
package.json文件:
$ plugman createpackagejson /path/to/your/plugin- 发布
$ npm adduser #假如你现在还没有账号 $ npm pbulish /path/to/your/plugin更多关于npm使用方法, 请参考npm文档中心的Publishing npm Packages
- 安装
使用
npm pbulish之前, 需要你将你的插件代码上传到github上面, 这样你可以使用Git管理对你的插件进行版本控制, cordova-cli也可以直接使用Git url来下载你的插件.
四. 关于iOSWKWebView的使用
由于iOS8 Apple开始推荐使用更先进的WKWebView, 所以在iOS的最新的版本中, 我们不得不使用WKWebView, Cordova默认支持UIWebView. 而想要使用WKWebView的话就需要使用核心插件cordova-plugin-wkwebview-engine
使用方法:
这个插件要求cordova的版本>4.0.0
- 安装发布版本:
$ cordova create wkwvtest my.project.id wkwvtest
$ cd wkwvtest
$ cordova platform add ios@4
$ cordova plugin add cordova-plugin-wkwebview-engine
- 安装测试版本:
cordova create wkwvtest my.project.id wkwvtest
cd wkwvtest
cordova platform add https://github.com/apache/cordova-ios.git#master
cordova plugin add https://github.com/apache/cordova-plugin-wkwebview-engine.git#master
但是这个插件依然有些问题, 在Stack Overflow网站查资料时, 有人推荐使用cordova-plugin-ionic-webview
参考文档
- iOS原生项目嵌入Cordova:https://blog.csdn.net/yl19920713/article/details/78487149
- 如何在原生工程中引入Cordova工程: https://blog.csdn.net/e20914053/article/details/50170487
- 手动创建插件目录:http://www.cocoachina.com/ios/20180608/23718.html
- 使用plugman创建插件-ios:https://blog.csdn.net/u014284625/article/details/80699275
- 使用plugman创建插件-android:https://blog.csdn.net/u014284625/article/details/79922677
- apache-cordova官方文档:https://cordova.apache.org/docs/en/latest/
- 创建并调试Cordova插件:https://www.outsystems.com/blog/posts/how-to-create-a-cordova-plugin-from-scratch/
- 如何测试插件:https://kerrishotts.github.io/pgday/workshops/2017/campp/testing.html
