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

相关推荐
鸭子嘎鹅子呱12 小时前
uniapp使用高德地图设置marker标记点,后续根据接口数据改变某个marker标记点,动态更新
uni-app·map·高德地图
计算机源码社17 小时前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp（源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
Angus-zoe20 小时前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app
Pluto & Ethereal20 小时前
uni-app尺寸单位、flex布局于背景图片
uni-app
天空下sky1 天前
uniapp+若依 开发租房小程序源码分享
uni-app
帅过二硕ฅ1 天前
uniapp点击跳转到对应位置
前端·javascript·uni-app
佩淇呢1 天前
uniapp vue3 梯形选项卡组件
前端·vue.js·uni-app
[廾匸]2 天前
uni-app获取设备唯一值、静态IP以及公网IP的方法
uni-app·ip·imei·唯一值
luckycoke2 天前
小程序的右侧抽屉开关动画手写效果
前端·javascript·微信小程序·uni-app
微刻时光2 天前
好课程：uni-app实战音频小说app小程序
小程序·uni-app
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习