Weex快速上手教程(Weex Tutorial) #4

Open
lvscar opened this Issue Jun 12, 2016 · 99 comments

Projects

None yet
@lvscar
lvscar commented Jun 12, 2016 edited

我们将使用Weex编写一个简单的列表,类似的列表经常能在电商类移动应用中见到。

开始

我们先编写一个列表项。

<template>
  <div class="container" >
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
       <text class="title">JavaScript</text>
    </div>
  </div>
</template>

<style>
  .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb {width: 200; height: 200; }
  .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
</style>

请创建一个名为 tech_list.we 的文件( .we 是Weex推荐的后缀名 ) ,请复制粘贴以上代码于其中。

因为Weex工具链使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js, 在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序 Weex Toolkit

npm install -g weex-toolkit

在安装结束后,你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确。仅仅输入weex并敲击回车后,你应该看到如下内容显示:

Usage: weex foo/bar/your_next_best_weex_script_file.we  [options]

Options:
  --qr     display QR code for native runtime, 
  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
  -s,--server  start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option  
  ......
  --help  Show help                    

如果一切正常, 请在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

weex tech_list.we

你系统默认浏览器的窗口将自动打开以显示如下内容。
(请使用 weex --version 命令检查你的weex-toolkit版本是否大于 0.1.0)

weex html5 render

语法概念

现在我们来了解下一些简单的语法概念。如 tech_list.we所示,Weex代码由三部分构成: template (模板), style (样式)  和 script (脚本) 。这三个概念之于Weex就如 html,css,javascript 之于Web。

模板部分赋予Weex以骨架,由标签以及标签包围的内容构成。Weex中的标签分为开放标签(eg: )和闭合标签(eg: )两种,我们把每一对开放&闭合标签称为一组Weex标签。标签中能添加 属性 ,不同的 属性 有不同的含义,例如 class属性让同样的样式可以作用于多组Weex标签, onclick 属性让标签能对用户点击事件作出回应。

样式部分描述Weex标签如何显示。和你一样,我们喜欢CSS,所以Weex中的样式尽量和CSS标准一致。Weex支持很多CSS中的特性: margin, padding, fixed...... 更好的是, flexbox布局模型在Weex中有着很好的支持。

脚本部分为Weex标签添加数据与逻辑,在这里你能方便的访问本地和远程的数据并更新标签。你还能定义方法并让这些方法响应不同的事件。Weex脚本的组织方式基本遵循于CommonJS module规范。

关于Weex语法的更多信息,你能在 Syntax chapter 查看。

添加更多的列表项

单独一个列表项称不上”列表” , 所以让我们来添加更多的列表项。打开刚才的tech_list.we文件,更新其中的内容如下:

<template>
  <div class="container">
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3uo9"></image>
        <text class="title">Java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
</style>

现在,让我们来尝试使用Weex Native渲染器来渲染这个文件。打开终端,切换到保存该文件的目录,执行:

weex tech_list.we --qr

终端中将会出现一个二维码,类似如下这样:

Weex CLI

这个二维码需要配合 Weex Playground App工作。下载安装后点击App中的扫码图标,然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。

Second Example

这里我需要强调,这个列表是完全由native view(不是Webkit)来进行渲染的,相比Webkit渲染的界面,你的App能获得更快的页面加载速度和更少的内存开销。

现在你能尝试变更一些 tech_list.we中的内容,在保存变更内容之后, Weex Playground 将会立即在界面上反映出这些变化,这个特性常被称为 Hot-Reload ,希望能帮助你更方便的进行Weex开发。

添加内置组件

除了自己动手从最基础的标签开始编写,Weex还提供很多内置组件。Slider(滑动器)在移动App和页面中很常见,所以我们提供了一个内置的Slider组件让你能在自己的界面里轻松的添加一个滑动器。打开 tech_list.we,把里面的内容变更如下:

