快速了解
完整资料
资料已展开关于 Unify Ui
状态提示： 最近一次检测未能正常访问官网，该工具可能已经停止服务。以下内容作为历史资料保留。
为什么创建Unify Ui
在使用uni-app平台开发过程中，往往复杂的vue页面性能欠佳或者用户智能手机性能并不高的情况下，就只能使用高性能nvue页面去进行优化。
由于nvue是基于 weex 改进的原生渲染引擎，提供了原生渲染能力，需要遵循weex的规则，所以支持的css有限，使得许多的开发者止步于此。
在需要保证APP性能且兼容各端，那么就只能nvue通用组件库，各端兼容且让nvue开发更加便捷，因此unify ui诞生
兼容平台
| App(nvue/vue) | H5 | 微信小程序 | 支>付宝小程序 | QQ小程序 | 百度小程序 | 头条小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
安装
提示
unifyUi依赖SCSS预处理器，所以您需要给HBuilder X安装 “sass/scss编译” 插件。 scss/sass编译
unifyUi使用easycom模式，无需引入组件即可直接使用，此功能需要Hbuilder X 2.5.5及以上版本才支持。不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
下载方式
前往插件市场中下载
项目搭建
第一步. 获取unify-ui项目，然后将项目中的unify-ui目录放置项目中
第二步. 修改uni.scss文件
scss
复制代码
/* 主题色配置 */
$unify-color-theme:#FF7F00;//主题色
$unify-color-theme-help:#EECFA1;//辅助主题色
/* 字体颜色/背景颜色配置 */
$unify-color-red:#FF5432;//红色
$unify-color-red-help:#FFA07A;//辅助红色
$unify-color-orange:#FF7F00;//橙色
$unify-color-orange-help:#EECFA1;//辅助橙色
$unify-color-yellow:#FABC43;//黄色
$unify-color-yellow-help:#FFFFE0;//辅助黄色
$unify-color-green:#44BB56;//绿色
$unify-color-green-help:#CCFFCC;//辅助绿色
$unify-color-cyan:#23DDF8;//青色
$unify-color-cyan-help:#E0FFFF;//辅助青色
$unify-color-blue:#3A86FB;//蓝色
$unify-color-blue-help:#B0E2FF;//辅助蓝色
$unify-color-purple:#8D2BFA;//紫色
$unify-color-purple-help:#EED2EE;//辅助紫色
$unify-color-black:#000000;//黑色
$unify-color-black-help:#333333;//辅助黑色
$unify-color-gray:#666666;//灰色
$unify-color-gray-help:#999999;//辅助灰色
$unify-color-white:#FFFFFF;//白色
$unify-color-white-help:#DEDEDE;//辅助白色
/* 文字颜色 */
$unify-color-main:#333333; //一级文字/正文/主标题
$unify-color-often:#666666;//二级文字/副标/常规内容
$unify-color-help:#999999;//三级文字/补充描述/辅助内容
$unify-color-fill:#CDCDCD;//四级文字/占位内容
/* 其他颜色配置 */
$unify-color-page:#F8F8F8; //vue页面背景色/nvue页面背色在pages.json页面globalStyle》backgroundColor
$unify-color-divider:#EBEEF5;//分割线颜色
$unify-color-hover:#F1F1F1;//点击状态颜色
/* 文字尺寸 */
$unify-text-xs:20rpx;
$unify-text-sm:24rpx;
$unify-text-md:28rpx;
$unify-text-lg:32rpx;
$unify-text-xl:48rpx;
$unify-text-xxl:64rpx;
/* 内外边距 */
$unify-distance-xs:8rpx;
$unify-distance-sm:16rpx;
$unify-distance-md:24rpx;
$unify-distance-lg:32rpx;
$unify-distance-xl:40rpx;
$unify-distance-xxl:56rpx;
/* 圆角尺寸 */
$unify-radius-xs:8rpx;
$unify-radius-sm:12rpx;
$unify-radius-md:16rpx;
$unify-radius-lg:20rpx;
$unify-radius-xl:100rpx;
$unify-radius-xxl:200rpx;第三步. 修改App.vue文件
js
复制代码
<script>
export default {
onLaunch: function() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary');
const domOrange = weex.requireModule("dom");
domOrange.addRule('fontFace', {
'fontFamily': 'unifyIcon',
'src': '图片或者base64')"
});
// #endif
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<!-- 注意加上: lang="scss"，例如：<style lang="scss"> -->
<style lang="scss">
/* 阿里图库字体图标引入全端使用 */
@import "./unify-ui/iconfont/unifyIcon.css";
/*核心scss文件 */
@import "./unify-ui/unify-ui.scss";
</style>第四步. manifest.json(源码视图中)的app-plus节点下配置全面屏、刘海屏适配（iphoneX适配）及安全区配置
js
复制代码
/* 全面屏、刘海屏适配（iphoneX适配）及安全区设置 */
// manifest.json
{
// ...
/* App平台特有配置 */
"app-plus": {
"safearea": {
"bottom": {
"offset": "none"
}
}
}
}第五步. pages.json中配置自定义easycom配置
js
复制代码
"easycom": {
"autoscan": true,
"custom": {
"unify-(.*)": "@/unify-ui/components/unify-$1/unify-$1"
}
}第六步.使用纯原生渲染模式配置(不使用纯原生渲染模式则不需要配置)
manifest.json(源码视图中)的app-plus节点下配置
纯原生渲染模式
js
复制代码
// manifest.json
{
// ...
/* App平台特有配置 */
"app-plus": {
"renderer": "native", //App端纯原生渲染模式
}
}UI框架推荐
Iview
一套基于 Vue.js 的高质量UI 组件库
Vant
轻量、可靠的移动端 Vue 组件库
Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
适合的使用方向
在使用uni-app平台开发过程中，往往复杂的vue页面性能欠佳或者用户智能手机性能并不高的情况下，就只能使用高性能nvue页面去进行优化
由于nvue是基于 weex 改进的原生渲染引擎，提供了原生渲染能力，需要遵循weex的规则，所以支持的css有限，使得许多的开发者止步于此
在需要保证APP性能且兼容各端，那么就只能nvue通用组件库，各端兼容且让nvue开发更加便捷，因此unify ui诞生
收录线索
内容根据公开资料整理；版本、兼容性与服务状态请以官网最新说明为准。