给初学者的weex教程(一)

本文链接：https://blog.csdn.net/qianqianyihao/article/details/76037543

前言

随着阿里开源的构建高性能、可扩展的原生应用跨平台开发方案--weex的发布，相信很多人都涌向了这股浪潮中，我也是从RN中抽了一腿出来踏进了这个“坑”中。随着阿里勤奋的开发人员和我们不断踏坑的开发者的填坑，现在weex已经来到V.13.0版本了，相对于刚开始的时候来说是比较完善的了，但是还需要这个不断填坑的过程去完善。weex已经发布了一年多了，但目前的资料还比较少，我也是自己不断摸索着过来的，所以写下这个教程，帮助那些没有用过weex的朋友入门，一起探讨下weex是否值得接入到项目中去。

注：如果你觉得写得不好或者错误的地方，请直接批评指出。

首先，我先回答weex和RN有什么区别吗？有必要两个都去学吗？

这里我也不详细去谈这个问题了，就贴一个说得比较好的出来供大家参考：weex&ReactNative对比

刚刚说到学习weex的途径相对来说还是比较少的，第一个就是官网，直接度娘weex就可以找到，第二个就是github上weex的源码。

正文

这里贴一个官网的一个原理图

引用官网的话：Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面，然后编译成一段 JavaScript 代码，形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端里，WeexSDK 会准备好一个 JavaScript 引擎，并且在用户打开一个 Weex 页面时执行相应的 JS bundle，并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践；同时，如果用户没有安装移动应用，他仍然可以在浏览器里打开一个相同的 web 页面，这个页面是使用相同的页面源代码，通过浏览器里的 JavaScript 引擎运行起来的。

按我的理解是这样的，你写好的weex代码，编译成JS文件，然后放在本地或者远程服务器上，客户端去访问，成功后客户端进行渲染，这个渲染是怎么个渲染呢？比如说吧，weex上的一个控件<text>，其实就是渲染成原生控件TextView了，其他的也是类似的，所以效果是跟原生一样的。

如果你对weex产生了兴趣，那接下来就要开始搭建开发环境了。

开发weex需要node.js、weex-toolkit，所以各位就自行去下载吧，官网也有非常详细的介绍了。这里我推荐一个weex的开发工具WebStorm(WS)，个人感觉这个IDE非常友好，而且跟AS是出自一家公司，所以对于Android的开发者来说再适合不过了。

第二步，开始你的weex之路，初始化一个weex项目，使用命令进行创建项目

weex init demo-project

结束之后你就可以看到目录下有对应的demo-project了，那么，我们就进行愉快的开发吧。

weex，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。

Vue，Vue.js 是 Evan You 开发的渐进式 JavaScript 框架。开发者能够通过撰写 *.vue 文件，基于 <template>, <style>, <script> 快速构建组件化的 web 应用。

熟悉的Hello World

<template>
  <div>
    <text class="text">{{text}}</text>
  </div>
</template>
<style>
  .text {
    font-size: 25px;
  }
</style>
<script>
 module.exports={
    data:{
        text: 'Hello World.'
      }
  }
</script>

编译后，在浏览器访问，你就可以看到我们熟悉的hello world了。

是不是看起来有点像HTML的格式，但是又不像呢？其实这个就是Vue的基于 <template>, <style>, <script>构建的一个Web页面。

weex支持一些内置组件，比如上面的text、a、div、web、image、list、input等等，当你要用到时候不会用可以到官网上一查究竟，如果weex提供的组件还不能满足你开发的需求的话，我们也是可以自定义组件在weex上使用，这个到后面我们再详细讲解。

还有比较重要的一点就是，不是所有的html5和css3的样式在weex中都可以使用的，比如

border: 1 solid #ff0000;

这样的组合写法在weex上就不支持了，很多这样的组合写法也将不支持的。

然后weex默认的样式是flex，不用主动去声明display:flex，因为weex默认就是flex样式进行开发的。

那么我们就详细讲解下flex这个布局模型。

flex-direction：定义了 flex 容器中 flex 成员项的排列方向。可选值为 row（从上到下排列） | column（从左到右排列），默认值为 column。

justify-content：定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 flex-start | flex-end | center | space-between，默认值为 flex-start。

flex-start：是默认值，所有的 flex 成员项都排列在容器的前部；
flex-end：则意味着成员项排列在容器的后部；
center：即中间对齐，成员项排列在容器中间、两边留白；
space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间。

align-items：定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。

stretch 是默认值，即拉伸高度至 flex 容器的大小；
flex-start 则是上对齐，所有的成员项排列在容器顶部；
flex-end 是下对齐，所有的成员项排列在容器底部；
center 是中间对齐，所有成员项都垂直地居中显示。

Flex 成员项：flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间. 如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。

flex {number}：值为 number 类型。

下来可以试一下各个属性，看下布局会如何变化的。

好了本次的教程到此结束，我会继续抽时间将剩下的教程在最短的时间内写完的。