<template>
  <div style="flex-direction: column;">
    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
        <image class="thumb" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>
    </slider>

  <div class="container" onclick="goWeexSite" >
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3uo9"></image>
        <text class="title">Java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell { margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
  .slider {
    margin: 18;
    width: 714;
    height: 230;
  }
  .slider-pages {
    flex-direction: row;
    width: 714;
    height: 200;
  }
</style>

<script>
module.exports = {
    data: {
      intervalValue:"1000",
      isShowIndicators:"true",
      isAutoPlay:"true",
      itemList: [
        {title: 'Java', pictureUrl: 'http://t.cn/RGE3uo9'},
        {title: 'Objective C', pictureUrl: 'http://t.cn/RGE31hq'},
        {title: 'JavaScript', pictureUrl: 'http://t.cn/RGE3AJt'}
      ]
    },
    methods: {
      goWeexSite: function () {
        this.$openURL('http://alibaba.github.io/weex/')
      }
    }
}
</script>

在终端中同一目录再次运行这个命令:

weex tech_list.we

一个漂亮的滑动器将会添加到我们之前编写列表的顶部。

Third Example

更多有关滑动器组件的信息请在 这里 查看。

就像我们之前演示过的,这个界面也能用"Native View"的方式在 Weex Playground App中被渲染。如果你想让你自己的App也获得这样的能力,请访问这份文档学习如何把Weex集成进入你自己的App中。

@lvscar lvscar changed the title from Weex快速上手指南 to Weex快速上手教程(Weex Tutorial) Jun 12, 2016
@lilijialiang

安卓上编译出来的 list cell 是否通过复用(类似 iOS list cell)提高性能?

@Jinjiang
Contributor
Jinjiang commented Jun 15, 2016 edited

@lilijialiang 是的,直接用 <list><cell> 就可以了 http://alibaba.github.io/weex/doc/components/list.html

@trainges

你好!wxc-tabbar跟wxc-navpage两个标签一直显示不了,是怎么回事?用的是 Example的代码

@xiaobeibeinihao

@trainges 你现在跑起代码了吗?

@duyuan199010

用Weex Playground App 扫描生成的二维码,为什么一直在loading ?

@daochouwangu

@duyuan199010 你看一下是不是weex的host是local,而你的手机和电脑不在同一个网络

@duyuan199010

@daochouwangu 是我公司网络的问题,我在家里的网络环境没有这个问题,谢谢!

@lingyunzhu

我遇到如下错误,是因为端口问题?有大神知道我怎么改么?
info Tue Jul 05 2016 14:32:16 GMT+0800 (中国标准时间)WebSocket is listening on port 8082
info Tue Jul 05 2016 14:32:16 GMT+0800 (中国标准时间)http is listening on port 8081
events.js:141
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 0.0.0.0:8082
at Object.exports._errnoException (util.js:874:11)
at exports._exceptionWithHostPort (util.js:897:20)
at Server._listen2 (net.js🔢14)
at listen (net.js:1270:10)
at net.js:1379:9
at doNTCallback3 (node.js:452:9)
at process._tickCallback (node.js:358:17)

@acton393
acton393 commented Jul 5, 2016

hi @lingyunzhu 可以看下这个issue #21

@siqin
siqin commented Jul 5, 2016

我是从Weex Tutorial的中文版icon提示跳转过来的,那边是英文版本,我觉得开头的语法细节貌似有点问题:

Tutorial

We will make a simple but realistic list of tech that weex used, this form of list also work for a lot of e-commerce app/mobile site.

Getting Started

Let's start easy though, making a item of list.

所以过来看中文版的,不过也发现了一些细节问题,比如开头的中英文标点符号混用:

我们将使用Weex编写一个简单的列表 , 类似的列表经常能在电商类移动应用中见到.

开始

我们先编写一个列表项.

这里是句号,后面还有逗号和冒号:

使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js, 在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序 Weex Toolkit 。

在安装结束后,你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确. 仅仅输入weex并敲击回车后,你应该看到如下内容显示:

以上这些应该不算吹毛求疵,而是优质文档应该具备的,尤其是有感于最近某度UX总监PPT上标点符号都用不太对。

从另一个方面来讲,优质的项目文档,也是在展示一部分项目质量,同时也给予开发者更多的信心。
Thanks.

@BruceVan1987

不知是否有为AndroidStudio或者SublimeText开发we文件编辑器插件的计划?

@lvscar
lvscar commented Jul 6, 2016

谢谢 @siqin 的指正,已经重新编辑替换本文中的英文标点。 如对代码有兴趣 ,也请 @siqin review下我们的代码,希望早日看到你的PR ;-)

