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模板网!

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

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

相关文章

  • 单点登录的三种方式

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

    2024年02月15日
    浏览(50)
  • 验证合约的三种方式

    使用truffle插件: https://github.com/rkalis/truffle-plugin-verify truffle run verify 合约名称@合约地址 --network 网络名称 --debug 注意:需要开启VPN,然后给CMD也设置代理,否则CMD无法访问外网会验证失败 (每次新开CMD都要执行) 在etherscan上手动上传 1、合约文件如果有导入的外部合约,需

    2023年04月22日
    浏览(56)
  • 解决NPE的三种方式

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

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

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

    2024年02月06日
    浏览(43)
  • redis的三种集群方式

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

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

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

    2024年02月06日
    浏览(46)
  • 生成DLL的三种方式

    生成DLL的三种方式 1. 用命令行完成dll的新建与调用 2. 在VS中生成dll文件 首先需要cl编译器以及link连接器来完成后续操作。 新建一个dll_demo.cpp文件 ,此文件中的函数是我们想要封装成dll的函数。用写字板创建一个新的文件,文件名可自己选择(这里创建一个dll_demo),文件后

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

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

    2023年04月13日
    浏览(49)
  • Spring的三种异常处理方式

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

    2024年02月12日
    浏览(42)
  • 网络通信的三种方式

    通常指网络代理的一种工作模式,即将所有网络连接都通过代理服务器进行转发,而不管这些连接是否需要被代理。在全局模式下,所有的流量都会被代理服务器拦截和转发,因此可以实现对所有网络请求的监控和管理。全局模式通常用于需要访问受限资源或者需要对所有网

    2024年02月09日
    浏览(58)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包