uni-app中的uni.requireNativePlugin()

这个方法是用来引入原生插件的方法,自 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官网

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uni-app ,可以通过 Native.js 实现安卓本地通知,具体步骤如下: 1. 在 App.vue 文件,监听应用启动事件,调用 Native 模块的 startForeground 方法开启前台服务: ```javascript export default { onLaunch() { const nativeModule = uni.requireNativePlugin("NativeModule"); nativeModule.startForeground(); } } ``` 2. 在 Native 模块,实现 startForeground 方法,并在该方法创建通知渠道和通知: ```javascript const Context = require("@android/context"); const Notification = require("@android/app/Notification"); const NotificationManagerCompat = require("@android/app/NotificationManagerCompat"); const NotificationChannel = require("@android/app/NotificationChannel"); function startForeground() { const service = getContext().getService(); const channel = new NotificationChannel("channel_id", "channel_name", NotificationManagerCompat.IMPORTANCE_HIGH); const notificationManager = NotificationManagerCompat.from(Context); const notification = new Notification.Builder(Context, "channel_id") .setSmallIcon(android.R.drawable.ic_dialog_info) .setContentTitle("Foreground Service") .setContentText("Service is running in foreground") .build(); service.startForeground(1, notification); } ``` 3. 在 Native 模块,实现 showNotification 方法,用于创建本地通知: ```javascript function showNotification(title, content) { const notificationManager = NotificationManagerCompat.from(Context); const notification = new Notification.Builder(Context, "channel_id") .setSmallIcon(android.R.drawable.ic_dialog_info) .setContentTitle(title) .setContentText(content) .build(); notificationManager.notify(1, notification); } ``` 其,第一个参数为通知的 ID,第二个参数为 Notification 对象。 4. 在 App.vue 文件,调用 Native 模块的 showNotification 方法创建本地通知: ```javascript export default { methods: { showLocalNotification() { const nativeModule = uni.requireNativePlugin("NativeModule"); nativeModule.showNotification("Local Notification", "This is a local notification"); } } } ``` 这样就可以通过 Native.js 实现安卓本地通知了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值