@hugojing
hugojing commented Jul 7, 2016

添加内置组件 slider 的代码:

<template>
  <div style="flex-direction: column;">
    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
        <image class="thumb" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>
    </slider>

  <div class="container" onclick="goWeexSite" >
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3uo9"></image>
        <text class="title">Java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

为什么 <div style="flex-direction: column;"> 没有闭合标签 </div>
给加上闭合标签后,运行是一片空白;不加才可以成功运行。
这是为什么?

@JakeWoki
JakeWoki commented Jul 8, 2016

用什么开发软件开发比较好?完全新手

@kenberkeley

Sublime暂时只能用Vue Syntax Highlight这个package语法高亮。。。

@wangGuangXu

现在,让我们来尝试使用Weex Native渲染器来渲染这个文件。打开 终端,切换到保存该文件的目录,执行:

请教一下这块这个终端指的是什么?

@wangGuangXu

我什么我的苹果手机装的那个iosAPP的扫码功能识别不了我电脑生成的二维码这是怎么回事?

@hugojing

@wangGuangXu 终端就是 terminal ,命令行输入界面。

@archLeozyf

@hugojing 这个打开终端意思什么呢?我的操作是 第一次: 在cmd命令 中执行过 weex *.we后(未关闭this cmd),再重新打开cmd命令 执行weex *.we --qr, 结果,报错,不能生成二维码; 第二次: 在cmd命令 中执行过 weex *.we后(关闭this cmd),再重新打开cmd命令 执行weex *.we --qr, 结果,能生成二维码,但是weex olayground app扫描后,出现NetworkError,并且不能出现页面。。。。这是怎么回事 ?求解

@robbieliu2003

我的mac 8081端口被占用,根据issue #21杀不掉占用的进程,是否有办法配置成其他的端口号?

PORT STATE SERVICE
8081/tcp open blackice-icecap

@dingyiming

总觉着这个快速上手一点也不快,反而凌乱,无从下手有点,想说很多,却都没说完整啥,好像欠缺一定的做个入门示例的思路,抱歉。。。

@hugojing

@archLeozyf 你下个 git bash 吧

@lawliet09

npm install -g weex-toolkit安装的时候命令行一直在loading状态,也不显示任何任何信息,有大神知道怎么回事吗

@hugojing

@lawliet09 网络不好。

@yxlwfds
yxlwfds commented Jul 28, 2016

国内写的文档居然用英文 我也是醉了

@transtone

这个不叫 weex 上手教程,这个叫 weex-toolkit 上手教程。

@winnerliu

@archLeozyf 遇到一样的问题 解决了木有

@wangzhen-cn
wangzhen-cn commented Jul 30, 2016 edited

1、自定义端口,指定IP
weex *.we --qr --port 9000 -h 192.168.1.100

2、下载Weex Playground
http://alibaba.github.io/weex/download.html

3、扫码没反应,请关闭电脑防火墙,保证手机和电脑在同一局域网下,关闭路由上的arp,ip欺诈等。

@quirkyshop

slider的教程,白屏并提示:

dep.js:48Uncaught RangeError: Maximum call stack size exceeded

英文和中文的文档都是这样。而且

确实没有闭合标签。

@DesignQu
DesignQu commented Aug 4, 2016

目前有we的编辑器吗?

@weishiji
weishiji commented Aug 4, 2016

我问一个狠LOW的问题,在.we文件里,从哪里写发送请求,获取数据,更新UI的代码呢?给一个DEMO

@hugojing
hugojing commented Aug 4, 2016

@weishiji 可以看我的 demo: https://github.com/hugojing/toolbox-weex ,其中 src/translate.we 里面有写网络请求-获取数据-放到界面上的代码。

@liangfengchen

app无法下载!

