uniapp+vue3 setup+ts 开发小程序实战（UI 组件篇）-灵析社区

为了方便快速进行业务功能开发，通常会使用到第三方UI组件库。经过调研，发现以下三个UI组件库较为成熟，并可以在uniapp vue3框架下微信小程序中正常使用，它们之间的优缺点见如下：

| | 优点 | 缺点 | 文档地址 | | --- | --- | --- || --- | |uni-ui| uniapp官方拓展组件库，组件数量丰富，高性能，跨平台;支持easycom自动引入使用到的组件 | 部分组件UI美观度欠佳 | 点击打开| |weui| 微信小程序官方拓展组件库，视觉体验与微信保持一致; 支持dark mode| 组件数量较少，更新迭代慢 | 点击打开| |vant-ui| 组件数量较为丰富，并提供一些开箱即用的复杂组件，如分享面板、侧边导航组件;支持主题定制，文档友好;社区活跃更新维护迭代快 | / | 点击打开|

这里指的一提的是，uniapp下还有个优秀的跨平台UI组件库：uview。但可惜的是目前并不兼容uniapp vue3，暂时无法使用。

至于实际项目需要使用哪个UI框架，大家可以自己需求选择判断。接下来分别介绍这三个UI组件库的引入使用方法：

引入uni-ui

安装

npm i @dcloudio/uni-ui

配置easycom

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

何为easycome？简单理解就是按需引入组件，打包后会自动剔除没有使用的组件,详情点击这里

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },
  "pages": []
}

在 template 中使用组件

<uni-badge text="1"></uni-badge>

引入weui

由于是微信“亲儿子”，weui有特有的通过 useExtendedLib 扩展库的方式引入，这种方式引入的好处是不会计入代码包大小。但是经过测试，uniapp 不支持该方式引入，若通过该方式引入组件，虽然页面上可能显示正常，但是会在编译时丢失传入组件的属性，也就是无法修改组件属性。

经查，uniapp微信小程序组件必须放在src -> wxcomponents目录下。

也就是说，我们需要将weui组件手动放入到wxcomponents目录下。步骤如下：

首先我们需要获取到weui组件，然而github仓库并没有打包好供直接引入使用的组件，这时我们可以在微信开发者工具新建一个项目，接着在该目录下先

npm init -y

接着

npm i weui-miniprogram -S

安装好之后，我们点击上面的工具->构建npm

接着就能看到新增了miniprogram_npm目录，我们将该目录下的weui-miniprogram拷贝到我们的uniapp项目目录下，也就是上面说的src -> wxcomponents， 并重新命名为weui

接着我们在使用到的页面中需要手动引入组件，例如引入搜索框组件，修改pages.json：

  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "usingComponents": {
          "mp-searchbar": "/wxcomponents/weui/searchbar/searchbar"
        }
      }
    },
  ]

在 template 中使用组件

<template>
    <mp-searchbar
      :value="search"
      @input="searchInput"
    ></mp-searchbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const search = ref('')

function searchInput(e) {
  search.value = e.detail.value
}
<style lang="scss">

运行效果：

引入vant-ui

同样的方式，我们需要获取到组件代码，点击vant-ui github仓库地址，将dist目录拷贝到wxcomponents文件夹下，并重新命名为vant。

pages.json中引入

接着我们在pages.json中手动引入使用到的组件，如引入button：

  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "usingComponents": {
          "van-button": "/wxcomponents/vant/button/index",
        }
      }
    },
 ]

开启js编译ES5

要注意的，这里我们需要到本地设置中开启js编译ES5，否则会报错。

在 template 中使用组件

<van-button type="default" @click="">默认按钮</van-button>

注意事项

这种组件源码引入的方式，uniapp在编译后的dist目录下生成的文件，并不会像uni-ui通过easycome方式引入自动剔除没有使用到的组件。不过不要紧，微信开发者工具给我们提供了过滤没有使用到文件的功能。点击右上角的详情，切换本地设置选项，然后把“上传时过滤无依赖文件”勾选上：

接着我们点击预览，可以看到提示自动过滤了无依赖文件

引入tailwind.css

关于tailwind.css

tailwind.css在爆火之初，不乏许多批评反对的声音，然而现在从star数来看，相信这种纯类名编写样式的写法已经被许多人接受&项目引入使用。

其中我觉得很重要的一个原因正如官网的对其的描述：

通常我们在编写页面样式时，分两个步骤：编写类名 + 跳转到编写样式区

其中编写类名尤其让人头疼，要想写好类名每次还要花一定时间思考类名到底应该叫什么，不同英语水平的人最终导致编写的类名“百花齐放”。

跳转到编写样式区就同样让开发体验不佳，尤其是在.vue单文件文件中，样式往往都是写在最底部，修改样式需要反复横跳。（虽然.vue文件在vscode可以一键拆分三个区域，但是依旧有痛点：一是视线依旧需要离开html，二是在笔记本小屏幕中开发这种拆分显示区域过小，通常不会拆分窗口）

vue3 compistion组合式api的写法，带来的很大开发体验优势就是不用像之前那样写在固定地方，导致代码量大的情况下查找需要反复横跳，这么一看，是不是感觉它们之间有异曲同工之妙呢？

阅读量：2070

点赞量：0

收藏量:0