美文网首页
小白玩 weex(一) IOS-Swift集成weex

小白玩 weex(一) IOS-Swift集成weex

作者: 七十个seven | 来源:发表于2019-01-18 23:39 被阅读0次

半路出家的程序猿,稀里糊涂的学了weex,做了一段时间,也有了一些经验

weex的使用场景有限,在适合的场景下使用weex可以说是一个不错的选择。weex非常适合展示页面,交互不复杂的页面,开发效率贼高

毕竟刚转行,只会写weex,让我感到十分的恐慌,于是自己又试着学习swift(为啥没学OC?真的被语法吓到了,看起来很诡异),学着写IOS原生代码。

通过写这篇文章,做一些总结和记录,也为了方便日后查阅,复习

那就直接进入正题吧,

## SWIFT项目中如何手动集成WEEX?

参考资料:http://weex.apache.org/cn/guide/extend-module-using-swift.htmlweex官网,使用swift扩展IOS功能

    https://github.com/acton393/WeexSwiftSample,官网给的例子

Xcode 10 + Weex 0.19.0

看完swift的语法,然后去看官网的文档,心中一万只草泥马奔过,这尼玛是啥也看不懂啊;但毕竟转行做程序猿是自己的决定,跪着也要走完;只能硬着头皮上

下载github上官方例子,打开podfile,可以看到有如下信息;还有一个叫bundlejs的文件夹,里头放着weex项目编译出来的JS文件;看起来似乎不难,那我们就放照官网例子,试着自己集成一下weex

这里就不赘述如何创建weex项目以及安装cocoa pods了,如果有不懂的读者,可以自己尝试去整整看

1.首先使用xcode 创建single view app

创建成功后,我们在终端进入改项目目录,执行 pod init

然后将官网的podfile文件里的需要安装的第三方拷贝到自己项目的podfile里

官方:podfile里的信息:

    pod 'WeexSDK', ‘0.16.0’   //核心SDK

    pod 'WXDevtool', ‘0.15.1’ //开发工具

    pod 'SDWebImage', ‘3.7.5’ //图片处理

    pod 'SocketRocket', ‘0.4.2’ 

复制到自己项目,并且我把weexsdk的版本修改到 0.19.0

     pod 'WeexSDK', ‘0.16.0’   //核心SDK

      pod 'WXDevtool', ‘0.15.1’ //开发工具

      pod 'SDWebImage', ‘3.7.5’ //图片处理

pod 'SocketRocket', ‘0.4.2’

然后终端执行  pod install

2.创建桥街文件

     weexsdk是OC写的,swift并不能直接使用,所以我们需要创建一个桥街文件;然后通过swift来扩展OC暴露出来的接口,这样我们才可以愉快的使用

    我们新建一个WXEventModule的swift文件,

    接着我们继续新建一个WXEventModule.m文件

这时,会弹出如下对话框,点击创建桥街文件

最后我们再创建一个WXEventModule.h文件

3.尝试跟着官方例子,将WXEventModule.swift,WXEventModule.h,WXEventModule.m以及viewcontroller文件代码补充完整,还有一个图片类下载协议

   把官方例子里的内容直接copy过来不就完了??  好主意,拷过来,看看编译能不能通过

     我去,两年前的例子,竟然直接编译通过了,切斯太!!

4.补全Appdelegate里的代码

        还是直接拷贝吧,但是重新组织下代码,把配置weexsdk以及注册module,component,handler这些代码提出来,放到一个函数里

5.添加bundle文件夹

然后

6.将weex项目里编译好的JS文件copy到项目下的bundlejs文件夹下,我就把新建weex测试项目下的dist文件夹下的index.js拷贝到bundlejs文件夹下(这个在weex项目里用指令也可以做到,暂时还没研究,后面补上)

7.我们仔细查看官方例子中appdelegate中这段代码

```

    。。。。。。。。。。。

    let viewController:ViewController = ViewController()

        viewController.url = URL.init(string: String.init(format: "file://%@/bundlejs/index.js", Bundle.main.bundlePath))

        window = UIWindow.init(frame: UIScreen.main.bounds)

        window?.backgroundColor = UIColor.white

window?.rootViewController = UINavigationController.init(rootViewController: viewController)

   。。。。。。。。。

```

用一个viewcontroller加载JS文件,我们也按照他的格式创建了bundlejs文件,还特意拷贝了一个index.js文件

那就编译运行一下试试,看看能不能跑起来,cmd+r,

乖乖,竟然成功了,搞起来也不是那么难嘛,当然最简单的就是下载官方例子,然后把名字改了,再根据自己需要架构项目;

拿着官网的例子,copy再copy,还是了解了一些swift如何集成weex;

还算是有所收获吧;

相关文章

  • 小白玩 weex(一) IOS-Swift集成weex

    半路出家的程序猿,稀里糊涂的学了weex,做了一段时间,也有了一些经验 weex的使用场景有限,在适合的场景下使用...

  • Swift 中的 weex

    weex ios 集成参阅:Weex学习与实践:iOS原理篇 swift集成weex 首先将weexsdk集成到项...

  • [个人记录]Weex入坑

    Weex入门 官方文档 文档iOS集成 开发环境配置 安装node 安装weex开发工具 验证 weex-tool...

  • iOS集成Weex最全面的基础集成(OC)

    iOS 集成Weex入门教程 前言 自Weex发布伊始, 其口号 "Write Once, Run Everywh...

  • ios 集成weex源码遇到的坑

    集成源码weex的时候 发现按weex官网的步骤集成 renderUrl 永远是失败的最后发现官网的集成文档里 少...

  • weex集成到Android

    weex集成到Android是指在Android里面加载weex页面; 1、app module下添加依赖 2、a...

  • weex采坑行

    重拾weex,再次体会体会什么是绝望 原来搞过weex,在原有项目的基础上集成weex项目。一路填坑而行。 现在由...

  • weex和android 真机联调

    如果还不知道weex怎么集成到android项目,请移步到这里 https://weex.apache.org/z...

  • weex总结(iOS集成weex)

    1.标签使用本地图片 2. src 网络图片不显示问题 3.weex 调用 oc 比如...

  • Weex线上踩坑实录

    关于weex的基础集成网上有很多博客,我就不重点介绍,今天主要分享一下weex文档中并没有的,在实际项目集成中的碰...

网友评论

      本文标题:小白玩 weex(一) IOS-Swift集成weex

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