uni-app插件篇：让你的开发更轻松愉快

彼日花2023-11-02 11:39

前言

在当今快速发展的移动互联网时代，跨平台应用开发已成为众多开发者追求的目标。而uni-app作为一款基于Vue.js框架的跨平台应用开发解决方案，凭借其简洁、高效的特点，吸引了越来越多的开发者关注。然而，仅仅掌握uni-app的基本技能并不足以应对日益复杂的项目需求。为了提高开发效率、降低开发难度，插件应运而生。

本文将为您推荐在使用 Vite 构建的uni-app项目中使用的插件，小编这里使用的是vscode开发，希望通过本文的学习，您能够更好地利用插件提升uni-app开发体验，打造出更加优秀的跨平台应用。

常用推荐

unplugin-auto-import

按需自动导入API，适用于Vite、Webpack、Rspack、Rollup和esbuild。支持TypeScript。由unplugin提供支持。

没有使用插件

csharp 复制代码 
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

使用插件后

ini 复制代码 
const count = ref(0)
const doubled = computed(() => count.value * 2)

具体实现

安装插件

js 复制代码 
npm i -D unplugin-auto-import

然后找到 vite.config.ts 复制粘贴以下代码即可

vite.config.ts 复制代码 
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
  plugins: [
    //自动引入vue和uni-app的api
    AutoImport({
      imports: ["vue", "uni-app"],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      dts: "src/auto-import.d.ts",
      // 自动生成'eslintrc-auto-import.json'文件，在'.eslintrc.cjs'的'extends'中引入解决报错
      eslintrc: {
        enabled: true,
      },
    })
  ]
});

UnoCSS

UnoCSS 是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。

安装依赖

js 复制代码 
npm install -D unocss@0.53.6 unocss-preset-weapp

创建unocss.config.ts

有关unocss的配置，大家具体可以去官方查看 配置文件

在根目录下创建unocss.config.ts可以配置unocss相关，在配置中增加前缀uno-防止与tmui等自带的类名冲突，配置文件如下

ts 复制代码 
import presetWeapp from "unocss-preset-weapp";
import {
  extractorAttributify,
  transformerClass,
} from "unocss-preset-weapp/transformer";
import { defineConfig } from "unocss";

// 可以写属性会自动增加class,也可以写class
const prefix = "uno-";
const { presetWeappAttributify, transformerAttributify } = extractorAttributify(
  { classPrefix: prefix }
);

export default defineConfig({
  presets: [
    presetWeapp({ prefix }),
    presetWeappAttributify(),
  ],
  shortcuts: [
    {
      "uno-center": "uno-flex uno-justify-center uno-items-center",
    },
  ],
  transformers: [
    transformerAttributify(),
    transformerClass(),
  ],
});

使用

官方提供了交互式文档 UnoCSS Interactive Docs，初学者可以前去查阅相关命名方法

vue 复制代码 
<template>
  <view class="uno-bg-pink uno-rd-10 uno-h-100 uno-w-100 uno-ml-10"></view>
</template>
<script setup></script>
<style lang="scss"></style>

以上代码的效果如图

Ano UI

Ano UI 一个基于 Vue.js 的 UnoCSS UI 库，允许你制作漂亮的小程序。它包括一整套预构建组件，开箱即可用于生产。

安装

js 复制代码 
npm install ano-ui 
npm install -D unocss@0.53.6 @iconify-json/tabler unocss-applet

配置

还是在unocss.config.ts中配置，没有这个文件的先创建，再将以下代码复制粘贴上去 这里是默认 安装配置过了unocss，所以此配置文件是在此基础上增加 ano-ui配置项

ts 复制代码 
import presetWeapp from "unocss-preset-weapp";
import {
  extractorAttributify,
  transformerClass,
} from "unocss-preset-weapp/transformer";
import { defineConfig, presetIcons } from "unocss";
import { presetApplet, presetRemRpx, transformerApplet } from "unocss-applet";
import { presetAno } from "ano-ui";
// 可以写属性会自动增加class,也可以写class
const prefix = "uno-";
const { presetWeappAttributify, transformerAttributify } = extractorAttributify(
  { classPrefix: prefix }
);

export default defineConfig({
  presets: [
    presetWeapp({ prefix }),
    presetWeappAttributify(),
    //以下是ano-ui配置
    presetApplet(),
    presetRemRpx(),
    presetIcons({
      scale: 1.2,
      extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
      },
    }),
    presetAno(),
  ],
  shortcuts: [
    {
      "uno-center": "uno-flex uno-justify-center uno-items-center",
    },
  ],

  transformers: [
    transformerAttributify(),
    transformerClass(),
    // ano-ui配置
    transformerApplet(),
  ],
});

使用

