美文网首页
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