mp-lui

mp-lui

A Mpvue project

基于MpVue框架以及iview、lui库搭建的小程序UI组件库。

• iview小程序项目地址：iview-weapp

• mp-weui小程序项目地址：mp-weui

Build Setup

小程序项目路径：../mp-lui/dist

# install dependencies
npm install

npm run dev

# build for production with minification
npm run build

开发进度

表单

• Button（基于小程序原生组件）
• Checkbox
• Radio
• Slider
• Switch
• Uploader

基础组件

• Avatar
• Badge
• Card
• Col
• Row
• Drawer
• Gallery
• Grid
• Icons（小程序原生组件）
• Notice-Bar
• Panel
• Progress
• Footer

操作反馈

• Actionsheet
• Alert
• Spin
• Dialog
• Msg
• Picker
• Toast

导航相关

• Navbar
• Tabbar（建议采用小程序原生的tabbar，通过设置app.json来实现）
• Tabs（建议采用小程序原生的tabbar，通过设置app.json来实现）

搜索相关

• Searchbar

问题

• 在进行iActionSheet组件开发时，使用iButton组件，并对其进行循环渲染，iButton组件中含有slot。经过mpvue的编译后发现，并未对循环中不同的slot做编译，导致所有slot的编译仅有一个，从而导致了渲染bug。因此，在iActionSheet组件中目前使用小程序Button组件，mpvue中已经有组件循环 slot内容分发问题的issue，需要进一步观察从而进行优化

• 在进行Grid组件开发时，GridGroup仅作为外层包裹，但如果对Grid进行循环渲染，则页面无显示，还是slot的支持度不够的问题

• 进行Notice-bar组件开发时，发现原生小程序的动画无法被识别编译

• 进行Tabbar组件开发时，TabbarItem中是由Badge组件包裹的，然后Tabbar包裹TabbarItem组件，但此时props中传递的title无法被渲染出来，mpvue超过三层以上的组件嵌套导致编译出现紊乱，因此将badge组件拆成原生实现了

• MpVue组件中的props避免使用key关键字，会导致页面渲染异常

• 在使用cell组件时，内部有content和footer两个slot，然后在slot中加入其它组件时，页面无法正常渲染，只能保留一个slot才能生效

• 在调用mpvue组件时，再向slot中加入结构，data或prop的数据无法传入

• 组件中使用了小程序原生组件picker-view后，如果在页面中使用此组件并且该页面开启了下拉刷新，会产生一个bug，当在picker-view中下拉时，会导致页面下拉刷新，小程序官方已发现此bug，修复中。

• 循环中，key中不能为字符串，否则编译报错

• 嵌套循环中，需要给v-for不同的index名称，否则mpvue编译报错