你可以前往官方的组件库文档查阅你所想要的组件使用方式 点击前往

以头像组件(Avatar)为例

vue 复制代码 
<template>
  <view>
    <AAvatar :src="image" size="large" class="uno-ml-10" />
  </view>
</template>
<script setup>
const image = "https://pic2.imgdb.cn/item/644bf4470d2dde5777abf840.webp";
</script>
<style lang="scss"></style>

效果如下

uCharts

uCharts 是一款基于 canvas API 开发的适 用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台。

安装

① 下载ucharts

拉取ucharts

bash 复制代码 
git clone https://gitee.com/uCharts/uCharts.git

你还可以访问官网 下载，或者点击此链接下载

② 复制到自己项目

找到 qiun-data-charts(非uni_modules) 这个路径下

（注：由于我使用的是vscode开发，所以我这里选择的是非uni_modules版本） 打开该项目 components 目录，做以下操作

  1. 复制该目录下 static 文件夹到自己项目的 static 目录中
  2. 将该目录其他文件直接原样复制到您项目中的 components 目录（其中test-charts文件夹可删除）

③ easycome配置

找到 page.json 文件，添加easycome配置项

json 复制代码 
 "easycom": {
    "autoscan": true,
    "custom": {
      "^qiun-(.*)": "@/components/qiun-$1.vue"
    }
  },

使用

官方提供了许多现成的图表，大家可以自行前往调试使用（附：链接）

这里使用官方的案例，代码如下：

vue 复制代码 
<template>
  <qiun-title-bar title="渐变色曲线区域图" />
  <view class="charts-box">
    <qiun-data-charts
      type="column"
      :opts="opts"
      :chartData="chartsDataColumn1"
    />
  </view>
</template>
<script setup>
const chartsDataColumn1 = ref({
  categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
  series: [
    {
      name: "目标值",
      data: [35, 36, 31, 33, 13, 34],
    },
    {
      name: "完成量",
      data: [18, 27, 21, 24, 6, 28],
    },
  ],
});
const opts = ref({
  color: [
    "#FAC858",
    "#EE6666",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    column: {
      type: "group",
      width: 20,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      linearType: "custom",
      seriesGap: 5,
      linearOpacity: 0.5,
      barBorderCircle: true,
      customColor: ["#FA7D8D", "#EB88E2"],
    },
  },
});
</script>
<style lang="scss">
.charts-box {
  width: 100vw;
  height: 320px;
}
</style>

效果如图:

uview-plus 3.0

uview-plus，是全面兼容nvue的uni-app生态框架，适用于vue3的小程序组件

下载

css 复制代码 
npm install uview-plus
npm i sass -D
// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

配置

在项目 src 目录中的 main.js 中，引入并使用uview-plus的JS库，注意这两行要放在 const app = createSSRApp(App) 之后。

主文件引入

main.js 复制代码 
// main.js
import uviewPlus from 'uview-plus'
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}

App.vue引入uview-plus基础样式

App.vue 复制代码 
/* uni.scss */
@import 'uview-plus/theme.scss';

(在 App.vue 中 首行 的位置引入，注意给style标签加入lang="scss"属性)

配置easycom组件模式

json 复制代码 
// pages.json
{
	"easycom": {
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
                  "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

总结

本文为您推荐了一些实用的uni-app插件，并提供了详细的安装和使用教程。通过合理地使用这些插件，您可以大大提高uni-app开发效率，降低开发难度。

希望本文的学习能够帮助您更好地利用插件提升uni-app开发体验，打造出更加优秀的跨平台应用。本文若有错误的地方，欢迎大家来互相交流鸭~

相关推荐
veminhe2 分钟前
uni-app使用组件button遇到的问题
uni-app·vue
m0_748240022 分钟前
uniapp跨平台开发---webview调用app方法
uni-app
407指导员26 分钟前
uniapp 微信小程序 页面部分截图实现
微信小程序·小程序·uni-app
变色龙云2 小时前
uni-app开发完成app上传OPPO认定为马甲包如何处理？
uni-app
用户480622604141517 小时前
使用uniapp开发微信小程序-框架搭建
微信小程序·uni-app
TttHhhYy19 小时前
uniapp+vue开发app，蓝牙连接，蓝牙接收文件保存到手机特定文件夹，从手机特定目录（可自定义），读取文件内容，这篇首先说如何读取，手机目录如何寻找
开发语言·前端·javascript·vue.js·uni-app
Funky_oaNiu19 小时前
uniapp实现按钮防重复点击（防抖）完整解决方案
uni-app
原克技术19 小时前
uniapp验证码
uni-app
web150850966412 天前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光2 天前
uniapp小程序样式穿透
前端·小程序·uni-app
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库