@lzxb
lzxb commented Aug 20, 2016

正在入坑

@liuguangli

就直接说 Android 开发环境怎么整合 Weex

@shbIOS
shbIOS commented Aug 25, 2016

入坑好辛苦,到处找文档,东一篇,西一篇,大伙有什么好用的开发工具么,有人用 Sublime ?

@DesignQu

文档零散,没有形成整体,对于入坑同学有很多阻碍,虽然有专门的聊天室,还不如把官方文档好好写写,参考参考类似百度的开发文档

@huaian
huaian commented Aug 27, 2016

在android playground里面打不开新网页:
this.$openURL 有问题

@WillSprint

保存变更之后,界面没有自动刷新,手动刷新之后页面才会变化,求指导

@yushilong

我只想说我看了半天还是不知道Android怎么用

@mjjde
mjjde commented Sep 9, 2016

运行引导界面的代码是报错 怎么解
ModuleBuildError: Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to undefined
ERR! ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to undefined

@zhouyuexie

@mjjde
你需要安装这些依赖:

"babel-core": "6.3.13",
"babel-eslint": "4.1.6",
"babel-plugin-transform-async-to-generator": "6.3.13",
"babel-plugin-transform-class-properties": "6.3.13",
"babel-plugin-transform-runtime": "6.3.13",
"babel-preset-es2015": "^6.14.0"

注意安装之前你要确定你当前目录有package.json文件.

@justnewbee

@hugojing 在末尾闭合 好像一个 template 下不能有超过一个节点
文档有两处需要改了:1. slider 代码闭合 2. slider 不能运行除非安装了 @zhouyuexie 说的依赖 文档中应该有说明

@animalWorld

@zhouyuexie
我安装了这些依赖还是不行
去npm 官网搜索transform-runtime 也搜索不到

@GuoxUnique

@mjjde 我也遇到了同样的问题,就是没有安装依赖。
不过我在安装依赖的时候提示no such file or directory, open '/Users/usr/package.json',这个应该如何解决呢

@mjjde
mjjde commented Sep 14, 2016

@GuoxUnique 我安装了babel-plugin-transform-runtime 就可以了
npm install babel-plugin-transform-runtime

@animalWorld
animalWorld commented Sep 14, 2016 edited

ModuleBuildError: Module build failed: ReferenceError: Unknown plugin "transform-runtime"
这个错误,不能 npm install -g babel-plugin-transform-runtime 这样安装

建议先weex init 或者weex create

然后npm install

然后在项目中测试toolkit的案例,
这样就没问题了

@GuoxUnique

@animalWorld 解决了,感谢

@xu17
xu17 commented Sep 18, 2016

为什么我安装了之后 按照例子运行 weex tech_list.we
打开的网页看到的并不是上图 而是之前写在文档上的代码???要哭了

@zhouyuexie

@huaian
你要确认script标签里的第一行是否有require('weex-components');

@guyikun
guyikun commented Sep 19, 2016

@animalWorld 为什么我这边还是不行?
ERR! ModuleBuildError: Module build failed: ReferenceError: Unknown plugin ...babel-plugin-transform-runtime" specified in "base" at 0
已经安装了上面依赖,同时weex init & npm install了

@wangGuangXu

谁知道扫描后什么都没有,是白也没是怎么回事?

@amyliu1062
amyliu1062 commented Sep 26, 2016 edited

安装weex的时候,提示connect ECONNREFUSED 106.187.101.167:25
没有开代理,重新安装node和npm也不行。

@coderyi
coderyi commented Sep 26, 2016

@shbIOS 我用sublime ,文档 ,文章都太少了

@JakeWoki JakeWoki referenced this issue in vczero/weex-yy Oct 9, 2016
Closed

只能放到examples目录编译运行吗? #5

@dayingwy
dayingwy commented Oct 17, 2016 edited

我的电脑连的是有线网,然后用电脑开的wifi,然后用手机(ios)连的该wifi,因此是在同一网段中,但是用手机扫了之后没有刷出来,只是白色的页面,谁知道这是什么问题嘛,谢谢

