美文网首页
mac 上ionic3开发环境,和ios上插件开发与调用

mac 上ionic3开发环境,和ios上插件开发与调用

作者: 40dd4b561abe | 来源:发表于2018-07-18 10:41 被阅读11次

运行平台
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 里面的版本对应

相关文章

网友评论

      本文标题:mac 上ionic3开发环境,和ios上插件开发与调用

      本文链接:https://www.haomeiwen.com/subject/xdfopftx.html