Weex 快速上手教程

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

开始

我们先编写一个列表项。

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

因为Weex工具链使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js(https://nodejs.org/en/download/stable/ ), 在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序  Weex Toolkit(https://www.npmjs.com/package/weex-toolkit )。

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

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

你系统默认浏览器的窗口将自动打开以显示如下内容:

语法概念

现在我们来了解下一些简单的语法概念。 如 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(http://alibaba.github.io/weex/doc/syntax/main.html )查看。

添加更多的列表项

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

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

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

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

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

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

添加内置组件

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

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

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

更多有关滑动器组件的信息请在 这里(http://alibaba.github.io/weex/doc/components/slider.html )查看。

就像我们之前演示过的,这个界面也能用"Native View"的方式在 Weex Playground App中被渲染。如果你想让你自己的App也获得这样的能力,请访问 这份文档(http://alibaba.github.io/weex/doc/advanced/integrate-to-android.html )学习如何把Weex集成进入你自己的App中。

阿里百川(baichuan.taobao.com) 是阿里巴巴集团的无线开放平台,通过“技术、商业及大数据”的开放,提供移动场景下的高内聚、开放式、行业领先的技术产品矩阵、成熟的商业组件和完善的服务体系,帮助移动开发者快速搭建APP、加速APP商业化进程,全方位赋能移动开发者及移动创业者。

时间: 2024-10-29 10:46:10

Weex 快速上手教程的相关文章

新浪SAE快速上手教程

 新浪SAE快速上手教程[1]如何免费开通新浪云 2014-07-18 > 新浪SAE快速上手教程[2]如何创建.删除应用 2014-07-24 > 新浪SAE快速上手教程[3]如何上传应用代码包 2014-07-24 > 新浪SAE快速上手教程[4]如何在线编辑代码? 2014-07-28 > 新浪SAE快速上手教程[5]如何用svn部署代码 2014-07-28 http://jingyan.baidu.com/season/43090

《微信公众平台快速上手教程》目录导航,刘子骏de新媒体,图解版本

10年互联网从业者,草根创业者,新媒体营销研究者.作者博客:www.liuzijun.com 有些公众平台的基本用法可以参照上面的教程. 微信公众平台快速上手教程Part1 注册账户与认证 微信公众平台快速上手教程Part2 消息管理与群发 微信公众平台快速上手教程Part3 素材编辑 微信公众平台快速上手教程Part4 关键词自动回复 微信公众平台快速上手教程Part5 开发模式讲解 微信公众平台快速上手教程Part6 公众会议帐号 微信公众平台快速上手教程Part7 微信运营十大要决 微信公

Airtest 快速上手教程

一.Airtest 简介: AirtestIDE 是一个跨平台的UI自动化测试编辑器,适用于游戏和App. 自动化脚本录制.一键回放.报告查看,轻而易举实现自动化测试流程 支持基于图像识别的 Airtest 框架,适用于所有Android和Windows游戏 支持基于UI控件搜索的 Poco 框架,适用于Unity3d,Cocos2d与Android App 能够运行在Windows和MacOS上 网易内部已成功应用在数十个项目上,利用 手机集群 进行大规模自动化测试 二.Airtest 知识链

weex快速上手

Vue.js 是 Evan You 开发的渐进式 JavaScript 框架,在易用性.灵活性和性能等方面都非常优秀.开发者能够通过撰写 *.vue 文件,基于<template>, <style>, <script> 快速构建组件化的 web 应用.本章会教你如何搭建本地开发环境进行 Weex 开发. 开始之前,希望你能对 Weex 和 Vue 有基本的了解,推荐阅读 Weex Tutorial 和 Vue Introduction 了解更多信息. 第一步:安装依赖

(转)Jmock快速上手教程

原文:http://blog.sina.com.cn/s/blog_6b30a46b01013lgf.html 总评 Mock 测试是一种常见的测试方法.通常在执行测试的时候,测试代码往往需要与一些真实对象进行交互,又或者被测代码的执行需要依赖真实对象的功能.此时,我们可以使用一个轻量级的.可控制的Mock 对象来取代真实对象,模拟真实对象的行为和功能,从而方便我们测试.jMock 便是这种方法的一种实现. jMock 是一个利用Mock 对象来测试Java 代码的轻量级测试工具.毫不例外,它也

分布式块设备DRBD9基础用法(快速上手教程)

1. 概述 1.1 介绍 DRBD?(Distributed?Replicated?Block?Device)?是?Linux?平台上的分散式储存系统.其中包含了核心模组,数个使用者空间管理程式及?shell?scripts,通常用于高可用性(high?availability,?HA)丛集.DRBD?类似磁盘阵列的RAID?1(镜像),只不过?RAID是在同一台电脑内,而DRBD是透过网络. 1.2 基本原理 DRBD是linux的内核的存储层中的一个分布式存储系统,架构分为两个部分:一个是内

smarty半小时快速上手教程(转)

来源于:http://www.chinaz.com/program/2010/0224/107006.shtml 一:smarty的程序设计部分: 在smarty的模板设计部分我简单的把smarty在模板中的一些常用设置做了简单的介绍,这一节主要来介绍一下如何在smarty中开始我们程序设计.下载Smarty文件放到你们站点中.index.php PHP代码: <?php /** * * @version $Id: index.php * @package * @author www.php10

云数据库MySQL版快速上手教程

课程介绍 MySQL 是全球最受欢迎的开源数据库,作为开源软件组合 LAMP(Linux + Apache + MySQL + Perl/PHP/Python)中的重要一环,广泛应用于各类应用场景. 本课程主要介绍云数据库 MySQL 版的使用.数据迁移.备份恢复.性能优化等方法. 云数据库 MySQL 版详情:https://www.aliyun.com/product/rds/mysql 课程目标 掌握云数据库MySQL版的基本使用方法 适合人群 DBA 运维 课程列表 课时1:云数据库 M

vultr 购买 vps 快速上手教程

注册登录 vultr官网地址进入vultr官网,右上角有登录和注册,点击注册直接输入想要注册的账号密码就可以 购买 因为是要先支付,进去后就是支付页面,支持支付宝支付 Alipay 阿里支付,也就是支付宝. 支付成功后就可以买vps了,看下左侧的目录 选择servers里边有添加服务器 这里写图片描述 洛杉矶和日本的线路是最快的,但是2.5美元每月的被卖完了,根据自己的需求来买吧.1.选择服务器所在地2.选择服务器系统3.选择服务器不同配置的不同价格剩下的默认就可以最后点Deploy Now去支