运行平台
macmini os10.13.4
ionic : 3.20.0
node: v10.5.0
cordova: 8.0.0
nvm :v6.2.1
搭建环境
检查node版本,要大于8.0,可以去官网下载
node -v
查看node安装位置
which node
从下面的路径看出是用nvm管理的
/Users/lianchuang-wangzenghui/.nvm/versions/node/v10.5.0/bin/node
,所以直接用nvm升级
nvm常用命令(不用升级的跳过)
nvm install stable # 安装最新稳定版 node,现在是 5.0.0
nvm install 4.2.2 # 安装 4.2.2 版本
nvm install 0.12.7 # 安装 0.12.7 版本
# 特别说明:以下模块安装仅供演示说明,并非必须安装模块
nvm use 4 # 切换至 4.2.2 版本
npm install -g mz-fis # 安装 mz-fis 模块至全局目录,安装完成的路径是 /Users/<你的用户名>/.nvm/versions/node/v0.12.7/lib/mz-fis
nvm use 0 # 切换至 0.12.7 版本
npm install -g react-native-cli #安装 react-native-cli 模块至全局目录,安装完成的路径是 /Users/<你的用户名>/.nvm/versions/node/v4.2.2/lib/react-native-cli
nvm alias default 0.12.7 #设置默认 node 版本为 0.12.7
nvm ls 查看nvm版本
安装 ionic,cordova
npm install -g ionic cordova
安装plugman
npm install -g plugman
//创建项目
ionic start demo tabs
//添加平台
ionic pluginform add ios
//编译项目
ionic cordova build ios
添加插件
//创建插件(注意版本号必须三段)
plugman create --name alert --plugin_id demo-plugin-alert --plugin_version 1.0.0
alert 是插件名字
demo-plugin-alert 插件id
1.0.0 版本号
//cd到插件目录
cd alert
//给插件添加平台
plugman platform add --platform_name ios
ios 平台(ios/android)
//添加package.json文件(避免编译的时候出错,后面的点表示是路径)
sudo plugman createpackagejson .
//cd 到自己项目
cd demo
//给自己的项目添加插件
ionic cordova plugin add /Users/lianchuang-wangzenghui/Desktop/wuqionggit/ionic/alert
/Users/lianchuang-wangzenghui/Desktop/wuqionggit/ionic/alert 是插件的地址
调用插件
1,声明cordova,在你想调用插件的.ts文件最上面加上这句
declare let cordova: any;
2.调用格式
cordova.plugins.alert.coolMethod("今天好运气,一老狼请吃鸡呀!",result=>alert(result),error=>alert(error));
其中alert是插件名,
coolMethod是插件方法
device插件的安装与卸载
1.安装
cordova plugin add 【plugin_id】
2.卸载
cordova plugin remove 【plugin_id】
备注:
1.这个版的插件 不用把
#import <Cordova/CDV.h>
修改成
#import <Cordova/CDVPlugin.h>
也能运行
2.编译就是把src目录的文件打包到www文件和对应平台的www文件(platforms/ios/www)
3.两个www文件必须同时更新,不然会有错误
4.在打包的时候只要更新两个www文件的内容就好(比如我们这负责打包ios/安卓)
5.当我们原始插件的时候要注意node_modules文件里的替身文件要重新生成,不然下次添加插件会失败,当你的项目是接手别人代码没有原始插件包的时候,复制plugins里面相同的文件到node_modules就好
插件中的plugin.xml
<clobbers target="wuqiongAlert" />
这是告诉js调用的类名,在加入项目后cordova_plugins.js中可以找到
"clobbers": [
"wuqiongAlert"
]
这个与上面的值对应
在js中调用 wuqiongAlert.coolMethod
点后面的就是方法名
<plugin id="wuqiong-plugin-alert" version="1.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
这里面的 version与在加入项目后cordova_plugins.js中module.exports.metadata 里面的版本对应
网友评论