常见问题

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: [{

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

    }]Click to copy

在 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为设计稿宽度
})Click to copy

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

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

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

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

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).)/
}
]
}Click to copy

  • 同时需要像其他使用一样加入'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
}
]
]
}Click to copy

更多问题可以通过 issue 列表查找，假如有新问题，可以给我们提 issue。

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/faq