Weex入门教学 (iOS端读取js ,拦截点击)

前端同事看了weex相关文档,写了一个项目,写的时候用Android模拟器调试的,写完之后,想看iOS端的效果,一顿操作,weexpack platform add ios,然后weexpack run iOS,最后并不能跑起项目.同事把一堆.js文件传给我,让我跑起来给他看看...

说下步骤吧,网上关于iOS那部分的weex教程有很多,但是weex一直在更新,版本都不一样,建议直接去github: https://github.com/alibaba/weex/ 先下载个demo看看.

1.打开下载的demo. 用终端先cd到weex-dev/ios/playground,然后pod install.

2.打开,WeexDemo.xcworkspace,找到DemoDefine.h.其中 HOME_URL 是在debug环境下读取的.js路径, BUNDLE_URL是release环境下读取的.js路径.

3.把自己的.js文件夹拖入工程.记得选creat folder references,因为参照weex文档写的js,里面很多push操作都是找某个路径下的js,如果不选第二个,可能会导致路径找不到.

4.例如我把dist文件夹拖入工程,由于我的初始页面需要是登录页面,所以修改文件路径.

5.cmd+r,运行模拟器,如图所示:

这样读取js文件操作基本ok了.

关于拦截操作:
1.比如点击登录按钮,会触发事件,我们找到login.js,查看里面的内容找到登录相关的事件,其中jumpUrl是点击所执行的方法,找到jumpUrl这个方法,
其实跟OC里面的 self.navigationController pushViewController:<#(nonnull UIViewController *)#> animated:<#(BOOL)#>是一个方法.只是把js代码通过jsbridge调用原生的一些api.

2.既然是通过jsbridge去执行点击操作,我们查找项目里面有关jsbridge的文件,找到WXBridgeContext.m这个文件,

再找到- (void)executeJsMethod:(WXCallJSMethod *)method这个方法,

B3E5945F-117D-4BCA-ABB4-72274B715707.png

接着打一个断点,再点击登录按钮,po method,如下面所示,control=12,事件为:click,按钮位置以及什么时候点击的时间戳也po出来了.

3.在此方法里面就可以写自己想要拦截的操作了,例如通过control=12,return出方法,把自己想要写的操作写进去就ok了.