这个方法是用来引入原生插件的方法,自 HBuilderX 1.4 版本起,uni-app 支持引入原生插件,使用方式如下:
const PluginName = uni.requireNativePlugin(PluginName); // PluginName 为原生插件名称
引入插件的类型有三种:
- 内置原生插件:
内置原生插件,uni-app已默认集成,支持直接在内置基座运行。
仅在nvue页面,支持引入BindingX,animation, DOM.addRule等。
在vue页面,支持引入clipboard,storage,stream,deviceInfo等。
使用方式:可通过uni.requireNativePlugin
直接使用。
<template>
<view>
<text class="my-iconfont"></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官网