快速部署

下载 UXUI

请在 dcloud 插件市场免费获取 UXUI 框架（ 插件形式 ）和演示源码包，下载地址 :

https://ext.dcloud.net.cn/plugin?id=15726

快速部署

一、以演示项目为基础

点击   使用 HBuilderX 导入示例项目  按钮获取得到一个完整的 uxui 项目（ 基于 uni-app x ）, 可以直接运行，也可以直接开始开发 :

删除 /pages 文件夹下的演示页面，创建自己的页面文件，按照 uni-app x 的开发流程进行开发即可。

二、以插件形式部署到您的 uni-app x 项目

点击 下载插件并导入HBuilderX  按钮将 uxui 以插件形式导入到您的项目，导入位置 :

/uni_modules/ux-ui

导入后请完成以下3步完成部署（ 重要 ）

1. 加载框架图标

1.1 部署字体图标文件 :

请将 :
/项目根目录/uni_modules/unix-ui/fonts/uxui.ttf (图标字体文件)
复制到
/项目根目录/static/fonts/uni.ttf

1.2. 在 app.vue 内加载字体文件

打开 app.vue, 添加如下代码 ( 加载字体部分 ) :

<script lang="ts">
let firstBackTime = 0;
export default {
	onLaunch: function () {
		console.log('App Launch')
		// 加载字体
		uni.loadFontFace(
		{
			global: true,
			family:"uxui",
			source:"url('/static/fonts/uxui.ttf')",
			success() {
				console.log('loadFontFace success')
			},
			fail:function(e){
				console.log(e)
			}
		});
		// 加载字体
	},
	onShow: function () {},
	onHide: function () {},
	onLastPageBackPress: function () {
		if (firstBackTime == 0) {
			uni.showToast({
			  title: '再按一次退出应用',
			  position: 'bottom',
			})
			firstBackTime = Date.now();
			setTimeout(() => {
			  firstBackTime = 0
			}, 2000);
		} else if (Date.now() - firstBackTime < 2000) {
			firstBackTime = Date.now();
			uni.exit();
		}

	},
	onExit() {},
}
</script>

2. 加载 uxui 框架核心样式

打开 app.vue，在 style 标签内添加 :

<style lang="scss">
/* 加载框架样式 */
@import "@/uni_modules/unix-ui/uxui.scss";
</style>

3. 添加主题样式到 uni.scss

请点击 复制 按钮，然后粘贴 主题 样式到 uni.scss。

/* 主体结构 */
$ux-body-space:30rpx;
/* 主题色 */
$primaryColor:#008AFF;
/* 页面背景色 */
$ux-page-color:#F5F6F8;
/* 文本颜色 */
$ux-primary-text-color:rgba(55, 55, 55, 1);
$ux-secondary-text-color:rgba(116, 116, 116, 1);
$ux-third-text-color:rgba(150, 150, 150, 1);
/* 点击背景 */
$ux-tap-color:rgba(239,241,246, 0.3);
/* 圆角尺寸 */
$ux-radius-sm:6rpx;
$ux-radius:10rpx;
$ux-radius-lg:20rpx;
/* 文本尺寸 */
$ux-text:30rpx;
$ux-text-small:24rpx;
$ux-h1:60rpx;
$ux-h2:50rpx;
$ux-h3:40rpx;
$ux-h4:36rpx;
$ux-h5:32rpx;
$ux-h6:30rpx;
/* 通用间距 */
$ux-space:30rpx;
$ux-space-large:50rpx;
$ux-space-small:16rpx;
/* 边框颜色 */
$ux-border-color:#F5F7F8; 
/* 按钮尺寸 */
$ux-button-text-size:30rpx;
$ux-button-size:82rpx;
$ux-button-border-radius:8rpx;
$ux-button-mini-text-size:22rpx;
$ux-button-mini-size:66rpx;

至此，uxui 部署完成。