如何在现有iOS应用中集成Weex

最新推荐文章于 2025-05-15 14:46:26 发布

转载最新推荐文章于 2025-05-15 14:46:26 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b0e02bdf265da08fb019e40

文章标签：

#移动开发 #javascript #cocoapods #ViewUI

1.什么是Weex?

简单来说就是用开发Web的技术(HTML,CSS,JS)或框架(Vue)来开发原生应用。

其原理大概是这样：比如说你是用Vue开发一个iOS的原生应用，首先你可以在前端编辑器(比如sublime)开发，调试，最后通过工具打包会生成js文件，这个js文件包含了你开发的所有内容和依赖，然后把这个js文件拖到原生里面，按照Weex的要求配置一下，这时候原生需要集成Weex的解析渲染组件，在iOS里面就是WeexSDK,这个sdk会解析这个js，最终将代码渲染到原生里面。Weex其实虽然用Vue开发，其实真正到原生的时候渲染的组件都是原生组件，这也保证了weex的样式与体验是与原生一致的。并且支持了原生开发的同学可以自己开发原生组件。同时也会出现一个问题就是Weex不会支持所有的Vue语法功能，因为Vue最初是为了Web开发的，比如Web里面有Dom的概念，在原生里面是不存在的。具体的差异可以查看这里weex.incubator.apache.org/cn/guide/us…

2.如何将Weex集成到原生应用

接下来我们就演示上面的过程(如何在现有应用集成Weex)

1.新建一个iOS应用。

配置Podfile如下：

source 'git@github.com:CocoaPods/Specs.git'
target 'YourTarget' do
    platform :ios, '7.0'
    pod 'WeexSDK', '0.17.0'   ## 建议使用WeexSDK新版本
end复制代码

2.新建一个Weex应用

1.搭建开发环境。 www.jianshu.com/p/084b5b1e7…

2.开发调试完成后，在项目根目录执行npm run build，然后在在根目录找到dist文件夹，里面就是生成的js文件，直接拽到xcode里面.

3.初始化Weex环境

4.在ViewController中渲染weex instance

5.销毁weex instance

- (void)dealloc {
    [_instance destroyInstance];
}复制代码

到这里我们以一种最最简单的形式把weex已经集成到原生的ios里面了。

3.开发一个原生组件

这里的原生组件分两种module和component.

module主要是封装一些功能集合，比如网络请求等。

component主要是封装一些view组件，比如地图等。

我们以module为例子讲解，component与之类似。

1.自定义的module需要遵循 WXModuleProtocol协议，通过 WX_EXPORT_METHOD这个宏暴露出需要JavaScript调用的方法

在这里面就可以自由自在的开发原生了，然后通过callback回调到js即可。第一个参数是回调给js的数据，第二个BOOL值，如果为YES表示回调一次后就销毁，为NO则是不销毁。

2.在之前初始化weex环境的位置注册这个module。

3.JavaScript端的使用如下：

到此我们将weex集成到了原生应用并完成了一个module的封装。

转载于:https://juejin.im/post/5b0e02bdf265da08fb019e40