微信小程序之第三方UI框架

眉间皱痕 提交于 2020-02-27 13:07:50

一、WeUI WXSS

WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。

GitHub地址:https://github.com/Tencent/weui-wxss
npm下载:npm i weui-wxss;

二、iView WeApp

iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。

GitHub地址:https://github.com/TalkingData/iview-weapp
npm下载:npm i iview-weapp

三、ZanUI WeApp

ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。

GitHub地址:https://github.com/youzan/zanui-weapp
npm下载:npm i zanui-weapp

另外,zanui也使用 mpvue 重写 zanui-weapp,实现了其中所有组件。

GitHub地址:https://github.com/samwang1027/mpvue-zanui
npm下载:npm i mpvue-zanui

四、MinUI

MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。

GitHub地址:https://github.com/meili/minui
npm下载:npm install -g @mindev/min-cli

五、Wux WeApp

Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。

GitHub地址:https://github.com/wux-weapp/wux-weapp
npm下载:npm i wux-weapp

六、mpvue-docs

MpVue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.jsruntimecompiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

GitHub地址:github 地址请参见
npm下载:npm install --global vue-cli
在线文档:http://mpvue.com/

七、wepy

WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。

GitHub地址:github 地址请参见
npm下载:npm install wepy-cli -g
在线文档:https://tencent.github.io/wepy/

八、WeWeb

WeWeb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。如果你熟悉vue的语法,也可以使用wepy编写小程序,再通过weweb转换后将其运行在web端。

GitHub地址:github 地址请参见
npm下载:npm install weweb-cli -g
在线文档:https://weidian-inc.github.io/hera/#/basics/quickstart

九、Vant Weapp

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

GitHub地址:github 地址请参见
npm下载:npm i vant-weapp -S --production
在线文档:https://youzan.github.io/vant-weapp/#/intro

十、ColorUI

ColorUI组件是我根据开发经验,自己编写、整合的一套高颜值的微信小程序组件库。

GitHub地址:github 地址请参见
在线文档:https://www.color-ui.com/

更多:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!