mpvue-iview

mpvue-iview copied to clipboard

增加直接跳转到原生页面的支持 适配了高版本的mpvue及mpvue-loader，import-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混合开发的支持（即增加对页面拷贝的支持，原理与组件相同），可以对老项目的平稳过渡有些作用。

2. mpvue组件中如何引用小程序组件？

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

3. 如何在mpvue中修改原生组件样式？

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

简介

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

缺陷

若原生组件通过click事件，即this.triggerEvent('click', { index })来进行父子组件通信，mpvue无法从event.mp中读取到正确的detail，原因是因为mpvue将click事件编译为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