Git Product home page Git Product logo

mypui's Introduction

mypUI qq群号:306797275

第一个高效且强悍的nvue开源组件库。做最好、最顺手的nvue组件库

vue3,纯组合式API。支持vue2.

  • 适用于nvue页面的组件与工具(app端对应weex,不再是webview);
  • flex布局,符合weex规范(兼容Vue页面只需要加几个display:flex即可);
  • 规范与统一,确保代码质量和开发效率;
  • 可配置主题;
  • 细节开放到位,在好用和可灵活适配之间把握到位;
  • request/router/share...各种工具集;
  • 考虑了完全自控的页面设计(移除掉系统自带的navbar和tabbar,以及外层自动包裹的scroll);
  • 页面排版更加灵活。遮罩层全屏覆盖。status/nav/xBar处理也非常灵活与方便;
  • 精简page.json的配置,减少独立配置;
  • 已在Android/iOS/mp-wexin/mp-qq/mp-toutiao等上面有实际应用;

mypUI 是基于 uniapp 的一套组件库与工具集,可以 高效且规范 地开发出 uniapp 支持的各端应用(APP/各家小程序/H5/快应用)。兼容 nvue 页面 和 vue 页面。nvue 页面对应的 app端 依托 weex 编译为原生,具备良好的性能与体验。mypUI 绝对能为您带来 稳定、高效、规范 的开发体验。

mypUI 更加注重于通用组件与手势组件,高阶组件、盒子组件的开发,是真正符合 高质量、灵活、高效、规范等 开发要求的组件库。

demo

demo

Android Demo APK下载

找到代码与我们

强烈建议加入wx与qq群,获取更多mypUI的动态与帮助

快速体验

  • 安装HBuilderX;
  • 下载或者clone本UI库;
  • 在HBuilderX里面打开或者导入;
  • 运行到自己想要体验的平台即可;

说明

  • 当时写这套nvue组件的时候,还没有任何一款nvue页面组件在开放或者售卖;
  • 第一版的时候,其实是根据weex-ui改的。scroll是根据mescroll改的(当时mescroll还不是mixin的形式,现在mescroll和以前也大不相同了吧);
  • 不要盲目去适配一个组件,当一个组件的适配程度比较复杂的时候,宁愿重新写,也不去适配;

希望对你有用。

工具与申明

如果您发现我们使用了您的设计或者图片资源,如有侵权,恳请告知,我们一定第一时间删除或者按照您的要求添加申明。

项目中的图片基本上来自于百度图片,以及ui.cn上面的设计。ui.cn上面的资源,我们会列出设计者名单以及主页地址

mypui's People

Contributors

dependabot[bot] avatar wakaryry avatar yanjiaoguang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mypui's Issues

[TODO]组件清单

为了方便开箱即用,我们会提供更多的细化组件,同时能够保证组件可配置的灵活性。

可以在下面盖楼,或者提供UI设计。我们会合并进入TODOLIST

  • 文档;
  • picker内容实现;

[v1]开箱即用组件

会参考华为手机上系统自带的应用实现一批开箱即用的组件。

如果有什么需要加的,可以在下方回复说明

[需求墙]组件/原生SDK/某种效果都可以提

在这里,你可以说:

  • 想要一个什么样的组件;
  • 想要一个什么样的原生SDK;
  • 甚至可以描述,想要实现一个什么样的效果;
  • ...

这些都可以是需求,盖在需求强里,我们会安排开发。

当然您也可以加入进来,一起参与开发。

我们的目标是星辰大海。

myp-drawer的使用问题收集

  • 非auto模式下,拖到哪在哪停。然后,有时候用户想点击一下全部打开或者关闭。打开或者关闭之后再拖动应该现在没有加判断;
  • swipe手势支持;

[v2]任务总结

  • 检查与增加各个组件的示范demo;
  • myp-popup类组件合并,以及完成自适应高度;
  • myp-waterfall组件在MP/H5完成,使用作用域插槽,最多开三列;
  • myp-slider-bar组件各端完成;
  • myp-slide-gallery组件各端完成。画廊类组件;
  • myp-scroll-scale组件各端实现,无法绑定bindingx的问题上报给uni;
  • 增加tabs-v的左右栏联动示范,正常与popup中;
  • 增加上下滚动时tabs-h的联动示范;

[v2]check/group/grid等组件,slots化