@wangGuangXu

你电脑和手机是一个网段吗?我有的时候也会出现扫出来是白色页面什么也没有的情况。

@liuchuhui

npm run dev

ERROR in Cannot find module 'babel-core'
@ ./src/main.we?entry=true 2:22-552

@coderyi
coderyi commented Oct 19, 2016

@liuchuhui

npm install babel-core
@BorisDuan

坑真大,看文档一天了还是没弄明白,weex是什么?怎么查看版本?怎么用?weex-toolkit干嘛用的?怎么用?代码怎么编写?文档呢?编辑器呢?乱七八糟的,东一榔头西一锄头的,能不能把文档整合的更好更明白一些?我想看专业的详细的明白的iOS集成文档和使用说明,不是要看代码,尽量不要老是回调好不好

@lanbosm
lanbosm commented Oct 28, 2016

感觉很好玩的样子 npm命令卡住的话 用cnpm 不过background 这个css样式都没 想吐槽下

@570562753

真的,入坑太难,而且写给开发者的,竟然没有个像样的文档,东一篇西一篇,很多方法也不清楚是什么意思

@lijunwyf21
加了关闭的div后,反而跑不起来了,感觉是一个大bug
@lijunwyf21

@Jinjiang

加了关闭的div后,反而跑不起来了,

@yingyangios

我用iOS端扫面二维码,weexapp这crash

@swituo
swituo commented Nov 11, 2016

@lijunwyf21

我觉得div的关闭在template的关闭上面...
我估计原意是slider和container竖的排列.
我不太懂flex-direction, 但好像flex-direction的子元素只有1的话, 就会有问题.

@ronniegong
ronniegong commented Nov 16, 2016 edited

安卓端安装playground后
扫描weex 命令生成的二维码
完全没反应(确定手机和电脑在同一网络环境下)

另外,wifi环境下,打开playground后,一直提示去升级
下载最新app后还是提示升级

怎么解决?

@zd9027
zd9027 commented Nov 21, 2016 edited

根节点: 每个 template 标签中的最顶层标签,我们称为根节点。下面是目前我们支持的三种不同的根节点:
< container >: 普通根节点
< scroller >: 滚动器根节点,适用于需要全页滚动的场景
< list >: 列表根节点,适用于其中包含重复的子元素的列表场景

为什么 示例代码没有用 < container >也可以呢??和< div style="flex-direction: column;" >这个标签没有闭合 有关系吗???

@SuperHaiFeng
SuperHaiFeng commented Nov 22, 2016 edited

