常见问题

wxc-ep-slider、wxc-slider-bar 不能正常滑动

• 目前 Weex Ui 中这两个组件依赖于一个创新交互特性 BindingX，目前已经开源，Native 请参考仓库进行 引入。

Weex 中图片使用建议

• 使用CDN图片：建议使用，同时确保图片的实际尺寸比例和大小和你需要展示的一致
• 使用本地图片：Weex 的原生运行机制支持从设备中加载图片，你只需要设置文件 url，例如 file:///sdcard/image_new0.png 这样的格式，具体使用可见【这里】，同时Weex 暂时还不支持加载你工程中的图片文件，也不支持降级版本直接使用本地图片，故建议使用 CDN 图片链接
• 使用Base64：这个取决于底层图片库解析功能，但是不建议在 Weex 中使用超过 2k 的 Base64，容易让bundle体积过大，影响性能

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

• 此错误应该babel配置babel-plugin-component时候缺少style配置，详细可见 Weex-toolkit

Uncaught SyntaxError: Unexpected token export；

• 此错误一般出现在使用老的 weex-toolkit 工具开发的页面。
• 可以参考此文档进行相关依赖升级。

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

• 此错误为 webpack 打包过程中寻找weex-ui依赖出现的问题，目前新版本 weex-toolkit 已经修复

• 统一可以参考此文档进行相关依赖升级。

• 假如是 windows 系统，升级依赖后可能还是有此问题，可以检查 webpack.config.js 中 babel 配置(两处),将 exclude 修改成这样:

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

在 web 中报 vue.runtime.js:478 [Vue warn]: Cannot find element: #root

• 详细错误原因可见 pull/21，为修改了weex-toolkit默认的入口导致，解决方案为 commits。

gif 图片在 Android 上面没有动画

• 这个是底层图片库需要支持的，playground 的图片库是不支持的 gif 的, 这个功能偏适配层，需要开发自己在自己的图片库实现。
• 具体解决可见 Weex 踩坑之 Gif 加载。

Weex Ui 现在支持横屏吗 ？

• 很抱歉，目前由于 Weex 本身还不支持横屏，所以 Weex Ui 现在也还没有横屏模式，等到 Weex 支持后，这边会立马跟上的。

• 你可以修改底层代码等到横屏时候发送消息，再在 Weex 代码中这样处理

  function getHWidth (w) {
    return deviceWidth / w * 750
  }
  const meta = weex.requireModule('meta')
  // 配置 viewport 的宽度为
  meta.setViewport({
    width: getHWidth(w) // w为设计稿宽度
  })
  

Weex Ui 能否在 vue h5 项目中使用?

• Weex Ui 是同时支持 iOS、Android和 Weex 降级的H5使用的。

• 假如想在纯 vue 项目中使用，可以讲使用方式替换成这个试试，但是不推荐：

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

Weex Ui 可以在钉钉 Weex 中 【weex-dingtalk-cli】运行吗 ?

• 是的，不过你需要需改一些配置来兼容下

• 像这样新增一个 exclude 在 build/webpack.base.weex.conf.js 文件中:

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

• 同时需要像其他使用一样加入‘babel-preset-stage-0’ 和 ‘babel-plugin-component’ 到 .babelrc 中

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

  编辑 .babelrc 文件：

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

   
-----
更多问题可以通过 [issue 列表](https://github.com/apache/incubator-weex-ui/issues?utf8=%E2%9C%93&q=)查找，假如有新问题，可以给我们提 [issue](https://github.com/apache/incubator-weex-ui/issues/new)。