weex體驗報告

• 2019 年 12 月 4 日
• 筆記

本文作者：IMWeb 黃龍 原文出處：IMWeb社區 未經同意，禁止轉載

第一個問題： weex是啥？

官網：戳這裡

A framework for building Mobile cross-platform UI

英語不好不知道這句話是什麼意思，用google翻譯了一下是：《一種用於構建移動跨平台的UI框架》，阿里百川出品。

第二個問題：TM哪裡可以下載？

我也不知道，但是我是在 https://github.com/Laisly/weex 這裡找到了這個，其實可以先不用管，不用下載這個也可以。後續當作weex的例子來看倒是挺好的。

第三個問題：怎麼跑起來？

第一步：安裝android運行環境

到這裡下載安裝 http://alibaba.github.io/weex/download.html 這裡把二維碼也偷過來，也可以掃這個，當然這個可能是舊的。

第二步：安裝 weex-toolkit

npm install -g weex-toolkit

第三步：跑起來

1. 新建一個文件比如 hello.we

<template>    <div>      <text style="font-size:100px;">Hello World.</text>      <list>        <cell repeat="{{items}}">          <text class="item">{{title}} ---- {{id}}</text>        </cell>      </list>    </div>   </template>    <style>    .item {      font-size: 34px;      height: 100px;    }  </style>      <script>    module.exports = {      data: {        items: [          {id: 1, title: 'Title Start'},          {id: 2, title: 'Title Title'},          {id: 3, title: 'Title Title'},          {id: 4, title: 'Title Title'},          {id: 5, title: 'Title Title'},          {id: 6, title: 'Title Title'},          {id: 7, title: 'Title Title'},          {id: 8, title: 'Title Title'},          {id: 9, title: 'Title Title'},          {id: 10, title: 'Title Title'},          {id: 11, title: 'Title Title'},          {id: 12, title: 'Title Title'},          {id: 13, title: 'Title Title'},          {id: 14, title: 'Title Title'},          {id: 15, title: 'Title End'}        ]      }    }   </script>

然後進入命令行執行，記得把命令行最大化。這個二維碼有點大。

weex hello.we

打開weex Playground App 掃碼。這時可能會出現兩種情況

1. 一種情況是成功：

不要掃這個二維碼，掃了也沒用

1. 另一種情況是報錯：

不要急，進入錯誤指示的位置union庫的response-stream.js的第88行，添加代碼,就OK了

if (method === 'setHeader')  {      arguments[1] = encodeURIComponent(arguments[1]);  }

遇到的問題和感受。

1. 千萬不要調用 require('./weex-ui'); 調用這一句的後果就是極慢。
2. 就是上面這個錯誤。
3. 自動刷新還是蠻爽的。
4. 這貨據說是KPI產物，不知道後續會發展的怎麼樣？
5. 目前只是試了android端，流暢度還是杠杠的。
6. 這貨和vue，riot有什麼區別？簡直一毛一樣。