zoukankan      html  css  js  c++  java
  • (总结)Weex若干特性总结分析

    1.Weex是什么?

      背景:weex基于vue.js(2W+ star),由阿里团队推出。是一款小巧轻量的前端开发框架,支持组件化和数据绑定。目前,尤雨溪以技术顾问的形式加入weex开发。weex目前在阿里已被用于去年天猫双十一,并准备投入今年双十一活动,有一定的业务实践经验。

      核心思想:write once run everywhere && Native Speed in Native Platform

      目前获取资源的主要平台:

        官网:https://alibaba.github.io/weex/

        Github:https://github.com/alibaba/weex

        weex中文社区:http://weex.help/

        weex 文章:  https://github.com/weexteam/article/issues

           weex 调试: https://github.com/weexteam/article/issues/50

           weex交流室: https://gitter.im/weexteam/cn?utm_source=share-link&utm_medium=link&utm_campaign=share-link

         weex学习实践指南:https://github.com/vczero/weex-learning

    2.特性

      2.1语法

       

           每个we文件由:<template>页面结构、<style>界面样式、<script>数据和逻辑组成。

      <template>:

       类似传统HTML结构

      <style>:

      支持盒模型和flex布局。样式写法:weex采用羊肉串的写法:background-color,RN采用驼峰backgroundColor。  

      

      <script>:

       数据和逻辑

       分离思想对应传统web的语法:原生的css、html、javascript的语法 语法学习成本较低。

       基于Vue的语法结构,与传统web开发所遵循的结构样式分离逻辑一致。模板可理解为普通的html,数据绑定使用mustache风格,样式直接使用css(实现了flexbox)。更接近常用的web开发方式,语法学习成本较低。

           目前weex的一些文档比较少,但由于基于vue,基本的语法可供参考vue文档。如生命周期在weex文档基本没有论述,可结合vue进行学习。总体而言框架语法学习曲线较平缓

      2.2组件化

      Weex:组件(<template>页面结构  <style>界面样式  <script> 数据和逻辑)

      

      

      2.3 跨平台特性 write once run everywhere

      实现原理:1)核心工具是transformer把weex的we文件转换成纯JS代码;

      

      实现原理:2)在客户端运行一个 JavaScript 引擎,随时接收 JavaScript 代码;在客户端设计一套 JS Bridge,让 native 代码可以和 JavaScript 引擎相互通信。

    web端的处理

            

        同构 HTML5 版本主要利用 JS Bridge、组件定义、API 定义方面的高度抽象—— HTML5 的版本在性能和体验上有一定的劣势,并不是最理想化的效果。weex核心的主战场还是客户端,但亦可降级到H5。

      2.4 数据绑定

      实现:采取了数据监听+依赖收集(data binding + data change)的策略。没有通过脏检查,没有通过全量 diff Virtual DOM 树(和RN不同的方式。weex注重性能上的优化,相对RN有一定的性能提升。

    3.环境搭建

       web端:简单。weex **.we即可。基本按照demo文档很快可以运行出helloworld。参照:http://zct1989.oschina.io/2016/07/04/weex1/

       Android端:需要学习Android环境配置和Android项目结构,否则较易出错。

      

      主要关注图中红色圈圈部分:第一个为JS Bundle文件,其余为需配置的Android文件。具体配置方法参考:http://smilevenus.com/2016/07/03/%E9%98%BF%E9%87%8CWeex%E6%A1%86%E6%9E%B6Android%E5%B9%B3%E5%8F%B0%E5%88%9D%E4%BD%93%E9%AA%8C/

      ios端:参照 http://blog.csdn.net/dongyu0729/article/details/52104194  http://weex.help/topic/57ada512a16ef6026b9c7595 或可利用weex提供的weexplayground软件扫码直观看运行效果。(原理类似)

     4.调试工具

         weex devtools:weex debug 可同时检查weex里VDOM属性、原生代码调试、进行Javascript 代码断点调试,支持IOS和Android两个平台。与普通的chrome浏览器调试界面一样。可以在chrome查看,支持节点调试查看,支持真机调试。。https://github.com/weexteam/article/issues/50

      5 Demo展示

      如下Demo涉及以下几点:

      1)组件化开发思路。Demo涉及tabbar,navigator,list,stream等内置组件,及其余自定义组件。采用标准格式设置module.exports后,每一个we文件都可以作为一个组件来require使用。模块化和组件化进行的很彻底。RN类似。

      2)List组件,可配置懒加载功能。采用recyclerview来实现。

      3)获取后台数据,采用stream模块的fetch方法,满足日常需要。

      4)navigator实现页面切换。weex也是基于路由栈的机制,但是需配置好js bundle地址。

      5)参数传递。可采用URL,父子组件,兄弟组件传递(采用dispatch和on方法。参见:)等方法。本demo采用URL传递。

      6)生命周期,created,类似RN的constructor(props)。weex文档较少。但考虑到weex和RN的基本思想一致,可以借助RN来理解和使用weex。

        Demo展示(频道页,列表页,Android上运行):

                      

      6 存在问题:

        主要是生态问题

        1). weex七月底全部开源完成。开源时间较晚。
        2). github目前有6k+ start,主要贡献人员以阿里为主,额外贡献人较少。
        3). issue和pull request也比较少,社区目前规模比较小。
        4.) 文档更新较慢,demo bug较多。
        5). KPI项目?部分开发者对阿里后续维护有所担心。
        但随着weex的开源、vue作者尤的加入以及weex较优秀的跨平台特性和在性能上的优化。社区前景可观。

        SEO问题持续关注。

  • 相关阅读:
    Perfect ScrollBar插件使用方法
    分享WEBAPP利用纯HTML5实现拨打电话,打开相册,打开摄像头源码
    一周心得
    19赵亮龙07杨康
    李娜跟姜山
    一周心得
    对结对编程的个人理解
    周心得和总结
    关于IT行业抄袭和借鉴
    第三周总结
  • 原文地址:https://www.cnblogs.com/lightsun/p/5880753.html
Copyright © 2011-2022 走看看