为app端提供slots化个性配置能力,mp端因为语法限制,暂时不支持。当然,我们可以再提供一个类似于 swiper-item 这样的写法。

[v1]公共组件开发

  • myp-tabbar;
  • myp-button;
  • myp-navbar;
  • myp-cell;
  • myp-cell-two;
  • myp-input;
  • myp-input-one;
  • myp-input-grow;
  • myp-textarea;
  • myp-icon;
  • myp-grid;
  • myp-grid-item;
  • myp-tabs-item;
  • myp-tabs-h;
  • myp-tabs-v;
  • myp-tag;
  • myp-tag-group;
  • myp-title;
  • myp-switch;
  • myp-stepper;
  • myp-segment;
  • myp-search;
  • myp-progress;
  • myp-check-item;
  • myp-check;
  • myp-countdown;
  • myp-indexlist;
  • myp-scroll-h;
  • myp-list-cell;
  • myp-list;
  • myp-list-simple;
  • myp-waterfall;
  • myp-waterfall-simple;
  • myp-loader;
  • myp-loader-n;
  • myp-refresher;
  • myp-refresher-n;
  • myp-x-status;
  • myp-x-bar;
  • myp-height;
  • myp-position;
  • myp-content-box;
  • myp-divider;
  • myp-loading;
  • myp-toast;
  • myp-notice;
  • myp-notice-dynamic;
  • myp-loading-indicator;
  • myp-picker-content;
  • myp-picker-header;
  • myp-overlay;
  • myp-popup;
  • myp-popup-always;
  • myp-select;
  • myp-result;
  • myp-message-time;
  • myp-message-text;
  • myp-message-image;

[v2]list类组件增强,可提需求

  • 空内容增强;
  • 默认配置增强;
  • 滚动到指定位置增强;
  • 增加网易云音乐类似的刷新组件;
  • 支持无数据时全屏展示刷新cycle;

...

下面可以提需求

[v2]第二轮大优化开始

mypUI实际上已经优化过好几轮。到现在为止:

  • 各个组件不仅支持快捷配置,也支持个性化定制;

  • 组件可适应性比较大;

  • 组件接口和属性统一规范,用起来非常快速高效;

下一轮优化方向为:

  • 减少不必要的属性配置,以及数据watch/computed;

  • 减少甚至移除掉对 高度决策 mixin 的依赖;

  • 减少 mixin 的依赖;

  • 工具类函数拆分,按需引用,不再整体文件引入;

  • 增加基础css,减少相同css的书写;

  • 增加extra.css,将部分不常用(但可能部分设计下常用)的css放到这里面,用户按需引用(app内设计涉及到的时候引入);

  • 完善部分组件的手势支持,比如myp-drawer的swipe手势;

picker-time 的useCurrent可能有问题

useCurrent实际上可以移除掉。

因为,我这本身是以值定位的。用户直接设置当前时间即可。

不移除的话需要重新看看是否计算正确。现在似乎无效。

[v1]文档建设

  • 文档网站;
  • myp-tabbar;
  • myp-button;
  • myp-navbar;
  • myp-cell;
  • myp-cell-two;
  • myp-input;
  • myp-input-one;
  • myp-input-grow;
  • myp-textarea;
  • myp-icon;
  • myp-grid;
  • myp-grid-item;
  • myp-tabs-item;
  • myp-tabs-h;
  • myp-tabs-v;
  • myp-tag;
  • myp-tag-group;
  • myp-title;
  • myp-switch;
  • myp-stepper;
  • myp-segment;
  • myp-search;
  • myp-progress;
  • myp-check-item;
  • myp-check;
  • myp-countdown;
  • myp-indexlist;
  • myp-scroll-h;
  • myp-list-cell;
  • myp-list;
  • myp-list-simple;
  • myp-waterfall;
  • myp-waterfall-simple;
  • myp-loader;
  • myp-loader-n;
  • myp-refresher;
  • myp-refresher-n;
  • myp-x-status;
  • myp-x-bar;
  • myp-height;
  • myp-position;
  • myp-content-box;
  • myp-divider;
  • myp-loading;
  • myp-toast;
  • myp-notice;
  • myp-notice-dynamic;
  • myp-loading-indicator;
  • myp-picker-content;
  • myp-picker-header;
  • myp-overlay;
  • myp-popup;
  • myp-popup-always;
  • myp-select;
  • myp-result;
  • myp-message-time;
  • myp-message-text;
  • myp-message-image;
  • 其它页面级文档;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.