weex 入门与基础知识(三)

native(以ios为例)

上一篇可以看到能在ios端跑起来了,我呢,稍微懂一丁点ios(android也懂一点,但是android已经失去编写能力,只能看懂代码 - -),也能勉强写一点代码。所以深入一点native端,也仅仅是最基础的知识,大家就当扩展好了(ios同学就不要吐槽我了。。。。),所以这里仅以ios为例了,以后有机会(其实是有时间啦。。)再补充一点android的东西。

首先要了解的比较深入的同学可以参考这篇文章:weex是如何在ios客户端跑起来的:https://www.jianshu.com/p/41cde2c62b81

《《《《《《《《《《《《《《《《《》》》》》》》》》》》》》》》》》

可以看到进入app看到的只有一个预览页面,不难看出其实就是项目自带的index.js渲染出来的,

在weex_ios中全局搜索下index.js,可以看到:

attachments-2018-04-xIBVr3215ad0196dd8c23.png

可以看到在DemoDefine.h中已经定义了很多宏了,注意看CURRENT_IP提示你自己写上自己的ip,如果是自己玩的话写上自己的ip,自己测试就行了,如果是开发的话,还是做成可配置可切换的这样方便测试。

直接在appdelegate中的生命中期方法中加入:

attachments-2018-04-EnXAEEUn5ad01b6c40474.png

然后注释掉默认的controller:(在weexSDKManager里面):

attachments-2018-04-AMq1okZm5ad01bad6dadc.png

这里设置了默认的根控制器,我们用自己写的,看看效果:

attachments-2018-04-P8SxpW2Q5ad01bd50c381.png

没毛病。

这里要注意下:

这里要做一些必要的处理,weex文件都是从服务器上临时下载再渲染的,有时候服务器在更新资源可能取不到文件,或者网络问题没取到文件,此时你需要处理这种情况:

1、服务器和客户端都可以设置缓存策略。

2、有些必要的页面(比如失败页面,更新页面,这些一般不需要改动,有改动也是大发版的时候),直接打包好放在本地,如果从服务器上取不到文件,就可以尝试从本地加载这些错误页面。

3、降级方案,也是在本地存一些本地资源,服务器取不到再从本地加载,加载不成功,一段时间后又重新去服务器取。

这里我用了native端的tabbar。其实更好的做法是屏幕上的视图全部用weex来做,比如navigationBar和tabbar都用'假'的来做,原因如下:

1、用native来做的话,如果更新样式,增加tabbar分栏,就会很麻烦,尽量让weex来控制视图

2、屏幕适配的问题,这个高度是在native端控制的,到时候计算内容视图高度的时候会很伤,

3、三端统一的问题,android还好说,但是web端也得写一个类似的'假'的组件,何必了?反正都要写,干脆就直接三端都用同一个假的不就OK了吗?

如果用'假'的tabbar,那么如何做到切换分栏呢?

这里提供一个思路:

整个app其实就只有一个navi控制器,tabbar切换的时候其实是在这一层push到另一个页面,完成之后重构这个控制器栈。把第一层去掉,这样就保证了无论怎么切换分栏都能保证这个分栏是root层,避免越堆越多。

《《《《《《《《《《《《《《《《》》》》》》》》》》》》》》》》

说下单页面调试:

学习weex playround的做法,集成一个二维码扫描,当然这个属于ios扩展,具体怎么做请参考官网'扩展ios的功能'

然后点击扫码,唤起native端的二维码扫描(weex本省不具有这个能力的),注意在要开启相册权限和相机权限之类的,然后直接扫我们在preview.html中的二维码,拿到这个url后,native端就去渲染就行了(严格的说这里还要判断是不是一个有效的weex url,因为毕竟扫了个百度的url结果你用weex的controller去渲染,肯定出不来呀)。

然后想要远程调试(weex debug),还要在native端接入devtools,官网有介绍的,就ios用cocoapods就行了。

因为我使用的是模拟器,所以不能使用相机功能- - ,所以无法做到这一点,代码就不贴了。

这里有同学问到怎么页面之间实现跳转:

有一个做法是,自定义module,暴露些方法给weex,比如wxPagePush和wxPagePop给weex,每次weex调用这些方法的时候,传给native下一个页面的weex url。native拿到之后也是跟扫二维码一样。判断是不是weex url,然后用weexsdk渲染出来就行了。wxPagePop 直接回退上一个页面就OK了。(这里web端存在差异,web端的跳转其实是到一个新的url,所以web端的逻辑还得单独加入,使用location.href和历史回退之类的就OK了)

然后主要的还是涉及到参数传递。这个简单要么跟url一起传回native,要么就是跟在url后面,这里要注意的就是weex端和native端的交互,怎么通知到对方有参数,并且参数是什么。

上面说这么多其实就是weex的内置组件navigator的实现差不多,但是我们为什么没用这个呢,因为我公司本来就用app了,这些跳转已经很多衍生操作了。就weex内置的navigator只能跳转一级,但是如果自己实现的话可以根据参数做到越级回退(常见场景就是支付成功之后这个页面就销毁,不在栈中。保证用户回退,包括物理返回都不会回到这个页面,导致可以重复支付),或者回到root层。甚至直接清空整个控制器栈。

注意:

当你跳转到下一个页面的时候,带了参数,因为web端的原因建议参数直接跟在url后面即可。native端开始渲染这个页面的时候需要通知到weex接受了什么参数,不然weex拿不到参数就没法写逻辑了,而且这些应该在渲染之前就得通知到。因为你在写weex代码的时候没有一个生命钩子可以拿到这些参数,所以需要注册

事件监听器,在此时fireEvent 传给weex参数。weex在生命钩子中去监听即可拿到参数,就可以往下面根据参数写逻辑了。

这里还涉及到一个页面逆向传值,在ios中叫block回调,常见的场景就是一个页面填完信息之后返回上一个页面需要把这些信息带回去。这里这个在native端做好这些回调逻辑(还要保证三端相同,但是web端很难处理。)很难,所以建议使用weex最近提供的 BroadcastChannel 这个还是蛮好用的,至少解决了逆向传值的问题。

因为我也是刚做这一行,很多知识不是很足,vue用的也不多,看到官网介绍了vue-router这个东西,我看了下,

也许页面的跳转还可以通过路由来控制,这个还要再花时间去研究咯

  • 发表于 2018-04-13 11:05
  • 阅读 ( 3224 )
  • 分类:经验分享

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
copywithzone

职员

3 篇文章

作家榜 »

  1. admin 7 文章
  2. 学习委员 6 文章
  3. 小小书童 3 文章
  4. copywithzone 3 文章
  5. ibobo99 2 文章
  6. guyangdaxia 2 文章
  7. tianyu12345 1 文章
  8. akun 1 文章
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

weex大学,分享从这里开始,精彩与您同在