Uniapp组件库uView的使用

222000128邓雨红 2023-06-04 23:19:14

这个作业属于哪个课程	软件工程-23年春季学期
这个作业的要求在哪里	软件工程实践总结&个人技术总结
这个作业的目标	课程回顾与总结、个人技术总结
其他参考文献	《构建之法》

一、技术总结

1.技术概述

1.1 使用场景

使用uniapp进行前端编写，快速生成所需要的组件

1.2 学习原因

uView 提供了丰富的组件和功能，涵盖了常见的界面元素、布局组件、表单组件、操作反馈组件等，满足了移动端应用开发中的各种需求。
uView 还提供了完善的文档和示例代码，帮助开发者快速上手和了解各个组件的使用方法。

1.3 技术难点

学习曲线：对于初次接触 uView 的开发者来说，需要花费一些时间去了解其整体架构、组件和API的使用方式。
配置复杂性：uView 在提供丰富的组件和功能的同时，也带来了一些配置的复杂性。需要理解和配置各种 uView 的配置项、样式变量和主题设置，以及与 Vue 项目的整合和构建过程中的一些配置细节。
文档和资源相对较少：相比于一些主流的 UI 框架，uView 的文档和资源相对较少。在遇到问题或需要深入了解某些特定功能时，可能需要花费一些额外的精力去查找和理解相关的文档和示例代码。
社区支持有限：相对于一些成熟的 UI 框架，uView 的社区支持相对有限。因此，在遇到问题或需要寻求帮助时，可能需要依赖官方文档和一些官方社区提供的资源，而无法像一些大型社区那样获得更多的交流和解决方案。

2.技术详述

2.1 安装与配置

关于SCSS
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。
如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的工具->插件安装中找到"scss/sass编译"插件进行安装，如不生效，重启HX即可

引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。

// pages.json
{
    // 如果您是通过uni_modules形式引入uView，可以忽略此配置
    "easycom": {
        "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

2.2 使用方法

通过npm和下载方式的配置之后，在某个页面可以直接使用组件，无需通过import引入组件。

<template>
    <u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    text: '点赞',
                    color: 'blue',
                    fontSize: 28
                }, {
                    text: '分享'
                }, {
                    text: '评论'
                }],
                show: true
            }
        }
    }
</script>

2.3 项目中如何使用该技术

简单提及如何使用Uview制作标签页
- 在使用上方方法之后，在页面中直接应用Tabs组件
  绑定的标签页list,即标签数组
Tabs涉及属性
Tabs涉及事件

3.技术使用中遇到的问题和解决过程

问题描述： 按照文档配置之后，标签页无法正常进行页面之间的切换

解决过程：

1.首先，为该组件绑定当前选中标签的索引current属性

2.设置页面载入时默认选中的标签

3.设置点击标签时触发的函数click

4.编写点击函数tabChange，点击时将标签对应索引改变为点击的标签
（注意是index的属性index，编写时查找了大部分教程都是index，传入的index参数并不是对应的索引值）

5.对应模块对应标签索引，使用v-if判断显示，达到切换效果

4.总结

本次使用uview极大的方便了界面编写，现有的组件能够直接使用，可以减少一些原生css开发带来的排版烦恼，但是与此同时，组件都是现成写好的，可能有时候组件排版与自己预想的在自己页面上的效果不符，这时候要调整就比较麻烦了，需要去修改原本的组件，毕竟不是自己写的，修改是十分复杂和困难的，容易导致组件崩溃或者怎么改都没有效果。
该组件库并不是完美的，使用的时候官网给的教程往往都是简单的举例，一般动态的组件都需要自己寻找其他教程学习，学习过程也可能出bug，耗费大量时间，只能说组件有利有弊，并不是所有的界面元素都需要使用组件库。