此错误为 webpack 打包过程中寻找weex-ui依赖出现的问题,目前新版本 weex-toolkit 已经修复
统一可以参考此文档进行相关依赖升级。
假如是 windows 系统,升级依赖后可能还是有此问题,可以检查 webpack.config.js
中 babel 配置(两处),将 exclude 修改成这样:
rules: [{ test: /\.js$/, use: [{ loader: 'babel-loader' }], exclude: /node_modules(?!(\/|\\).*(weex).*)/ }]
很抱歉,目前由于 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 是同时支持 iOS、Android和 Weex 降级的H5使用的。
假如想在纯 vue 项目中使用,可以讲使用方式替换成这个试试,但是不推荐:
import { WxcComponent1, WxcComponent2 } from "weex-ui/build/index.web.js"
是的,不过你需要需改一些配置来兼容下
像这样新增一个 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)。