项目介绍：
首先我的项目是一个swift项目，想部分模块跨平台开发，将vue打的iOS包集成进来，但是vue打的iOS包是一个纯OC包，且里面有很多杂七杂八的东西。
1.跨平台开发，可以打安卓包和iOS包，都是直接生成了项目，我们来看一下目录结构
vue项目
因为我们是做iOS开发的，所以要将iOS文件夹直接拷贝出来，直接拷贝出来就是一整个可以直接运行的项目（要自己配制证书和签名才能运行）
2.我们来看一下iOS这个包都有什么
vue生成的xcode项目
第一眼望过去：这是什么乱七八糟的玩意儿
再看一下项目目录里面的东西
vue生成的xcode项目
这又是什么乱七八糟的玩意儿！
可以说作为一个纯iOS开发攻城狮来说，我们对于前段开发那一套了解但是并不熟悉。但是接下来的过程，基本是傻瓜式的操作，这些前段开发的包，基本就是拖进去就完事儿了。我们真正要做的是分析他们生成的这一套和我们自己的项目如何完美的契合。
这里我考虑过直接将这个项目打包成framework包，这样直接拖到项目里使用，岂不美哉，可是我对framework的了解停滞在打包部分代码和功能，并没有打包过整个项目，所以这个先放一放
vue生成的xcode项目
分析一下这个项目，发现这些基本上就是这整个app的内容构成了，所以
第一步：新建一个swift空项目，或者用自己的项目，但是建议先建立一个空项目熟悉一下，不然代码会很乱
在这里要说明一下，如果你建立的是oc项目，用以下方式也是可以的，不过在添加头文件时和swift略有不同，这里自己去搜，或者是参考人家这个oc项目中，头文件是怎么设置的
然后swift项目建成以后要创建头文件，引入oc的.h文件，这一步如果你不会创建，就去搜好吗
vue生成的xcode项目
vue生成的Xcode项目HelloCordova内
将这些文件夹复制并且粘贴到你的demo项目文件夹下，不要直接拖拽进去，不要直接拖拽进去，不要直接拖拽进去
自己创建的demo项目
粘贴完以后变成了这样子，config.xml和.storyboard文件我放在了VuewDemo下面
自己创建的demo项目
这是我的项目目录，当然你粘贴进来肯定不是和我一模一样的，下面先教你怎么把红圈里面的内容导入进来
自己创建的demo项目
添加这三个文件的方式
自己创建的demo项目
自己创建的demo项目
这一套流程大家很熟悉
我们再来看下面这个文件的拖拽方式
自己创建的demo项目
第一步和上面一样
自己创建的demo项目
第二步就有点难以捉摸。这里要添加哪个文件夹一定要看好
自己创建的demo项目
第三步，在build phases里面
自己创建的demo项目
第四步，在头文件里面
image.png
这个文件就算添加好了
下面添加这个www文件，上面的文件算是辅助使用网页的工具类，www的文件里面就全部是我们写的vue网页了
自己创建的demo项目
第二部略有不同
自己创建的demo项目
这样添加上去就OK了
剩下的那些文件，都先不要添加，下面还有别的
这样其实还没有配置好，运行的时候是运行不起来的
我们还需要做以下几步操作
自己创建的demo项目
我自己的项目里面有这么几个文件，不是我自己创建的，是需要添加进来的
添加步骤：
第一步
第一步
第二步，找到这三个项目，并且添加进来，我这里变灰是因为已经添加过了
第二步
第三步，按照图示设置一下这里
第三步
第四步，这里我们要设置头文件的名字了，点开build.xcconfig，这里我们可以看到是有设置头文件的命名方式的，不过这里是因为原本的项目是oc项目，所以头文件是设置的swift的，所以如果你自己的demo项目是oc项目，你的头文件的名字就要和这一模一样才行，所以不一样的同学，头文件重新命名吧。但是如果你自己的demo项目是swift项目，那就不用管这里，
第四步
第五步，新增一个自定义配置，步骤如下所示
第五步
键为WK_WEB_VIEW_ONLY,值为1
第五步
到这里你依然运行不起来web文件
因为还有最重要的一步
appDelegate中
然后接下来的事情就是配置你的证书啦，真机运行就可以运行起来啦。
如果不确定自己加载的是不是网页，可以测试一下，在这里写点内容，然后运行起来应该就有你自己写的这些字啦
image.png
网友评论