uni-app中的uni.requireNativePlugin()

news2024/10/5 13:03:25

这个方法是用来引入原生插件的方法,自 HBuilderX 1.4 版本起,uni-app 支持引入原生插件,使用方式如下:

const PluginName = uni.requireNativePlugin(PluginName); // PluginName 为原生插件名称

引入插件的类型有三种:

  1. 内置原生插件:

        内置原生插件,uni-app已默认集成,支持直接在内置基座运行。

        仅在nvue页面,支持引入BindingX,animation, DOM.addRule等。

        在vue页面,支持引入clipboard,storage,stream,deviceInfo等。

        使用方式:可通过uni.requireNativePlugin直接使用。

<template>
		<view>
			<text class="my-iconfont">&#xe85c;</text>	
		</view>
	</template>
	<script>
		export default{
			beforeCreate() {
				const domModule = uni.requireNativePlugin('dom')
				domModule.addRule('fontFace', {
					'fontFamily': "myIconfont",
					'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"
				});
			}
		}
	</script>
	<style>
		.my-iconfont {
			font-family:myIconfont;
			font-size:60rpx;
			color: #00AAFF;
		}
	</style>

2.本地插件

本地插件存放的位置为,uni-app项目nativeplugins目录(目录不存在则创建)下的原生插件。

步骤如下:

(1)获取本地原生插件,放在自己的项目中:

 将插件放到nativeplugins文件夹中

(2)配置本地原生插件

打开自己项目的manifest.json文件夹

上面两步操作完了之后就弹出这个框,选择需要的插件之后点击确定就可以了

 

 (3)开发调试本地原生插件

const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')//DCloud-RichAlert为插件的ID

(4)打包发布

使用自定义基座开发调试本地原生插件之后,不可以直接将自定义基座的APK作为正式版发布,应该重新打包成正式的。

3.云端插件

已经在插件市场绑定或者购买的插件,不需要下载插件到工程中,云打包时会直接合并并打包到原生APP中

(1)购买或者下载原生uni-app插件

(2)配置云端插件

 

 在这个选择框里选择需要的插件

(3)开发调试uni-app原生插件

在vue或者nvue页面引入原生插件,使用uni.requireNativePlugin的api,参数为插件的id。

1.在页面引入原生插件,uni.requireNativePlugin 使用后返回一个对象:

const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')

2.使用原生插件

dcRichAlert.show({
		position: 'bottom',
		title: "提示信息",
		titleColor: '#FF0000',
		content: "<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
		contentAlign: 'left',
		checkBox: {
			title: '不再提示',
			isSelected: true
		},
		buttons: [{
			title: '取消'
		}, {
			title: '否'
		}, {
			title: '确认',
			titleColor: '#3F51B5'
		}]
	}, result => {
		console.log(result)
	});

详情请前往uni-app官网:uni-app官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/784583.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(二)RabbitMQ【安装Erlang、安装RabbitMQ 、账户管理、管控台、Docker安装 】

Lison <dreamlison163.com>, v1.0.0, 2023.06.22 RabbitMQ【安装Erlang、安装RabbitMQ 、账户管理、管控台、Docker安装 】 文章目录 RabbitMQ【安装Erlang、安装RabbitMQ 、账户管理、管控台、Docker安装 】**安装Erlang**安装RabbitMQ账户管理管控台Docker安装RabbitM…

添加USB转串口设备驱动-迅为i.MX8M开发板

对于通过 USB 接口访问的模块&#xff0c;在 Linux 内核中集成 USB 驱动程序。我们需要配置内核选中支持 GSM 和 CDMA 模块的 USB 转串口驱动 > Device Drivers -> USB support (USB_SUPPORT [y]) -> USB Serial Converter support (USB_SERIAL [y]) -> USB driver…

Chrome 115 有哪些值得关注的新特性?

今天带大家一起来了解一下 Chrome 115 值得关注的新特性。 滚动动画 用滚动驱动的动画是网站上非常常见的用户体验模式&#xff0c;比如当页面向前或向后滚动时&#xff0c;对应的动画也会向前或向后移动。 比如下面图中这种比较常见的&#xff0c;页面顶部的进度条随着滚动…

Visual Studio 2022 从下载安装到如何使用的全面讲解 (图文详解)

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 &#x1f4cb; 前言&#x1f4ac; Visual Studio 2022 的介绍&#x1f4ad; Visual Studio 2022 的下载⌨️ 安装…

SPECjvm2008_1_01 openjdk8 x86_64 ARM64 运行时长、成绩 Run is valid, but not compliant

i5-9600k 架构&#xff1a; x86_64CPU 运行模式&#xff1a; 32-bit, 64-bitAddress sizes: 39 bits physical, 48 bits virtual字节序&#xff1a; Little Endian CPU: 6在线 CPU 列表&#xff1a; …

逻辑分析仪分析NEC协议

这里主要学习使用逻辑分析仪&#xff0c;记录一下。 这位兄弟讲得很清楚&#xff1a; https://blog.csdn.net/u013606261/article/details/112977378 这张图也不错&#xff0c;拿来用 这是淘宝上20多块钱的逻辑分析仪 录下的&#xff1a; HS0038B 这个红外一体化接收头&…

工业智能网关实现PLC控制柜实时监测,让污水泵站管理更加方便

