佛曰:前世五百次的回眸,才换得今世的擦肩而过?br/> 了解尊龙z6尊龙最新登录首页-尊龙备用网站官网-尊龙备用官方网站只要60秒,让我们不再错?br/> . . .

WEEX

当前位置:主页 > WEEX >

Weex原理之带你去蹲坑

来源:admin       时间:2020-11-16 07:25         责任编辑:admin

  本篇将节操满满的安利Weex(˶‾᷄ ⁻̫ ‾᷅˵),不一样的角度推荐你入坑,官网有的我们不拖泥,这里将给你补充官方没有的,深入到蹲坑给你排忧解难,总会给你点惊喜,内容越后越干,请紧张的往下看。

  有对比才有伤害,说到Weex,难免让人联系React Native。虽同为跨平台移动端解决方案,拥JavaScript妄一统天下,单两者的设计理念其实截然不同。

  这里先介绍下两者的差异,给徘徊在 React Native 和 Weex 之间的人,理解更适合哪些场景。

  React Native更适合开发完整的App,因为它的性能较好,第三方插件丰富,社群活跃并且维护较好,文档完整等(本篇主角是Weex好吧魂淡(#゚Д゚))。

  当然Weex也可以开发完整的多页面App,同时我也是这么用过,不过效果对比React Native,显然强差人意。

  Weex胜在容易上手,基于Vue的设计模式,类MVVM的实现,也让前端能更无缝的实现一些高性能的App业务。

  Weex的社群,个人觉得还是弱,资料不足,文档简单,第三方支持太弱。和React Native一样支持带原生功能的插件开发,但是,支持太少了,这也提高了后期的开发门槛。同时,一个小问题很容易让入初学者,三过门而不入,作为一个发布了两年的框架,还是比较让人吐槽的。

  如上可知,因为JS端运行于独立的单线程中,所以为了保证运行的流畅性,一般需要避免在JS端执行耗时操作,比如:网络请求,图片加载等,其实都是在原生端完成,js端执行的是发起一个请求和响应一个结果。同时因为原生端与JS端是通过JS Bridge通讯,所以也需要尽量避免大数据和频繁的通讯,导致响应的延迟。

  原生端的dom的加载解析映射,也是性能的一大瓶颈。一般而言,Weex在Web端生成的,是通过webpack的webConfig打包成单页面的index.web.js文件;而在原生端,一般会通过webpack的weexEntry配置成多页面形式:即每一个需要独立的.vue的页面,最终会被打包成一个.js文件。所以打开每个页面时加载对应的js文件,这很好的减小了需要加载的文件大小,提高了dom的解析效率。最后,Weex默认打的js只包含业务js代码,基础js库已经被包含在weex sdk中,也使得体积会小很多。

  程序员就要从配置环开始,Weex 环境搭建,点击链接,只要你要一个稳定的网络,参考官网搭建环境,也就一杯茶的功夫,take it easy。配置好之后,weex create testProject创建一个项目High起来吧。

  原生开发也许对vue接触不多,跨界有时候很容易望而却步,其实Vue本身,就是容易上手的框架,类似MVVM的模式(类似Android的DataBinding),很容让人理解上手,简单的说,你只关心数据,然后绑定到显示的控件,就是这么简单。

  一般通过Vue官网教程,30分快速撸一发,之后你就直接入门Weex了,对,Weex做的最彻底的就是,你直接使用 vue 写一个Web页面,之后再顺手编译成了 ios 和 android 的原生页面(尽管有些时候你需要在平台适配上花费心思)。

  如上图(请忽略那个this( ̄. ̄)),这就是一个极度简化的,用Vue写的Weex页面。效果是从显示Hello World ,一秒变I’m CarGuo,就是这么自信。

  因为需要支持三端,Weex在Vue的基础上阉割了一些标签、css样式和事件,具体可见与 Web 平台的差异

  其中,在Android和IOS上,text image等标签,其实是被编译为原生控件,这就是上面所说的dom解析,同时你也可以在原生端,自定义控件或者功能模块,然后注册到weex中使用,实际上weex提供的基础控件和功能模块并不多,但却很容易拓展,具体可见拓展原生端功能。

  说到这里,就需要说一说Weex的原生插件开发支持,这也是官方文档比较没整理好的原因,其实文档是有的:Weex插件开发文档,如Android插件大致流程就是:

  由此可见,weex可以很方便的提供原生功能的拓展支持,但是由于社群较为薄弱,导致第三方插件缺失,有(hen)些(duo)时候你可能不得不自己着手,开发原生端的功能支持,这就对于跨平台开发而言,特别前端开发而言,就稍(te)显(bie)不友好了。

  题外话:说到跨平台开发,也许你听说过cordova这位老大哥,它曾是早期的跨平台开发潮流,cordova提供丰富的原生插件和打包功能:通过webview把前端页面打包成一个App,通过插件提供前端需要的原生接口,交互通过webview的js接口支持。为什么说起它呢,是因为Weex中,你可以看到很多cordova的影子,类似weex platform add android、weex plugin add xxx都有些cordova的味道。如下图,你如今依旧可以在Weex中找,寻找到cordova的存在感。

  Vuex类似Redux,如果你没听说Redux不要紧,也不要怂,简单了说,Vuex就是单页面下,帮你管理数据的框架。数据都存在Vuex的store中,你操作store更新数据,然后将store绑定到界面。它的用处在于可以在多个vue组件间,方便的同步数据,更新界面。

  Vue-Router也是用于单页面下,指定跳到某个页面的管理工具,路由嘛,浅显易懂。

  Weex默认是单页面效果,也就是Android中一个Activity的概念,而单页面效果在原生上,跳转一多效果就会web了。既然叫native,怎么可能如此too young,所以这个时候,就需要修改默认的webpack,让其支持naive多页面了ı╮(╯▽╰)╭。

  首先,要知道Weex真正运行的是,通过entry.js作为入口文件文件,通过webpack,将.vue文件打包成index.js进行使用。Look,多页面的重点,就是将独立页面的.vue文件,生成多个js文件。

  什么?webpack没听说过怎么办,No problem,你只需简单的修改,一知半解完全可以胜任。如下图,我们主要需要修改文件,

  最后我们需要通过navigator来实现跳转,我们需要知道,要跳转的js文件在哪里,如下代码演示,如何实现navigotor的native跳转,完整兼容三端跳转请移步demo项目。

  当你的weex项目不断变大,一些样式共享,公共颜色,大小尺寸等的管理,就是你需要面对的问题。

  这时候sass和scss就可以起到很大的作用。最大优点是,它可编程,支持定义变量,而且不像阉割后的css一样,var()这种写法无法在native下得到支持,这时候sass的效果绝对让你回味无穷。

  使用sass也十分简单,简单配置下webpack,sass的语法也十分容易上手,只需十分钟了解下就可以愉快的享用这块糖了。

  7、list的loadmore,必须给list设置高度样式,才能在web中正常触发。

  11、多页即创建多个类似entry.js的入口文件,在webpack下配置weex的打开生成的js文件,用于navigator跳转,通过url传值。

  引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文...

  最近研究了下React Native 与 Weex , 整理了份对比~ 最终选择的阿里霸霸的Weex! 本文主要是...

  2016年4月21日,阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex,Weex能够完美兼顾性能与动态性...

  2016年底了解到weex,看到它的诸多优点,但因为工作中和它没什么交集也就没着手去学习。后续换工作有用到weex...

  vim是个很好用的编辑器,但上手难度高,而且初始的vim并不好用,所以我们要借助对配置文件vimrc和一些插件的使...