由于在项目中用到了h5和oc的交互,综合考虑最后我们选择了cordova来写这个项目;
一、首先是安装cordova,切记吃透官方文档,少走弯路。 打开命令提示符或终端,然后键入npm install -g cordova
二、编写插件
1.创建一个Demo: qwerDemo
$ cd ~/Desktop
$ cordova create qwerDemo com.example.demo qwerDemo
注意: 创建项目可以cordova create qwerDemo
也可以cordova create qwerDemo com.example.demo qwerDemo
后者的区别在于第一个qwerDemo
是目录文件夹的名字 ,com.example.demo
指的是项目的bundleId
,在目录里的config.xml
有提现,第二个 qwerDemo
指的是项目中的名字
2.进入工程目录
$ cd qwerDemo/
3.创建平台(这里仅以ios为例)
$ cordova platform add ios
4.安装plugman:
npm install -g plugman
如果安装不成功,出现这种情况:
报错的情况下就用:
sudo npm install -g plugman
按照提示输入密码即可成功安装。
5.我们既可以用自己创建的插件也可以去cordova插件下载
①安装插件
cordova plugin add cordova-plugin-device
查看插件
cordova plugin list
删除插件
cordova plugin rm cordova-plugin-device
②自定义创建插件
创建一个插件名为MyFood, ID为com.china.food,版本号为1.0.0的插件
plugman create --name MyFood --plugin_id com.china.food --plugin_version 1.0.0
进入插件目录
cd MyFood
plugin.xml 增加ios平台
plugman platform add --platform_name ios
目录结构如下:
接下来修改src/ios/MyFood.m
中的内容
修改调用www/MyFood.js
:
最后在插件目录使用:
$ cd MyFood
$ sudo plugman createpackagejson .
可以生成一个 package.json,防止安装插件时出现:
Error: Invalid Plugin! xxxxx needs a valid package.json
输入开机密码之后,所有的提示都直接回车即可。
现在插件写好了,就可以添加插件了
$ cd qwerDemo
$ cordova plugin add ../MyFood
如果执行命令的时候报错,则换成指令
$ cordova plugin add /Users/xxx/Desktop/qwerDemo/MyFood
即这个文件的目录拖进来。
这个时候打印cordova plugin ls
如下
到现在为止,插件的制作已经完成,打开项目
qwerDemo/platforms/ios/qwerDemo.xcworkspace
运行项目,项目运行成功工程Demo已经上传至github,
欢迎大家提出意见我的QQ 203555928@qq.com