增加直接跳转到原生页面的支持 适配了高版本的
mpvue
及mpvue-loader
,import-weapp-component
增加了支持直接拷贝的功能 详细请看项目中的pages/native/index
配置文件修改:
// webpack.base.conf.js
new ImportComponent({
src: path.resolve(__dirname, '../src'),
native: true
})
mpvue
中引用小程序组件可以将组件直接拷贝到static
目录来实现,这个插件有什么意义?
总的来说原理相同,都是拷贝的(事实上插件也是从
copy-webpack-plugin
fork 的),差别在与import-weapp-component
增加了对组件的自动引入,而不用没引用一个拷贝一次(如果使用组件库,一次性拷贝,用不到的组件会增加包体积),另外在最新版本中增加了对mpvue
混合开发的支持(即增加对页面拷贝的支持,原理与组件相同),可以对老项目的平稳过渡有些作用。
mpvue
组件中如何引用小程序组件?
这个暂时无法支持,
mpvue
并没有用原生Component
机制,也不会有json
生成
- 如何在
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
组件
- action-sheet
- modal
关于示例部分代码通过脚本生成的基础上进行的修改,没有注意格式,仅供参考