Weex Cheat Sheet

Native Components

component	attribtues	styles	events	special parent	children
<div>	-	box model flexbox position background-color opacity	click appear disappear	-	(any)
<text>	value	box model flex position background-color opacity color font-size font-style font-weight text-decoration text-align text-overflow line-height	click appear disappear	-	text only
<image>	src	box model flexbox position background-color opacity resize	click appear disappear	-	(none)
<scroller>	show-scrollbar scroll-direction	box model flexbox position background-color opacity	click appear disappear	-	(any)
<list>	loadmoreoffset	box model flexbox position background-color opacity	click appear disappear loadmore refresh loading	-	<cell> <header> <refresh> <loading>
<cell>	-	box model flexbox position background-color opacity	click appear disappear	<list>	(any)
<slider>	auto-play	box model flexbox position background-color opacity	click appear disappear change	-	(any) <indicator>
<indicator>	-	box model flexbox position item-color item-selected-color item-size	click appear disappear	<slider>	(none)
<wxc-navpage>	height background-color title title-color left-item-title left-item-color right-item-title right-item-color left-item-src right-item-src	box model flexbox position background-color opacity	click appear disappear naviBar.leftItem.click naviBar.rightItem.click	-	(any)
<wxc-tabbar>	tab-items	box model flexbox position background-color opacity	tabBar.onClick	-	(none)
<embed>	src	box model flexbox position background-color opacity	click appear disappear	-	(none)
<web>	src	box model flexbox position background-color opacity	click appear disappear pagestart pagefinish error	-	(none)
<video>	src play-status auto-play	box model flexbox position background-color opacity	click appear disappear start pause finish fail	-	(none)
<a>	href	box model flexbox position background-color opacity	click appear disappear	-	(any)
<input>	type value placeholder disabled autofocus	box model flexbox position background-color opacity placeholder-color color font-size font-style font-weight text-align	click appear disappear	-	(none)
<switch>	checked disabled	box model flexbox position background-color opacity	appear disappear input change focus blur	-	(none)

Native Modules

module	apis
@weex-module/dom	scrollToElement(node, { offset })
@weex-module/modal	toast({ message, duration }) alert({ message, okTitle }, callback) confirm({ message, okTitle, cancelTitle }, callback(result)) prompt({ message, okTitle, cancelTitle }, callback(result, data))
@weex-module/stream	fetch({ method, url, headers, type, body }, callback({ status, ok, statusText, data, headers }), progressCallback({ readyState, status, length, statusText, headers}))
@weex-module/webview	goBack(ref) goForward(ref) reload(ref)
@weex-module/navigator	push({ url, animated }, callback) pop({ animated }, callback)
@weex-module/animation	transition(node, { styles, duration, timingFunction, delay, transform-origin }, callback)

Special Template Syntax

• <foo x="abc">
• {% raw %}<foo x="{{expr}}">{% endraw %}
• <foo style="name1: value1; name2: value2">
• {% raw %}<foo style="name1: value1; name2: {{expr}}; name3: ...">{% endraw %}
• <foo class="a b c">
• {% raw %}<foo class="a {{expr}} c">{% endraw %}
• <foo onclick="methodName">
• <foo id="abc">
• <foo if="expr">
• <foo repeat="item in list">
• <foo repeat="(key,item) in list">
• <component type="foo">
• {% raw %}<component type="{{expr}}">{% endraw %}

ViewModel APIs

• this.$vm(el)
• this.$el(el)
• this.$getConfig()
• this.$emit(type, data)
• this.$dispatch(type, data)
• this.$broadcast(type, data)

ViewModel Options

• data
• methods
• computed
• init, created, ready
• events

example:

module.exports = {

  data: function () {
    return {
      x: 1,
      y: 2
    }
  }

  methods: {
    foo: function () {
      console.log('foo')
    }
  },

  computed: {
    z: function () {
      return this.x + this.y
    }
  },

  events: {
    custom: function (e) {
      console.log(e)
    }
  },

  init: function () {},
  created: function () {},
  ready: function () {}
}