回复 刷新

暂无评论

解决uniapp使用vant-weapp开发微信小程序的坑

这篇文章主要是为使用uniapp和vant-weappui库的童鞋解决一个痛点。

使用过uniapp开发微信小程序的都知道uniapp内置了es6转es5,如果开启了小程序的es6转es6,那么会导致一些不可预计的语法错误,例如async/await无法使用。

但是如果关闭小程序的es6转es5,那么存放于static目录vant-weapp的组件无法被编译成es5,导致使用组件报错。

核心原因:

由于vant-weapp的模块化机制为import/export,小程序的模块化是require/module.exports

知道原因就好解决了,改源码。手动将引入的组件和组件所依赖的js全部修改为require/module.exports

例子:

1、先修改引入处
// vant/dist/popup/index.js
// -----修改前-------
import { VantComponent } from '../common/component';
import { transition } from '../mixins/transition';
import { iphonex } from '../mixins/iphonex';

// -----修改后-------
const { VantComponent } = require('../common/component');
const { transition } = require('../mixins/transition');
const { iphonex } = require('../mixins/iphonex');
复制代码2、再修改导出处,
// vant/dist/common/components.js
// ----修改前----
export { VantComponent }
// ----修改后----
module.exports = { VantComponent }

复制代码根据例子,修改完所有引用的文件,即可在不和uniapp的es6编译冲突的情况下使用。

如果觉得这样改很难受,可以去vant-weapp的github骚扰他们反馈。

  • 20
  • 0
  • 0