tree: f77302ebf92cc56f10473018fbf6cde427978dc9 [path history] [tgz]
  1. website/
  2. cases.js
  3. components.js
  4. draft.js
  5. events.js
  6. index.js
  7. modules.js
  8. others.js
  10. styles.js
  11. syntax.js

Weex Vue Examples

Simple examples of using Weex and Vue.js.

How to Add Examples

  1. Write an example on the online playground.
  2. Clone this project and add the example description to the corresponding file within this folder.
  3. Send a pull request to apache/incubator-weex-site.

Examples Category

  • components.js: Built-in components of Weex.
  • modules.js: Built-in modules of Weex.
  • syntax.js: The syntax of Weex DSL framework (Vue.js).
  • styles.js: Supported CSS styles of Weex.
  • cases.js: Common usage cases of Weex.
  • others.js: Misc examples, those who don't know where to put it.

Examples Description

  • hash: [Required] The md5 hash in the online playground example's link address.
  • title: [Required] A brief title of the example. It's better to have both Chinese and English titles.
  • screenshot: [Optional] The screen shot of the example. In order to be consistent, the image size should be 540x844 or larger. It's better to upload the image to a CDN and just offer an address.

For the screen shot of examples, if you find it hard to satisfy the requirement, you can use this placeholder image instead:

examples: [{
  hash: '44e635d920aaac5e3bbcbe293b6f0b81',
  // title: 'Need Screenshot', // use the same title for all languages
  title: { zh: '缺截图', en: 'Need Screenshot' }, // set titles for different languages
  screenshot: ''


  1. online playground 写例子。
  2. 克隆当前项目,把例子的描述添加到当前目录里相应的文件中。
  3. apache/incubator-weex-site 提 PR。


  • components.js: Weex 的内置组件.
  • modules.js: Weex 的内置模块.
  • syntax.js: 使用了 Vue.js 语法的例子。
  • styles.js: 样式相关的例子。
  • cases.js: 常见的实际用例。
  • others.js: 其他不知道怎么分类例子。


  • hash: [必填] online playground 例子 URL 里的 md5 hash 字符串。
  • title: [必填] 例子的标题,要简短,最好是中英文都有。
  • screenshot: [选填] 例子的截图,不应该包含导航栏和状态栏。为了保持一致,图片大小要求是 540x844 或者更高。最好能把图片传到 CDN 上然后提供图片地址。


examples: [{
  hash: '44e635d920aaac5e3bbcbe293b6f0b81',
  // title: 'Need Screenshot', // 所有语言都用这个标题
  title: { zh: '缺截图', en: 'Need Screenshot' }, // 针对不同语言设置标题
  screenshot: ''