unigui开源框架，uniapp开源商城源码

头条共创 2024-07-05

《开源精选》是我们分享Github、Gitee等开源社区的优质项目的专栏，内容包括技术、学习、实用以及各种有趣的内容。本期推荐的是——uView UI，一款来自Uniappli生态的多平台快速开发UI框架。

uni-app自2018年初发布以来一直活跃、欣欣向荣，社区充满热情和期待。于是，uView诞生了。 uView的目标是成为Uniappli生态系统中最好的UI框架。

33ae2e9f62eb438b93d772956cc3327b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=HIviDOM25H1KSJhIcwCOh4bFIDA%3D 功能特点：

兼容Android、iOS、微信小程序、H5、QQ小程序、百度小程序、支付宝小程序、头条小程序等60多个精选组件，功能丰富，可快速兼容多种设备。 JS 是一个强大的工具，可以让你立即飞镖。这使您可以快速导航到许多常用的页面和布局，使您可以专注于逻辑并事倍功半。事半功倍。详细的文档支持，最新的演示效果按需部署，打包体积精简。

安装：

下载地址uView UI发布Sketch和Axure设计资源- DCloud插件市场

立即开始：

1.main.js引入uView库

import uView from 'uview-ui';Vue.use(uView);2.App.vue引入基本样式（注意需要在style标签中声明对scss属性的支持）

style lang='scss'@import 'uview-ui/index.scss';/style3.uni.scss 引入了一个全局的scss 变量文件。

@import 'uview-ui/theme.scss';4.pages.json 配置easycom规则（按需部署）

{'easycom': {//下载安装方法需要以'@/'开头，但是npm install方法不需要'@/' //下载安装方法'^u-(.*)': ' @/uview-ui /components/u-$1/u-$1.vue'//npm 安装方法//'^u-(.*)': 'uview-ui/components/u- $1/u-$1 .vue'},//这是现有内容'pages':[//.]} 5.设置easycom规则，可以直接引用组件，无需导入，按需自动部署。

模板u 型按钮/u 型按钮/模板

eaa70be1c9ff45a9ad14ab5b9e723cbb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=mycl2MtW%2FXXYnllx6kv%2BQnbcoaI%3D

组件示例：

颜色

5fd52a3555f842e5bb7b05432164aedb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=sV2sqrjs30KsM0bE8TUhsZSaA4c%3D 按钮 9d5e6b71f00f4f7eb4738a7b90138dd0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=ULC8wXJcvHkZTiEQJDjl4YJsmOM%3D 布局 fe168b52319a492d8f358b0bad64e92c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=yC067g34YNaRY%2FrLJ0Sdwww%2Fq9w%3D 表格 d40abaa9f0a34778a24e5ad286daa5de~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=nZNWQiLg1J2hMs%2Bu58IdrPe8Yrw%3D 其他 ef50575b526e46b88e8fe9c1b4af0fc3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=m8LMc%2BvJNf%2FYT%2BA3tgl5jR%2F47qg%3D 工具 7b1fbc42dd1e439997bf390f0005d7ba~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=dA8d9cwNjF9lerOVpAwsWY7hS%2Bs%3D 模板 f11f903be2a54882a13c9b9b12eeb9c4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720788170&x-signature=yB3A%2FLl9mZtPmHFTNbmLhPERtb8%3D 360 010- 695 09 更多详情请自行阅读。