mrraindrop / weex

A framework for building Mobile cross-platform UI

Weex

A framework for building Mobile cross-platform UI.

Android iOS HTML5

Support Android 4.1 (API 16) and iOS 7.0+.

For Windows

Please INSTALL Git for Windows and run all the following commands in git-bash.

Meet Weex

• Install Weex Playground App to see examples we already written.
• If you want to write a demo, install weex-toolkit in Node.js 4.0+ and
• Run weex init to generate & start a simple project in an empty folder.
• Follow the instructions in the project README.
• Enjoy it.

Use Weex

• Tutorial
• Documents

Android

0. Prerequisites 0. Install Node.js 4.0+ 0. Under project root 0. npm install, install project 0. ./start 0. Install Android Environment
1. Run playground, In Android Studio 0. Open android/playground 0. In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP 0. Click (Run button)
2. Add an example

Runtime

On Android Platform , Weex code is executed in weex_v8core which is based on Google V8 JavaScript engine.

iOS

0. Prerequisites
1. Install Node.js 4.0+ 0. Under project root 0. npm install, install project 0. ./start 0. Install iOS Environment 0. Install CocoaPods
2. Run playground 0. cd ios/playground 0. pod install 0. Open WeexDemo.xcworkspace in Xcode 0. Click (Run button) or use default shortcut cmd + r in Xcode 0. If you want to run the demo on your device. In DemoDefine.h(you can search this file by Xcode default shortcut cmd + shift + o), modify CURRENT_IP to your local IP
3. Add an example

Scripts

See SCRIPTS.md for more information.

IDE Plugin & Syntax Highlight & DevTool

Weex team have developed a DevTool to help you to improve we file debug efficiency.

See more stuff on this wiki page

Weex Community

• StackOverflow: Ask questions about Weex.
• SegmentFault (cn): 中文交流与讨论
• FAQ
• Articles (cn): Weex 相关文章集合

Contributing

See Weex Contributing Guide for more information.

weex's Issues

[html5] bug-report v0.11.0

1. slider组件初始载入有z-index:1，样式导致遮住了其他层。并且再次滑到第一个时会出现空白[v0.10.4]
2. .weex-root p{margin:0;padding:0;}样式优先级过高，导致给text设置margin或padding无效。[v0.10.3&0.10.4]
3. indicator组件一用就报错[v0.10.3&0.10.4]，详见#2932
4. lines:1不管用[v0.10.3&0.10.4]，<text lines="1">升级后也不管用了</text>[0.10.4]
5. weex-scroller-inner{min-height:100%}还是有必要的

建议写组件时就不用z-index了，不然开发者为了用这个组件还得给其他组件加z-index，遵循后面大于前面的规则吧（三端统一）。436a69c 这个也撤了吧

发布时希望改下package.json里的main，指向dist

更新最新版本发现web控件的高度变成0了，无法设置。

更新最新版本发现web控件的高度变成0了，设置了height:100px也没有效果。

报告一个bug，slider的第一页无法响应点击

H5版本，
给slider里面的div挂上了click消息响应，然后发现第一页是无法响应点击操作的。后面的页可以响应。好像是一个样式错误。

IMPORTANT NOTES

vue-loader config

you should use $processStyle in vue-loader's postTransformNode config.

Otherwise, the inline style or binding style will not be auto-prefixed.

See a example:

/**
 * //////////////////////////////
 * webpack 1.x:
 * //////////////////////////////
 */
module: {
  loaders: [
    {
      test: /\.js$/,
      loaders: ['babel-loader'],
      exclude: /node_modules/
    }, {
      test: /\.vue(\?[^?]+)?$/,
      loaders: ['vue-loader']
    }
  ]
},
vue: {
  /**
   * important! should use postTransformNode to add $processStyle for
   * inline style prefixing.
   */
  compilerModules: [
    {
      postTransformNode: el => {
        el.staticStyle = `$processStyle(${el.staticStyle})`
        el.styleBinding = `$processStyle(${el.styleBinding})`
      }
    }
  ],
  postcss: [require('autoprefixer')()]
}

/**
 * //////////////////////////////
 * webpack 2.x:
 * //////////////////////////////
 */
module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: ['es2015']
      }
    }, {
      test: /\.vue(\?[^?]+)?$/,
      loader: 'vue-loader',
      options: {
        /**
         * important! should use postTransformNode to add $processStyle for
         * inline style prefixing.
         */
        compilerModules: [
          {
            postTransformNode: el => {
              el.staticStyle = `$processStyle(${el.staticStyle})`
              el.styleBinding = `$processStyle(${el.styleBinding})`
            }
          }
        ],
        postcss: [require('autoprefixer')()]
      }
    }
  ]
}

报告weex-vue-render 0.11.2 版本的几个bug

以下问题都是h5版本问题：
1.在ios手机浏览器里面运行的时候，slider的图片有时候不显示，需要等到第一次滑动结束后，图片才显示。
2.slider里面的indicator不能使用，颜色位置都不受代码控制。
3.body不知道为什么多了margin：8px。
4.在使用loading功能的时候，scroller的性能表现太差，动态加载了20多条数据后就卡顿得无法滑动。
5.在使用loading方式动态加载内容的时候，如果其中有image的内容，并且image在屏幕中出现的时候，它的图片不会显示。

希望能尽快修复这些bug，因为在项目中急用。

Weex FAQ

Weex FAQ

子 list 没设置高度问题 ( child list/scoller doesn't have a height value or a flex value )

• alibaba#1450

bugfix & features till 0.10.

bugfix & features till v0.10. (old h5-render has implemented these features already.)

legacy

components

• support image lazyloading.
• support position: sticky.
• loading: load event.
• slider's autoplay.
• support horizontal scroller.
• video.
• embed.
• slider-neighbor

modules

• dom.scrollToElement support horizontal scroller.
• meta.
• webSocket.
• picker.

special styles

• text: lines
• text: text-overflow
• indicator: item-color, item-size, item-selected-color
• loading: height
• refresh: height
• loading-indicator: color
• switch: width, height
• input: placeholder-color

v0.10 features

• image support 'load' (originalWidth, originalHeight), 'error' events.
• image support 'placeholder', 'resize' attr.
• set viewport.
• pseudo class.
• support richtext.
• component method.
• textarea support focus and blur event.

optimize

• slider's performance.
• list/scoller's scrolling performance.
• append inline style caused performance issue.

others

• jsservice.