FAQ

wxc-ep-slider, wxc-slider-bar Can't slide

• The two components in Weex Ui now depend on an innovative interaction feature called BindingX, And this feature is already open source, please refer to github to import.

Suggestions for using images in Weex.

• Use CDN image：It is recommended to use, and to ensure that the actual size and size of the image is consistent with what you need to show.
• Use local image：Weex’s native runtime support load image file from device’s disk, all you have to do set the file url like file:///sdcard/image_new0.png. See more here. At the same time, Weex does not support the loading of image files in your project, nor does it support the direct use of local images by downgrade Web version. Therefore, it is recommended to use the CDN image link.
• Use Base64：This depends on native image library resolution, but it is not recommended to use more than 2k Base64 in Weex, which makes the bundle too large to affect performance.

Module not found: Error: Can't resolve ‘weex-ui/packages/wxc-button/style.css’

• This error should be the babel-plugin-component lack of style configuration, You can refer to Weex-toolkit to fix it.

Uncaught SyntaxError: Unexpected token export；

• This error typically occurs on the page developed using old weex-toolkit.
• You can refer to this document to fix it.

ERROR in XXX from UglifyJs Unexpected token: punc (() [XXX]

• You can refer to this document to fix it.

• If you are using a Windows system, you may still have this problem when you upgrade, you check the babel config about webpack.config.js, modify exclude like this:

   rules: [{
        test: /\.js$/,
        use: [{
          loader: 'babel-loader'
        }],
        exclude: /node_modules(?!(\/|\\).*(weex).*)/
   }]
  

vue.runtime.js:478 [Vue warn]: Cannot find element: #root

• The default config of weex project created by weex-toolkit will generate entry config automatically, but this project has already used entry.js as entry config in webpack. Details of the cause are visible in pull/21.

GIF images have no animation on Android

• This is supported by the underlying image library, More you can refer to Weex 踩坑之 Gif 加载.

Does Weex Ui support the horizontal screen ？

• I‘m sorry, Weex currently doesn’t support horizontal screen, so Weex Ui doesn't have any horizontal screen mode yet. When Weex supports it, it will follow immediately.

• You can send a message to weex at the horizontal screen, Then handle this in your code.

  function getHWidth (w) {
    return deviceWidth / w * 750
  }
  const meta = weex.requireModule('meta')
  // set viewport width
  meta.setViewport({
    width: getHWidth(w) // W is the width of the design draft
  })
  

Can Weex Ui be used in vue project ?

• Weex Ui can write once and support iOS / Android / Html5 right now!

• But if you want to use it in a pure vue project, you can replace it with this one, but not recommended：

   import { WxcComponent1, WxcComponent2 } from "weex-ui/build/index.web.js"
  

Can Weex Ui be used in weex-dingtalk-cli ?

• Yes, but you need modify some config

• Add a exclude in build/webpack.base.weex.conf.js Like this:

  module: {
      rules: [
        {
          test: /\.vue(\?[^?]+)?$/,
          loaders: ['weex-loader'],
          exclude: /node_modules(?!(\/|\\).*(weex).*)/
        },
        {
          test: /\.js$/,
          loaders: ['babel-loader'],
          exclude: /node_modules(?!(\/|\\).*(weex).*)/
        }
      ]
    }
  

• Please add ‘babel-preset-stage-0’ and ‘babel-plugin-component’ to .babelrc

  npm i babel-plugin-component babel-preset-stage-0 -D

  Edit the .babelrc like this

  {
    "presets": ["es2015", "stage-0"],
    "plugins": [
      [
        "component",
        {
          "libraryName": "weex-ui",
          "libDir": "packages",
          "style": false
        }
      ]
    ]
  }
  

---- 
More questions can be found from the [issue list](https://github.com/apache/incubator-weex-ui/issues?utf8=%E2%9C%93&q=). If you find a new bug, Just file an [issue](https://github.com/apache/incubator-weex-ui/issues/new).