Skip to content

jessejyang/mpvue-iview

Repository files navigation


增加直接跳转到原生页面的支持 适配了高版本的mpvuempvue-loaderimport-weapp-component增加了支持直接拷贝的功能 详细请看项目中的pages/native/index

配置文件修改:

// webpack.base.conf.js
new ImportComponent({
  src: path.resolve(__dirname, '../src'),
  native: true
})

关于项目的一些说明:

  1. mpvue中引用小程序组件可以将组件直接拷贝到static目录来实现,这个插件有什么意义?

总的来说原理相同,都是拷贝的(事实上插件也是从copy-webpack-plugin fork 的),差别在与import-weapp-component增加了对组件的自动引入,而不用没引用一个拷贝一次(如果使用组件库,一次性拷贝,用不到的组件会增加包体积),另外在最新版本中增加了对mpvue混合开发的支持(即增加对页面拷贝的支持,原理与组件相同),可以对老项目的平稳过渡有些作用。

  1. mpvue组件中如何引用小程序组件?

这个暂时无法支持,mpvue并没有用原生Component机制,也不会有json生成

  1. 如何在mpvue中修改原生组件样式?

这个问题需要看原生组件是否支持,另外如果支持,请不要把样式写到scope中,因为mpvue-loader会给样式增加唯一data-scope

简介

本项目为mpvue引入小程序原生组件示例程序,通过webpack-plugin的方式将iview文件夹下组件引用到dist,插件地址:import-weapp-component

缺陷

若原生组件通过click事件,即this.triggerEvent('click', { index })来进行父子组件通信,mpvue无法从event.mp中读取到正确的detail,原因是因为mpvueclick事件编译为tap导致this.triggerEvent('click', { index })无法找到click句柄

解决方案

修改组件库click事件名称,例如:

this.triggerEvent('click', { index }) => this.triggerEvent('iclick', { index })

对应的模板中:

@click => @iclick

注:本次示例中修改了modal组件

受影响组件(仅传值情况受影响)

  1. action-sheet
  2. modal

示例代码

关于示例部分代码通过脚本生成的基础上进行的修改,没有注意格式,仅供参考

License

MIT

About

mpvue import native iview component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages