weex入门基础

环境安装

  1. 安装Homebrew
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  2. 安装Node.js
    brew install node
  3. 安装weex-toolkit,使用淘宝的 npm 镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install -g weex-toolkit
    快速上手

基本知识

  • 用了vuejs框架
  • <template>、<style>、<script>分别对应于 Web 中的 HTML,CSS(<style>标签),JavaScript(<script>标签)
  • Weex 支持通过style标签来设定样式,也支持内联样式风格。 对于数值,无需添加任何单位(包括px、em、rem等),这是建议的写法。
  • <template>只支持一个根节点,多个根节点将无法被 Weex 正常的识别和处理。根节点有<div>、<scroller>、<list>三种。
  • Weex使用mustache的语法({{...}})来对<template>中的模板和<script>`里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。
  • on...开头的就是用于绑定事件的特性,特性名中 on之后的部分就是事件的类型,特性的值就是处理该事件的函数名。函数名外不需要添加 mustache 语法中的大括号。
  • if特性能够通过特性值的真假来控制组建是否显示,且 mustache 大括号可以省略。repeat特性可以根据一组数组数据重复生成相同或相似的顺序排列的界面。if不能用在 <template>的根组件上,否则将无法被 Weex正常的识别和处理。在 repeat特性值中,如果没有指定索引值的形参,则可以通过绑定形参 $index来展示数组项目的索引值。
  • static特性可以一次性把数据设置到模板相应的位置上,但是今后不会随着数据的变化而更新。
  • CSS 样式可以理解为一系列的键值对,其中的每一对描述了一个特定的样式。键和值之间由冒号:进行分隔,每对键值之间由分号 ;进行分隔。<template>标签中的 class特性值用来匹配<style>样式表中的一个或多个 class 名,多个class name 之间由空格分隔。weex只是CSS其中一个子集。
  • 为了简化页面设计和实现,屏幕的宽度统一为 750 像素,不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。750代表全屏宽度,大于750的数值也是全屏。
  • 当一次事件被触发的时候,都会产生一个事件描述对象,该对象会默认作为第一个参数传递给事件处理函数,或以$event形参的方式出现在内联事件处理函数中。对象至少包含type、target、timestamp这几个字段
  • 默认情况下,除了 <cell>组件的默认渲染过程是 tree模式,其它组件都默认按照 node模式进行渲染
  • 组件和使用者必须在同目录下才能自动建立依赖关系。this有各自独立的上下文,不会混淆。组件以标签的方式存在,可以嵌套。不同目录的组件,在<script>标签中通过require导入。<element>可以在文件内部定义子组件。
  • id标识组件。this.$el(id)获取组件(被设置的对象)。this.$vm(id)获取组件上下文(访问组件方法)。this.$parent获取父级上下文。
  • this.$on(type, handler)监听事件。this.$off(type)取消监听。type是监听的自定义事件类型,handler是事件处理函数。this.$emit(type, detail)产生事件。detail则是一个对该事件细节补充描述的 JSON对象,会以 event.detail的形式出现在处理此事件的函数中。
  • 页面配置<script type="config">,目前支持downgrade。数据<script type="data">

参考文章

中文官网

gitHub-weex

起步教程

Playground

vuejs官网

Homebrew官网

nodejs官网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,400评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,161评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,341评论 0 6
  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,835评论 1 3
  • 从图书馆偶然遇到一本很破的书,且年代久远,但是文字清晰,于是携回品读。 素知古人,一字不虚,做人做事都极专注,...
    水南多阅读 1,267评论 0 2

友情链接更多精彩内容