uniapp组件库uview-ui的使用

1、uView的认识

使用uView有哪些好处呢

• 平台兼容性：uView UI 针对不同的 UniApp 支持的平台（如微信小程序、App 等）进行了优化和适配，可以确保在各个平台上的组件保持一致性和兼容性。
• 更新和维护：uView UI 的版本更新能及时更新最新的功能和修复 bug

我们看看uniapp官方给我们的提示：

🍌 官方介绍
uView UI
是全面兼容nvue的uni-app生态框架
全面的组件和便捷的工具会让您信手拈来，如鱼得水。

官网的相关地址

uviewui.com

2、安装uView

vue2项目建议使用uview-UI

vue3项目建议使用uview-plus

因为vue3使用的是
uview-plus(uiadmin.net/uview-plus)
(https://uiadmin.net/uview-plus/)

（1）首先，我们需要在我们的依赖之中安装 uView UI

yarn add uview-ui

// 或者使用下面这个 
yarn add uview-ui@2.0.36

这里你如果你已经安装并且使用了这个ui组件库，这里我们可以看到，官方也给我们提供了一个监测版本的代码

版本查询

我们可以简单打印一下查看一下我们本地的版本

// 通过`console.log`打印的形式
console.log(uni.$u.config.v);

// 可以查阅uView的配置文件得知当前版本号，具体位置为：
/uview-ui/libs/config/config.js

当然，也可以直接在我们的依赖文件夹进行查看，这边可以看到我们的依赖已经安装成功了这会！

（2）导入并注册 uView UI

接下来我们在项目的入口文件 main.js（或 main.ts）中导入 uView UI 并注册

import Vue from 'vue';
import App from './App.vue';
import uView from 'uview-ui';

Vue.use(uView);

const app = new Vue({
  ...App
});

app.$mount();

（3）在我们的页面之中简单使用 uView UI 组件试试，看我们是否生效

这里我就选择了首页作为简单的尝试

扩展组件的使用

uni-icons的使用

官方的地址：

https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html

在插件市场选择导入，然后确认

选择我们想要导入的项目地址，直接确定

uni-datetime-picker 日期选择器的使用

在插件市场选择导入，然后确认

选择我们想要导入的项目地址，直接确定

下载完毕以后，这里日志会有一个提示

直接页面之中使用

<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />

引入对应的参数和方法

const datetimesingle= ref('');

const changeLog = (e) => {
         console.log('change事件:', e);
}	

然后我们预览一下，现在效果已经出来了！

点击确认，这里我们已经拿到了我们的时间

change事件:2024-08-15 11:01:43

接下来就可以进行其他的操作了 !

3、问题处理

（1） uview显示位置处理

这里运行以后显示我们页面错误，我们查看处理一下。

这里报错：Vue.filter is not a function

这里我猜测是我写的位置不正确，我们稍微改一下然后查看一下效果！

这边我们更改了位置以后报错已经消失了，但是我们的uview好像也没有生效！

这里我们换一个卡片部分的样式进行尝试一下

这边我们可以看一下正常的应该是什么样子

然后我们放到文章之中尝试：

<uni-section title="自定义卡片内容" type="line">
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar" >
        <template v-slot:title>
<uni-list>
        <uni-list-item :show-switch="true" title="自定义标题"/>
</uni-list>
</template>
<image style="width: 100%;" :src="cover"></image>
<text class="uni-body uni-mt-5">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
<view slot="actions" class="card-actions">
<view class="card-actions-item" @click="actionsClick('分享')">
        <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
        <text class="card-actions-item-text">分享</text>
</view>
<view class="card-actions-item" @click="actionsClick('点赞')">
        <uni-icons type="heart" size="18" color="#999"></uni-icons>
        <text class="card-actions-item-text">点赞</text>
</view>
<view class="card-actions-item" @click="actionsClick('评论')">
        <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
        <text class="card-actions-item-text">评论</text>
</view>
        </view>
</uni-card>
</uni-section>

这边我们可以看到并未生效

setConfig配置uview-ui

这边我思考了一下，感觉很有可能是我的配置没有配置官方建议的setConfig的方式，这边我们进行一下更改！

uni.$u.setConfig({
// 修改$u.config对象的属性
config: {
        // 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
        unit: 'rpx'
},
// 修改$u.props对象的属性
props: {
        // 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
        radio: {
                size: 15
        }
        // 其他组件属性配置
        // ......
}
})

尝试以后：没有效果！

配置SCSS

查看官网可以发现，uView 依赖 SCSS，您必须要安装此插件，否则无法正常运行。

接下来我们就尝试安装一下这些依赖试试

yarn add sass -D 
yarn add sass-loader@10.1.1 -D
yarn add @dcloudio/uni-ui

这里我们先运行看看，这边可以看到我们的报错已经解决了

这边我们可以看到，没有任何的问题出现，接下来我们尝试使用一下，先随意丢个骨架屏进去看看效果

<template>
	<up-skeleton
	    rows="3"
	    title
		loading
	></up-skeleton>
</template>

没有效果，这里我们再配置一下相关需要的东西

yarn add dayjs
yarn add clipboard

配置easycom

再次运行项目，依旧报错，那么我们尝试配置一下 easycom

查看官网可以发现，我们需要去配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

在pages.json中配置easycom组件模式

{
        "easycom": {
                // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
                "custom": {}
        },
        // 此为本身已有的内容
        "pages": []
}

这里还是没生效，然后清理缓存，关闭项目，重新下载依赖，再次启动，ok!

再次跑一下我们项目！OK,愉快的开发吧！