ionic5+如何调用cordova插件中的方法
目前为止,网上搜到的有关ionic的帖子都是4以下的,但是我的ionic-cli是5.4.4的,所以目录结构与网上说的有所差异,所以在用ionic开发的程序调用自定义cordova插件方法时,遇到了许多坑,特此说明一下,希望对更新到ionic5+的你有所帮助。废话不多说。
环境
搭建环境以及版本信息在上一篇文章中就提到了,如果还没搭建环境的小伙伴可以先去看看上一篇 ionic+cordova环境搭建
安装cordova插件
这里首先确保你的环境已经搭建好了,ionic项目也创建出来了,并且能够正常运行。
如何自定义一个本地cordova插件,网上有很多文档说明,这里我就不专门写了,假设你已经有一个本地的cordova插件了。
cd
进入你的ionic项目中,执行如下命令
ionic cordova plugin add 本地插件绝对路径
然后添加完插件后,可以用ionic cordova plugin list
命令查看添加的所有插件。
ionic调用cordova插件中的方法
这里先了解一下ionic5创建出来的项目的目录结构吧,就是因为不了解结构,才绕了好多弯路,这里可以参考ionic5 目录解析 我觉得写得挺好的。
主要修改内容是 src\app\tab1 文件夹下的tab1.page.html和tab.page.ts两个文件。
tab1.page.html是存放显示页面的代码,
这个里面的布局可以按照你的需求去修改,我把初始项目的list列表删掉了,添加了几个button按钮,并且给按钮添加了点击事件。这里click必须用小括号括起来才有效,双引号里面是方法名,对应的就是.ts里面的方法。
tab.page.ts文件存放逻辑代码,
declare let cordova: any;
意思是把所有plugins下的cordova插件都引进来。
然后就用cordova插件中的plugin.xml里面的clobbers
定义的变量直接引用插件方法就行,
<js-module src="www/uhf.js" name="UHF">
<clobbers target="uhf" />
</js-module>
对于window
变量引用,因为ts文件不识别window,所有需要加any
类型声明,否则编译的时候会不通过。
此时编译运行,然后就可以了。
附一张结果图,点击之后会执行成功的回调,这时候就说明成功了,具体效果与插件方法有关。
总结
最后总结一下用到的命令,
从创建项目开始,
ionic start myApp tabs
//创建项目
cd myApp
//进入项目
ionic cordova platform add android
//添加安卓平台
ionic cordova build android
//编译环境
ionic cordova run android
//真机调试,检验项目正常运行
ionic cordova plugin add D:\MyCordova\CordovaNewUHF\UHFPlugin
//添加本地插件
修改页面及添加逻辑
ionic cordova build android
//再次编译(修改完文件之后)
ionic cordova run android
//真机调试
主要是没有了解ionic项目ts文件中怎么调用cordova中的方法,不知道怎么关联,所以才走了好多弯路,之后还会更新ionic项目怎么调用在线插件,以及如何打包上传插件集成到ionic-native集成库中。希望多多支持,共同学习。