深入折腾了一下 weex,做了一个知乎日报的客户端,同时实现了一种目前 weex 尚未提供的 native 页面切换思路。
最后效果如下:
这个 demo 主要实践 4 件事情:
1. 模块注册
2. 组件注册
2. native 方法调用
4. native 页面切换 & 参数传递
整个 app 只有两个页面,都是纯 weex 编写的,对于第一个页面非常的简单,布局类似于 ios 的 tableview
然后我们使用 this.$sendhttp 发起 http 请求,这里知道,weex 仅仅是一个渲染引擎,对于 http 请求,mtop 请求,甚至图片加载等功能,是需要业务注入实现类的。比如 weexdemo 里面的 sendhttp 就是注入了 wxstreammodule 模块,然后在实现里面使用了 nsurlconnection,这个设计非常不错,在具体的业务当中,你可以把实现代码替换成任何你想要的 http 库。
这就是 weex 注册模块的原理,其中图片模块是用 sdwebimage 实现的。我们同样也可以将其他的 native 方法注册到模块里面,例如:
然后在 javascript 代码里面只需要用 this.$call("event", "log", "hello, world!"); 就能在 native 里面输出 hello world! 这提供了强大的扩展能力。
首页的展示是较为简单的,用的是 weex 自带的 image 和 text,但是详情页是一个 web 页面,貌似我还没找到 weex 提供的 webview 渲染组件。(但是奇怪的是,我自建 wxwebviewcomponent 的时候提示 duplicated symbol,难道是还未实现么),所以我们需要自建一个 wxcomponent,用于 webview 渲染。
当然我们也可以使用 native 代码打开一个 webview,不过这样显然不如纯 weex 实现有趣。
这个 component 支持 url 和 html 两种 attribute,意味着可以从 url 或者 html 代码渲染他。我们把它注册到 webnode 这个名字上面,就能在详情页使用它了:
然后最最关键的事情来了,当用户点击一行的时候,我们要从首页跳到详情页,而这两个页面都是 weex 的(目前貌似 weex 没有提供这样的能力)。
但是没有关系,我们有 module,这里我实现了一套逻辑,包括了本地页面 push 和 weex 页面上下文传递逻辑。
然后在首页 onclick 的时候,只要把 context 带到 module 里面的 push 方法,往下透传过下一个 weex 页面,就能完成下个页面的初始化。
具体来说,这里面使用了一个数据绑定上面的技巧,我把 weex 页面上的 data 字段放置了一个 "{{context}}"
这是一个占位符,会在 native code 里面被 push 传进来的 context 替换(这是一个 nsdictionary),处理的过程只是做一次字符串替换
然后我们的上下文就会被绑定到下一个 weex 页面,其实根据这个思路,我们可以做更多的 weex 和本地的交互,甚至把它做成 framework 方便使用。
整个流程如下:
首页 weex 渲染 --> onclick --> module 传递上下文到下一个 weex --> weex 自定义组件 webview 渲染
以上就是整个 demo 的完整思路。
最后
weex 的模块注册、组件注册非常的有用,给业务扩展自己的能力,自定义自己的功能提供了强大的基础。
当然也希望 weex 可以在 native 交互方面提供更多有用的方法。