Weex快速上手教程(Weex Tutorial)
我们将使用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中。
Weex快速上手教程(Weex Tutorial)相关推荐
- 申请 Let's Encrypt 数字证书,并安装cerbot快速上手教程~~
申请 Let's Encrypt 数字证书,并安装cerbot快速上手教程~~ Let's Encrypt SSL证书介绍 如今,越来越多的网站已经由HTTP迁移到HTTPS安全协议了.HTTPS不但 ...
- 【Endnote】EndnoteX9快速上手教程
想得美,自己慢慢摸索才是硬道理,哪有什么快速上手教程,链接在下面 链接:https://pan.baidu.com/s/1Vtnaz90Iwp3I17M8ijxMWg 密码:ems7
- Debussy 快速上手教程
本文为转载,刚瞄了一眼,应该是在LINUX下的应用快速上手教程.Debussy是个很强大的看V代码及Debug V代码工具.你能方便地看到信号从哪里来到哪里去,比较强大.简单地用,用起来也比较简单.在 ...
- 嵌入式SQL编程快速上手教程
嵌入式SQL编程快速上手教程 声明:我这里标题虽是<嵌入式SQL编程快速上手教程>,但只是嵌入式SQL编程的冰山一角罢了,我会通过举一道简单例题来教小白快速上手嵌入式SQL编程 第一:题目 ...
- Angular 初学者快速上手教程
课程介绍 本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 的 3 个核心概念作为主线:组件.路由.模块,加上业务开发过程中必须用到的特性:工具.指令.表单.RxJS.i ...
- TensorFlow 2.0 快速上手教程与手写数字识别例子讲解
文章目录 TensorFlow 基础 自动求导机制 参数优化 TensorFlow 模型建立.训练与评估 通用模型的类结构 多层感知机手写数字识别 Keras Pipeline * TensorFlo ...
- Premiere 零基础快速上手教程
关注并星标"高级农民工" 回复"视频"可获取视频剪辑软件和教程 在前几天的文章中,我分享了几款主流视频剪辑软件: 最主流的视频剪辑软件 简单来说就是,手机端用「 ...
- react 引入html文件_React最快速上手教程
不使用webpack或其他任何编译打包工具,但使用React的JSX混合语法,直接在浏览器中运行React的元件component,十分钟最快速上手. image 为什么用React? 数据绑定假定我 ...
- layui快速上手教程
layui 获得 layui 1. 官网首页下载 你可以在我们的 官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境.目录结构如下: codelayui.code ├─cs ...
最新文章
- Angular 4+ HttpClient
- Python 数据类型:列表
- linux firefox 29 flash player install
- 官方文档,才是正途-docker-compose
- TabBarItem图片不显示的原因
- 数据结构C语言版之查找(折半选择快速等)
- 2009年3月全国计算机等级考试二级vfp笔试,2009年3月全国计算机等级考试二级VFP笔试试题及答案.doc...
- oracle数据库延迟执行,如何诊断oracle数据库运行缓慢或hang住的问题
- C++笔记-ClassA a和ClassA a()的区别与联系
- 排序算法对比、总结(Python代码)
- idea jar放进本地仓库 为何依赖不了_推荐 33 个 IDEA 最牛配置,写代码太爽了
- wordpress表单数据验证_实战:Drupal迁移到WordPress
- 计算两个正整数的最大公约数
- java单例设计模式双重_Java 设计模式 ——单例模式(饿汉,懒汉,双重锁,静态内部类)...
- 如何同步修改git项目名称和本地项目名称
- Android开发笔记之SeekBar 时间的显示 快进快退 Mediaplayer
- 橘子学ES11之URI搜索方式
- Android 8.0版本更新下载
- 联想开机启动项按哪个_联想启动u盘按什么键_联想笔记本按哪个键进入u盘启动-win7之家...
- jquery实现手风琴展开效果