随着工业经济与技术的不断发展&#xff0c;自动化控制技术在更多领域得到应用&#xff0c;在农村污水中&#xff0c;污水泵站作为重要的基础设施&#xff0c;其自动化程度直接影响到系统的运行效率&#xff0c;监控能力则影响到系统的运维质量。可编程逻辑控制器(PLC)作为一种实…

GB28181设备接入侧如何支持H.265?

技术背景 一直以来&#xff0c;GB28181-2022之前的规范版本让人诟病的一点&#xff1a;没有明确针对H.265的说明&#xff0c;特别是监控摄像机&#xff0c;H.265已然成为标配&#xff0c;GB/T28181-2022规范&#xff0c;终于针对H.265做了明确的说明&#xff0c;让我们来一起解…

MPAS模式教程

详情点击链接&#xff1a;最新MPAS跨尺度、可变分辨率模式应用及典型案例分析 前言 跨尺度预测模式&#xff08;The Model for Prediction Across Scales - MPAS&#xff09;是由洛斯阿拉莫斯实验室和美国国家大气研究中心(NCAR)共同开发&#xff0c;其由3个部分组成&#xff…

Opencv-C++笔记 (13) : opencv-图像卷积一(均值、中值、高斯、双边滤波)与 边缘处理

文章目录 一、概述图像滤波1.1、均值滤波1.2中值滤波1.3、高斯滤波1.4、双边滤波1.5、方框滤波 二、自定义掩码三、边缘处理四、Sobel算子五、Scharr算子六、拉普拉斯算子十、Canny算法 一、概述图像滤波 头文件 quick_opencv.h&#xff1a;声明类与公共函数 #pragma once #i…

深入理解线程池

一、线程池 1.1、线程池的优势 降低资源消耗。 通过重复利用已创建的线程降低线程创建和销毁造成的损耗 提高响应速度 当任务到达时&#xff0c;任务可以不需要等到线程创建就能立即执行 提高线程的可管理性 线程是稀缺资源&#xff0c;如果无限制的创建&#xff0c;不仅…

【雕爷学编程】Arduino动手做(82)---Mini MP3 Player播放器模块2

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

Keepalived热备、Keepalived+LVS、HAProxy监控及后端服务器健康检查、负载均衡调度器对比

day02 day02KeepAlived高可用集群配置高可用的web集群监控本机80端口&#xff0c;实现主备切换实现原理实施配置高可用、负载均衡的web集群配置高可用、负载均衡HAProxy配置haproxy负载均衡调度器比较LVS&#xff08;Linux Virtual Server&#xff09;NginxHAProxy KeepAlive…

C++将字符或程序运行的记录保存进txt

#include <iostream>#include <fstream>int main() {std::string path_ini "D:\\ookkk\\";std::ofstream os; //创建一个文件输出流对象os.open("log.txt");//将对象与文件关联std::cout << "helo" << std::endl;s…

Java数据列表分页查询算法

一个程序员一生中可能会邂逅各种各样的算法&#xff0c;但总有那么几种&#xff0c;是作为一个程序员一定会遇见且大概率需要掌握的算法。今天就来聊聊这些十分重要的“必抓&#xff01;”算法吧~其中数据库查询分页算法是每个后端开发者必备的算法技能。 一、前言 昨天复用了…

前端(十)——深入剖析 Vuex:Vue.js 应用的状态管理神器

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;深入研究vuex中的各种细节 文章目录 什么是vuexvuex的工作原理使用 Vuex 可以带来以下好处&#xff1a;集中式 vuex中的状态&#xff0c;它存储在哪里&#xff1f;如何改变&#xff1f;Vuex 和 Red…

成为“AI+的UGC社交平台”,亚马逊云科技助力博宇盖乐向“3D UGC社交门户”迈进

随着元宇宙浪潮逐渐升温&#xff0c;以玩家为主导的UGC游戏平台获得空前关注。多元化的视觉呈现方式&#xff0c;人人可参与、交互的玩法生态&#xff0c;具有UGC属性的游戏平台在极大提升玩家参与度、增加游戏趣味性的同时&#xff0c;也为游戏行业的内容创作带来了新的想象空…

SkyWalking链路追踪中Trace概念以及Trace与span的关系

基本概念 在SkyWalking链路追踪中&#xff0c;Trace&#xff08;追踪&#xff09;是指一个请求或者一个操作从开始到结束的完整路径。它涵盖了分布式系统中所有相关组件的调用关系和性能信息。 具体来说&#xff0c;Trace包含了一系列的span&#xff08;跨度&#xff09;&…

Godot 4 着色器 - Shader调试

我之前用OpenCV进行图像相关处理&#xff0c;觉得已经很不错&#xff0c;结合GDI可以实现流畅的动画效果 直到近来用Shader后才发现&#xff0c;着色器更上一层楼&#xff0c;原来这是入了GPU的坑 Shader编程限制很多&#xff0c;各种不支持&#xff0c;看在它性能不错功能炫…

曲线长度预测神经网络设计与实现

在本文中&#xff0c;我们使用深度神经网络 (DNN) 解决几何中的一个基本问题&#xff1a;曲线长度的计算。 我们从监督学习方法的示例中学习了几何属性。 由于最简单的几何对象是曲线&#xff0c;因此我们重点学习平面曲线的长度。 为此&#xff0c;重建了基本长度公理并建立了…