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开发体验，打造出更加优秀的跨平台应用。本文若有错误的地方，欢迎大家来互相交流鸭~

相关推荐
断墨先生1 小时前
uniapp—android原生插件开发（3Android真机调试）
android·uni-app
guai_guai_guai3 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~8 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端12 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86812 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦20 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
移民找老国1 天前
加拿大移民新风向
java-ee·maven·phpstorm·visual studio code·nio
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解