Weex初学

作者: sea_biscute | 来源:发表于2016-10-30 20:51 被阅读479次

    Weex

    Weex是阿里巴巴开发的,用于开发跨平台软件的框架.
    最近刚刚研究Weex,所以先对其进行一个简单的基本的介绍.在学习的React Native之后,对于跨平台框架理念的理解相对容易些,在下面的介绍中,我会对它们进行对比分析.

    Weex优势

    Weex的优势所在:

    • 轻量级
      Weex使用标签化语言,语法非常简单,使用Vue.js框架,学习成本较低,对于前端开发尤甚.
    • 扩展性强
      Weex封装了丰富的组件和api,可以完成各种定制化的需求
    • 高性能
      Weex使用纯本地渲染,体验更好;可以实现热更新.
    • 跨平台
      Weex实现了Write Once Run Everywhere,并且适配了Web端,这与RN的Learn Once Write Everywhere和只适配iOS和android不同.

    Weex开发环境搭建

    和RN对比,Weex的开发环境配置更简单.
    只需要安装命令行工具: npm install -g weex-toolkit.然后就可以运行Weex文件啦!
    Weex的运行也很简单,不需要特殊的开发工具,只需要使用你习惯的编辑工具创建Weex文件(一般以.we为后缀名).

    在网页运行

    命令行weex fileName.we
    如上命令会在浏览器里打开工程,本地编辑文件保存后,页面会自动刷新,这也就是Weex强调的热加载!

    在客户端运行

    命令行weex fileName.we --qr -h {ip or hostname},会在终端生成二维码如下

    qr.png
    通过下载Weex的运行终端Weex Playground App,在APP内扫描二维码即可.

    需要强调的是: 所有在客户端运行的Weex项目,都是使用客户端原生组件进行渲染的,所以是纯客户端的体验,这一特点也是我们在追求跨平台框架时绝不妥协的一点.纵观跨平台框架发展史,凡是在体验上妥协的框架,都已经或者终将被淘汰.

    Weex语法

    Weex使用标签语言,三个标签<template>,<style>,<script>描述了全部的Weex渲染和交互.

    <template>

    功能类似于HTML,用于进行UI布局,Weex文件中必须包含该标签.
    <template>内部只能包含一个用来形容布局的根标签,

    <style>

    可以理解为是CSS的语法集合,用来描述组件的样式,非必须
    Weex使用的是Flex布局,<style>内部使用Flex的布局属性,需注意的是属性名使用的是中划线而非驼峰命名方式.
    Flex布局的优点和灵活在这里不多做介绍,感兴趣的可以自己研究下.

    <script>

    用于管理数据和事件.非必须
    组件的data-binding就是使用<script>实现的,在数据发生变化时,组件会自动刷新布局.

    Weex在实际开发中的问题

    在使用中发现了Weex的一些不足之处,现做个简单说明.

    • 不支持本地图片
      Weex内的image标签只能设置网络图片,不支持本地图片的使用
    • style标签不够丰富
      相比Web灵活的style标签,Weex只支持一部分特定的Flex标签

    总结

    Weex因为主打的是Write Once Run Everywhere,所以对于Native端一些常见的功能,类似打开相机,需要自己进行封装,所以Weex更适合开发用于展示页面和页面内交互的项目.

    关于Weex和React Native的对比,个人觉得这篇总结不错,大家可以看看.

    相关文章

      网友评论

        本文标题:Weex初学

        本文链接:https://www.haomeiwen.com/subject/fcfkuttx.html