前言

趁着明天项目上线,这几周终于是忙完了,终于有时间看看新的东西了,对于weex,之前也大概了解过,也许这个东西会死掉,但是这种类型的我个人觉得始终会成长的,RN也好,weex也好,都是一种思路很好的解决方案,所以无论哪种,我觉得都有学习的必要,尽管现在没什么市场,但是听闻在阿里2端中90%的占比,我个人觉得还是有必要看看的.

初识Weex

一般,我学习东西,喜欢直接从google中搜索,然后挑自己的看的懂的看,所以我看到了github上的这篇文章.

~~https://github.com/weexteam/article/issues/4~~

上面这个貌似比较老了
下面这个比较给力

https://alibaba.github.io/weex/cn/doc/get-started.html

所以今天,让我们从这个网站开始学习.

Weex环境

由于Weex是由Node.js构建的,所以,在我们开始前,需要配置环境

安装Node.js 点我安装

还是使用cnpm吧 (由于权限问题,在此加上sudo)

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Weex命令行程序 Weex Toolkit
```
sudo cnpm install -g weex-toolkit
```
安装结束后使用weex命令验证是否成功

上手Weex

首先进入playground网页版网页版playground
然后下载App,笔者是用的安卓(Samsung Note 5)
打开网页,发现分为3个界面,左边是代码,中间是预览,而右边是二维码,可以用移动端的App扫描

当然,最重要的就是左边的代码部分了

<template>
    <div>
    <text class="text">{{text}}</text>
    </div>
</template>

<style>
    .text {
        font-size: 50;
    }
</style>

<script>

module.exports = {
    data: {
        text: '这是测试.'
    }
}
</script>

当然效果就是右边的预览中有一排字,”这是测试”

看了文档介绍,得知
Weex代码是由3部分组成

template
style
script

本地开发Weex

前面安装了Weex的安装环境,那么我们现在可以愉快地编写代码了

首先

我们创建一个.we后缀的文件,然后输入之前说的3个标签

<template>
</template>

<style>
</style>

<script>
</script>

现在,我们写好了一个Weex程序,但是不能直接运行,需要我们通过改革安装好的weex-toolkit编译.,所以执行

$ weex HelloWolrd.we

结果报错了

HelloWolrd.we not accessable

想到是不是区域的问题,那么cd到当前文件夹再执行

Bingo!

但是现在界面没有任何东西,毕竟你刚刚只添加了3个标签,没有任何内容

添加内容

接下来,我们来添加一些内容,在template中添加text标签

<template>
  <div>
    <text>薄荷冷冰冰</text>
  </div>
</template>

<style></style>

<script></script>

然后只用保存,就可以在浏览器发现我们输入的文字出来了.

修饰内容

Now,我们现在对我们之前添加的内容进行一些样式的修饰,文本的样式定为梅奔蓝,字体为50px.

<template>
    <div>
        <text class='text' style="color: #00E5EE">薄荷冷冰冰</text>
      </div>
</template>

<style>
    .text{
        font-size: 50;
    }
</style>

<script>
</script>

保存,浏览器中的颜色,大小已经变了.

三端同步

之前都是在浏览器查看效果,现在需要我们在移动端查看效果.

首先ctrl+c停止,cmd输入命令

$  weex HelloWolrd.we --qr

在终端出现一个巨大的二维码,再使用二维码扫一扫.
我们在移动端得到了个浏览器一模一样的东西.

调试

这一节的题目是教程的题目,笔者也不是很懂,所以就照着教程来吧.

weex-toolkit 已经集成了 Debugger，只需要使用如下命令即可开启 Debugger 开关调试 hello.we：

$  weex debug  HelloWolrd.we

我们输入以上命令开启，会自动打开浏览器，页面上有两个二维码，第一个是 Debugger Server，第二个是 .we 文件的地址。我们在 Playground 中先扫第一个，此时浏览器会进入一个新的页面，请你选择你需要的调试模式：

Debugger：将会打开 js debugger 页面，您可以通过 debugger 页面调试 js（诸如打断点查看js log 和查看调用堆栈等信息）；
Inspector：将会打开 inspector 页面，您可以通过这个页面查看 Weex 页面的 element 属性结构，包含高亮元素，展示样式表，以及显示 native 的 log。同时可以打开一个远程的手机镜像，便于查看界面。另外调试方块中的 ElementMode 可以用来选择 element 树显示原始的 native 组件树还是显示面向前端同学的 DSL （HTML）组件树。
选择一种模式后会新开窗口进入调试页面，这时我们再扫第二个二维码即可进入我们想要调试的页面进行调试了。

上面是文档的原文,我跟着做了一下,点了inspector,发现只有chrome的控制台,其他什么都没有,于是我尝试了重新弄了,然后,就有了

发现左边就是手机的实时画面,当然非常卡,右边就是正常的chrome控制台~妈的,老子没有做过前端~

后续

今天的学习就介绍了,比较简单,主要是熟悉Weex的环境和样子,但是真正的代码并没有接触,但是感觉有前端基础的同学会学的很快,可怜我这个只会iOS的彩笔啊….
接下来的,我们将学习Weex的语法,我们下期再见.

P.S 边看边下,感觉很浪费时间啊