Uniapp接入插件的三种方式

这篇具有很好参考价值的文章主要介绍了Uniapp接入插件的三种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Uniapp接入插件的三种方式



前言

我这里的学习例子使用uni-badge这个插件,其他的插件也是类似的引入方式,大多数插件文档中也包含使用方法。


一、使用HBuilderX导入插件

提示:这个方法需要登录HBuilderX

1.找到所需插件

在插件市场找到自己所需插件,我举例插件为uni-badge。点击下载进入到具体插件页面,如下所示
Uniapp接入插件的三种方式

2.导入插件

点击【使用HBuilderX导入插件】按钮,然后选择需要导入的项目
Uniapp接入插件的三种方式
之后,自动生成uni_modules目录,并下载
Uniapp接入插件的三种方式

3.使用插件

直接就可以在页面中使用了
Uniapp接入插件的三种方式
效果如下:
Uniapp接入插件的三种方式

二、通过uni_modules单独安装插件

1.创建uni_module目录

我这边是没有创建uni-ui模块的,则需要现在自己项目下创建目录uni_module
Uniapp接入插件的三种方式

2.下载并安装插件

然后点击【下载插件ZIP】下载相应的组件,如图所示
提示:这个【下载插件ZIP】按钮需要在非登录状态下才能出现
Uniapp接入插件的三种方式
解压插件
Uniapp接入插件的三种方式
将components中的uni-badge目录直接复制到项目的uni_modules中

3.使用插件

可以直接在页面上使用了,无需另外的引用和注册组件
Uniapp接入插件的三种方式
效果如图
Uniapp接入插件的三种方式

三、通过components单独安装组件

1.创建components目录

在项目中创建components目录
Uniapp接入插件的三种方式

2.下载并安装插件

下载插件
Uniapp接入插件的三种方式
解压插件
Uniapp接入插件的三种方式
将components中的uni-badge目录直接复制到项目的components中

3.导入插件

假设 page-a.vue 页面需要用到 badge,则在 page-a.vue 的 script 节点下导入 badge 组件,如下:

import uniBadge from "@/components/uni-badge/uni-badge.vue"

4.定义插件

在 components 选项中定义 badge 组件,如下:

export default {  
    data() {  
        return { /* ... */ }  
    },  
    components: {  
        uniBadge  
    }  
}

提示:若从插件市场下载使用多个组件,则每个组件均需在 components 选项中定义,并以逗号分隔。

5.使用插件

使用组件
在 template 节点按照组件使用说明,调用组件并传值,如下:

<uni-badge text="1"></uni-badge>  
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>

效果如下

Uniapp接入插件的三种方式文章来源地址https://www.toymoban.com/news/detail-412836.html

到了这里,关于Uniapp接入插件的三种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 线程创建的三种方式

    目录 1. Thread类 2. Runnable接口 3. Callable接口 4. 线程的生命周期 新建  就绪 运行 阻塞 等待 结束 继承Thread类的方式创建线程 定义Thread类的子类,并重写该类的run()方法,该run()方法的方法体就代表了线程需要完成的任务 创建Thread类的子类,即创建了线程对象 调用线程对象的

    2024年02月09日
    浏览(42)
  • Servlet的三种映射方式

    Servlet支持三种映射方式,以达到灵活配置的目的。 首先先创建Servlet(创建方式略),然后再web.xml中就行配置。 配置方式:         (1)、 指名道姓的方式         注:此种方式,只有和映射配置一模一样时,Servlet才会接收和响应来自客户端的请求。 示例:         (

    2024年02月06日
    浏览(44)
  • 解决NPE的三种方式

    NullPointerException(空指针异常,NPE)是Java编程中常见的错误。解决NPE的方法可以从以下三个方面考虑: 明确处理空引用情况: 在某些情况下,无法避免使用可能为空的引用对象。此时,需要明确处理空引用情况,以避免抛出NPE。可以使用条件判断,例如使用if-else语句或者三

    2024年02月22日
    浏览(52)
  • 集合的三种遍历方式

    目录 文章目录 一.迭代器遍历 二.增强for遍历 三. forEach方法 四. Lambda表达式  函数式接口: 函数式接口是指只有一个抽象方法的接口 为什么Lambda只能用于函数式接口 总结 前言 作者简介:最爱吃兽奶 座右铭:抱怨身处黑暗,不如提灯前行 内容介绍:今天给大家讲一下集合的遍历方

    2024年02月06日
    浏览(43)
  • selenium的三种等待方式

    设置固定休眠时间,单位为秒。 由python的time包提供, 导入 time 包后就可以使用。 缺点:不智能,使用太多的sleep会影响脚本运行速度。 使用方法:time.sleep(delay) 使用举例:打开百度,强制等待5秒 (无条件等待,在一个时间段内等待) 一次设置,全局生效。 不要当作固定等待

    2023年04月13日
    浏览(47)
  • redis的三种集群方式

    redis有三种集群方式:主从复制,哨兵模式和集群。     1.主从复制   主从复制原理:   从服务器连接主服务器,发送SYNC命令;  主服务器接收到SYNC命名后,开始执行BGSAVE命令生成RDB文件并使用缓冲区记录此后执行的所有写命令;  主服务器BGSAVE执行完后,向所有从服务器

    2024年02月13日
    浏览(48)
  • 单点登录的三种方式

    因为一个项目种有多个服务组成,每个服务都是独立的,如果登录的时候在一个服务种,那么其他的服务是显示不了的,所以就有了单点登录。 所谓单点登录就是一处登录,处处登录。 第一种方式:session广播机制实现 第一种当时的的原理是session的复制,就是在多个服务中

    2024年02月15日
    浏览(49)
  • JavaScript的三种引用方式

    1.1、标签引用(或嵌入式) 使用 script 标签将 JavaScript 代码嵌入到 HTML 页面中。可以放置在 head 或 body 中。 显示效果: 1.2、 文件引用 (外链式) 将 JavaScript 代码编写在一个独立的 .js 文件中,并通过 script 标签的 src 属性引入到 HTML 页面中。 显示效果: 1.3、行内式 直接在

    2024年02月02日
    浏览(46)
  • Spring的三种异常处理方式

            异常分为编译时异常和运行时异常,编译时异常我们 try-cache 进行捕获,捕获后自行处理,而运行时异常是不 可预期的,就需要规范编码来避免,在SpringMVC 中,不管是编译异常还是运行时异常,都可以最终由 SpringMVC提供的异常处理器进行统一处理,这样就避免了

    2024年02月12日
    浏览(40)
  • 数据传输的三种方式

    在通信和计算机网络中,从通信资源的分配角度来看,“交换”就是按照某种方式动态地分配传输线路的资源。常用的数据传输方式有电路交换、报文交换、分组交换。 特点: 通信双方独占通信链路 优点: 数据传输时延小, 适用于实时通信 ;数据按序发送,不存在失序问

    2024年02月08日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包