uniapp中使用uview-plus

安装uview-plus

uview-plus的官网地址

我们通过HBuilderX的方式进行下载

点击：下载地址：https://ext.dcloud.net.cn/plugin?name=uview-plus

配置uview-plus

在 main.js 中引入uviewPlus。然后使用这个库

复制代码

// main.js
// 引入uviewPlus(新增)
import uviewPlus from '@/uni_modules/uview-plus'
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // 使用uviewPlus这个库(新增)
  app.use(uviewPlus这个库)
  return {
    app
  }
}
// #endif

uni.scss文件中引入uview-plus的主题变量

复制代码

// 引入uview-plus的全局SCSS主题变量
@import '@/uni_modules/uview-plus/theme.scss';

在App.vue文件中，引入uview-plus的全局样式类

复制代码

<style lang="scss">
/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-plus/index.scss";
/*每个页面公共css */
.com-box{
	width: 100%;
	height: 40rpx;
	background-color: aqua;
}
</style>

安装这2个库，因为时间组件有使用这2个库

安装后，会出现package.json文件和package-lock.json文件

复制代码

npm i dayjs clipboard

配置easycom进行按需引入uview-plus

pages.json 文件下。进行如下配置

温馨提示

uni-app为了调试性能的原因，修改easycom规则不会实时生效，

配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。

请确保您的pages.json中只有一个easycom字段，

否则请自行合并多个引入规则。

复制代码

"easycom": {
	"autoscan": true,
	// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
	"custom": {
		"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
		"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
	    "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
	}
},

//这是通过npm的方式进行配置的
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
              
//这是通过下载到本地的方式进行配置的
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
//这两者是有区别的，不知道各位小伙伴清楚不？

在项目中使用组件

复制代码

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text>好久没有学习小程序了 </text>
			<text class="title">{{title}}</text>
		</view>
		
		
		<!-- 按钮 -->
		<up-button type="primary" text="确定"></up-button>
		<up-button type="primary" :plain="true" text="镂空"></up-button>
		<up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button>
		<up-button type="primary" :disabled="disabled" text="禁用"></up-button>
		<up-button type="primary" loading loadingText="加载中"></up-button>
		<up-button type="primary" icon="map" text="图标按钮"></up-button>
		<up-button type="primary" shape="circle" text="按钮形状"></up-button>
		<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
		<up-button type="primary" size="small" text="大小尺寸"></up-button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const disabled = ref(true);

</script>

<style lang="scss">

</style>

uview-plus

用了下uview-plus，体验的话，是比较糟糕的，还要看广告。看广告其实也可以理解。

关键是组件在网页版没有办法看实际的效果，这个最让人难受的。

如果大家有其他好的组件库的话，欢迎分享出来