Skip to content
This repository was archived by the owner on Jun 6, 2019. It is now read-only.
This repository was archived by the owner on Jun 6, 2019. It is now read-only.

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

@lvscar

Description

@lvscar

本文档已迁移至 https://weex-project.io/cn/guide/ , 此处不再维护,谢谢。

我们将使用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中。

Activity

changed the title [-]Weex快速上手指南[/-] [+]Weex快速上手教程(Weex Tutorial)[/+] on Jun 12, 2016
lijialiang

lijialiang commented on Jun 14, 2016

@lijialiang

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

Jinjiang

Jinjiang commented on Jun 15, 2016

@Jinjiang
Contributor

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

trainges

trainges commented on Jun 17, 2016

@trainges

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

xiaobeibeinihao

xiaobeibeinihao commented on Jun 24, 2016

@xiaobeibeinihao

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

duyuan199010

duyuan199010 commented on Jun 30, 2016

@duyuan199010

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

daochouwangu

daochouwangu commented on Jul 1, 2016

@daochouwangu

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

duyuan199010

duyuan199010 commented on Jul 2, 2016

@duyuan199010

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

lingyunzhu

lingyunzhu commented on Jul 5, 2016

@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:1234: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 on Jul 5, 2016

@acton393

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

siqin

siqin commented on Jul 5, 2016

@siqin

我是从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

BruceVan1987 commented on Jul 5, 2016

@BruceVan1987

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

lvscar

lvscar commented on Jul 6, 2016

@lvscar
Author

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

hugojing

hugojing commented on Jul 7, 2016

@hugojing

添加内置组件 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>
给加上闭合标签后,运行是一片空白;不加才可以成功运行。
这是为什么?

78 remaining items

kind-hearted

kind-hearted commented on Dec 27, 2016

@kind-hearted

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

charmingzuo

charmingzuo commented on Jan 2, 2017

@charmingzuo

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

lingyijun

lingyijun commented on Jan 3, 2017

@lingyijun

按照本文的指引,安装 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)

snoozybot

snoozybot commented on Jan 3, 2017

@snoozybot

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

molly-shan

molly-shan commented on Jan 16, 2017

@molly-shan

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

snoozybot

snoozybot commented on Jan 16, 2017

@snoozybot

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

molly-shan

molly-shan commented on Jan 16, 2017

@molly-shan

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

snoozybot

snoozybot commented on Jan 16, 2017

@snoozybot

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

MechaGirls

MechaGirls commented on Jan 19, 2017

@MechaGirls

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

vczero

vczero commented on Jan 19, 2017

@vczero
Member
snoozybot

snoozybot commented on Jan 20, 2017

@snoozybot

本文档已迁移至 https://weex-project.io/cn/guide/ , 此处不再维护,谢谢。

liCat

liCat commented on Mar 23, 2017

@liCat
cqs223

cqs223 commented on Apr 10, 2017

@cqs223

weex-toolkit安装后,执行weex -v命令可查看weex的版本号.但是执行weex的时候报错,错误如下:
chenqsdeMacBook-Pro:~ chenqs$ weex
/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/package/NpmPackage.js:50
throw new Error('resolve path error:'+this.path)
^

Error: resolve path error:/usr/local/lib/node_modules/weex-toolkit/node_modules/._weex-previewer
at NpmPackage.resolve (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/package/NpmPackage.js:50:23)
at Command.run (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/Command.js:43:13)
at XToolkit._done (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/xtoolkit.js:149:36)
at process.nextTick (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/xtoolkit.js:90:22)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:423:7)
at startup (bootstrap_node.js:147:9)
at bootstrap_node.js:538:3
请问该怎么解决?

chenxiaozhen0104

chenxiaozhen0104 commented on Jul 6, 2018

@chenxiaozhen0104

请问 拨打电话 功能模块有吗

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @transtone@Jinjiang@clfa@siqin@lvscar

        Issue actions

          Weex快速上手教程(Weex Tutorial) · Issue #4 · weexteam/article