Uniapp 原生插件的详细使用步骤（本地插件、云端插件、自制原生插件）

卡尔特斯

已于 2024-11-22 15:37:06 修改

阅读量1.8w

点赞数 29

分类专栏： UniApp Android iOS 文章标签： uni-app java 数据库

于 2024-01-10 11:15:33 首次发布

本文链接：https://blog.csdn.net/zz00008888/article/details/135498859

版权

Android 同时被 3 个专栏收录

54 篇文章

订阅专栏

iOS

30 篇文章

订阅专栏

UniApp

29 篇文章

订阅专栏

## 一、简介

uniapp 基座、标准基座、自定义基座；传统打包、快速安心打包的区别。
原生插件文档，文档写的很详情，主要支持两种方式：本地插件、云端插件。
本地插件、云端插件 都只能 只能使用自定义基座 来看效果，每次增删插件都必须要重新打包基座，其实就是将第三方包解析嵌入到包内，然后本地修改的内容跟包内的内容结合达到热更新效果，也能实时看到最新效果。

二、使用云端插件

在 uni原生插件市场找一个插件 DCloud-RichAlert，点击 购买云打包，要求填入的包名，例如 com.dzm.test。
在购买弹出的项目列表中，如果没有找到当前项目，可能是没有注册 uniapp应用标识，可以到 manifest.json 的基础配置中点击重新获取，可以申请到，有了之后再重新去点击购买就可以找到了。
购买绑定好后，就可以在 选择云端插件 中勾选使用了。
然后就看下面的 八、打包自定义基座，及插件如何使用。

三、本地插件使用

本地插件 分为两种情况
- 方式一：
  
  在 uni原生插件市场免费的插件详情页中点击 下载for离线打包 下载原生插件（zip 格式），解压到 HBuilderX 的 uni-app 项目下的 nativeplugins 目录（如不存在则创建）。以下是 DCloud-RichAlert 插件举例，进入后点击 下载离线打包。
  
  下载解压后，放入项目中后，目录结构如下：
- 方式二：
  
  开发者自己开发 uni-app 原生插件，，参考 uni-app原生插件格式说明文档。按图上的格式配置到 uni-app 项目下的 nativeplugins 目录。
导入后，在配置中的本地插件中勾选上该插件
然后就看下面的 八、打包自定义基座，及插件如何使用。

八、打包自定义基座

附：进阶学习：Uniapp Android 本地离线打包（详细流程）、Uniapp Android 离线生成自定义基座（详细流程），但是插件不支持这个离线打包基座，还是得走 云打包基座，有兴趣的时候学下就行。
插件增删都需要重新打包自定义基座，通过标准基座运行是无法生效的，会报错找不到哦。
重要：目前无论是本地插件还是云端插件，都只支持 云打包的基座 运行，离线打包基座也是无法运行出来效果的，只能走 云打包 流程，运行后才能看到插件的效果。

但有一种情况可以使用离线基座，那就是在开发原生插件的时候使用官方提供的 UniPlugin-Hello-AS 工程，它打包的离线基座可以运行出来插件的效果，但仅限于开发中的，也就是有源码在的这个插件工程里面的。如果这都不能运行，插件都没法开发了。而离线打包的工程 HBuilder-Integrate-AS 则不行，只能走云打包基座。
基座的打包方式顶部有文章介绍，另外，配置打包信息时，如果没有广告配置，可以将下面的广告配置关掉，默认是勾选的。这里是通过 云打包 来做的自定义基座，云打包要排队，但是没的选，用了插件目前只能走 云打包。

打包好的基座存放在这里：
基座打包好后，在 HBuilderX 菜单的 运行 中将自定义基座运行到手机上，运行的基座也是支持热更新哦。

九、如何使用插件

使用云插件 DCloud-RichAlert，在 vue 页面或 nvue 页面引入这个原生插件，不是放顶部引入，是放 onLoad 之类的生命周期中引入，可以定义一个属性接收：

<template>
    <view class="content">
        <text class="title">{{ title }}</text>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: 'DCloud-RichAlert 本地调试'
        }
    },
    onLoad() {
        // 导入插件
        const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
        // 调用显示
        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)
        })
    },
    methods: {

    }
}
</script>

<style>
</style>