uni-app–漂亮UI框架分享 兼容头条/微信等小程序

uView UI入选了gitee的GVP项目(Gitee码云最有价值的开源项目),是uni-app生态优秀的UI框架,提供了很全面的UI组件和模板,为开发各类跨平台的H5 App以及各种小程序都十分方便。

uni-app漂亮UI框架分享-兼容头条/微信等小程序

app development

什么是uni-app

uni-app 是一个使用 Vue.js 开发跨平台H5应用的前端框架,开发者编写一套前端代码,便可以通过其开发工具HBuilder X发布成iOS、Android、Web(H5响应式)、以及各类小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、以及快应用等相关应用。

uni-app漂亮UI框架分享-兼容头条/微信等小程序

uni-app

uView使用

uView UI可以从uni-app插件市场进行查找,点击页面右上角”导入示例项目” 或者 “下载示例项目”, 下载或者导入完成后,可以在HBuilderX 中点击运行到浏览器便可以查看模板运行效果。
在已有项目中使用:

1. main.js引入uView库

import uView from \’uview-ui\’;

Vue.use(uView);

2. 在App.vue中引入基础样式

 

3. uni.scss引入全局scss变量文件

@import “uview-ui/theme.scss”;

4.pages.json 按需引入easycom规则

{

“easycom”: {

// 下载安装的方式需要前面的”@/”,npm安装的方式无需”@/”

// 下载安装方式

“^u-(.*)”: “@/uview-ui/components/u-$1/u-$1.vue”

// npm安装方式

// “^u-(.*)”: “uview-ui/components/u-$1/u-$1.vue”

},

// 此为本身已有的内容

“pages”: [

// ……

]

}

组件使用方法
按钮

UI效果演示

color颜色:UI预置了很多颜色代码可以直接使用

uni-app漂亮UI框架分享-兼容头条/微信等小程序

颜色块

uni-app漂亮UI框架分享-兼容头条/微信等小程序

滑动条

uni-app漂亮UI框架分享-兼容头条/微信等小程序

开关按钮

uni-app漂亮UI框架分享-兼容头条/微信等小程序

日期选择

其他示例模板

商城模板:包含完整的商城列表页面以及商品展示

uni-app漂亮UI框架分享-兼容头条/微信等小程序

商城模板

仿微信个人中心

uni-app漂亮UI框架分享-兼容头条/微信等小程序

仿微信

其他还有很多常用的UI组件

uni-app漂亮UI框架分享-兼容头条/微信等小程序

组件列表0

uni-app漂亮UI框架分享-兼容头条/微信等小程序

组件列表1

有使用uniapp开发跨平台应用的小伙伴们可以下载体验一下这个UI

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/13698.html

发表评论

登录后才能评论