已经集成SDK,但是有的时候能够渲染上,有的时候渲染不上,我使用的本地的js文件,渲染不上的时候出现以下错误信息:[fg255,0,0; [error]WXMonitor.m:190, [main.js:47:18] ReferenceError: Can't find variable: weex_define
main.js:47:18
webpack_require@main.js:20:34
main.js:40:37
global code@main.js:41:12 �[;
说明:是iOS端集成

@JiongXing

请问Weex如何进行热更新呢?

@taohaha
taohaha commented Nov 28, 2016

为什么把闭合之后网页是空的了呢?

@DoranYun

@F-12
weex 目前不支持 v-bind 的方式,仅支持 {{}}

@DoranYun
DoranYun commented Dec 9, 2016

@lilijialiang
list 在 weex 中做了非常多的优化,可参考新文档 http://alibaba.github.io/weex/cn/doc/components/list.html

@DoranYun
DoranYun commented Dec 9, 2016

@trainges
wxc-tabbar 和 wxc-navpage 需要引入 weex-components 依赖。请参考新文档 http://alibaba.github.io/weex/cn/doc/components/wxc/wxc-tabbar.html

@DoranYun
DoranYun commented Dec 9, 2016

@duyuan199010 看下是否在同一局域网

@DoranYun
DoranYun commented Dec 9, 2016

@JakeWoki 都行。个人推荐 VSCode

@DoranYun
DoranYun commented Dec 9, 2016

@wangGuangXu 装一下最新版的 Playground 试试。http://alibaba.github.io/weex/download.html

@DoranYun
DoranYun commented Dec 9, 2016

@lawliet09 npm 在国内访问不稳定,可以使用 cnpm ,参考最新文档 https://alibaba.github.io/weex/cn/doc/develop-on-your-local-machine.html

@DoranYun
DoranYun commented Dec 9, 2016

@transtone 这都被你发现了,那你看看这篇评测一下 https://alibaba.github.io/weex/cn/doc/get-started.html

@DoranYun
DoranYun commented Dec 9, 2016

@weishiji 发送请求请使用 stream 模块,这是文档地址 https://alibaba.github.io/weex/cn/doc/modules/stream.html

@cuanhanshansi

@archLeozyf 你说的生成二维码和不生成(即自动打开浏览器)的两个命令行是不能同时运行的,它指向的是同一个localhost,然后至于你用手机扫后报networkError有两种情况:1,手机,电脑处于同一网络下;2,网速有问题。估计第二种情况的可能比较大吧。希望参考。

@zhuruyi2013
zhuruyi2013 commented Dec 20, 2016 edited

mac上 npm install -g weex-toolkit 下载不下来

npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "weex-toolkit"
npm ERR! node v6.9.2
npm ERR! npm v3.10.9

npm ERR! shasum check failed for /tmp/npm-26796-7337915e/registry.npmjs.org/stream-http/-/stream-http-2.5.0.tgz
npm ERR! Expected: 585eee513217ed98fe199817e7313b6f772a6802
npm ERR! Actual: 1fff5fbc7f1a97413402b06010c73bd0af454d18
npm ERR! From: https://registry.npmjs.org/stream-http/-/stream-http-2.5.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/zhuruyi/learn/weex/firstDemo/npm-debug.log

@DoranYun

@zhuruyi2013 网络问题,换淘宝源或者使用 cnpm。

@runfengai

太给力了吧,说句实话,weex相对国内DCloud和APICloud,有很大的提升,因为是用的native view渲染,而不是系统的webkit内核,weex出来的初衷也是为了解决ReactNative使用过程中遇到的一些问题。weex是开源的,DCloud不开源让人很不爽,而且更新频率很慢。我想说,开源的框架才是最牛逼的。支持weex

@zhwei820

大部分人估计都跟我一样,一上来想看完整的打包过程,其实慢慢从语法开始也是比较好的。下面是打包工具,其实打完包之后还是得回来学语法

https://www.npmjs.com/package/weex-pack

weexpack 介绍
weexpack 是 weex 新一代的工程开发套件。它允许开发者通过简单的命令,创建 weex 工程项目,将项目运行在不同的开发平台上。

@chinafootballyu

我用的cnpm的镜像,npm install --save-dev weex-toolkit,有个模块安装不了,error 404 no such package available : @f/defaults,这个是你们的私有包吗?要怎么才能搞过来!

@DoranYun

@chinafootballyu 试试 npm install -g weex-toolkit

@chinafootballyu

@DoranYun 这个试过,也不行,应该是cnpm镜像上面没有这个包,我换回官方的地址可以了,谢谢了。

@charmingzuo

“添加内置组件” 那部分的 <div> 没有关闭

@SophiaDUPON
SophiaDUPON commented Jan 3, 2017 edited

按照本文的指引,安装 Weex Toolkit, 执行weex --version 失败,提示如下

module.js:471
throw err;
^

Error: Cannot find module 'koa-bodyparser'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/lib/DebugServer.js:9:18)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/index.js:14:19)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)

@DoranYun
DoranYun commented Jan 3, 2017

@SophiaDUPON 你好,遇到报错到主仓库提 issue

@cristaltina

@DoranYun 请问weex如何上传文件(如图片),类似
<input type="file"> 这样的功能?

@DoranYun

@cristaltina 目前暂不支持文件上传。

@cristaltina

@DoranYun 那那那短期内会增加这个功能嘛?想评估一下项目能不能用weex来做

@DoranYun

@cristaltina 你可以到主仓库开 issue 发起讨论。

@2015-lizaiyang

weex难道不是阿里开发的,为啥没有中文文档。还需要翻译。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment