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

卡尔特斯
3,259 阅读4分钟

一、简介

二、使用云端插件

  • 在 uni原生插件市场 找一个插件 DCloud-RichAlert，点击 购买云打包，要求填入的包名，例如 com.dzm.test。

    image.png

    image.png

  • 在购买弹出的项目列表中，如果没有找到当前项目，可能是没有注册 uniapp应用标识，可以到 manifest.json 的基础配置中点击重新获取，可以申请到，有了之后再重新去点击购买就可以找到了。

    image.png

  • 购买绑定好后，就可以在 选择云端插件 中勾选使用了。

    image.png

  • 然后就看下面的 八、打包自定义基座，及插件如何使用。

三、本地插件使用

  • 本地插件 分为两种情况

    • 方式一：

      在 uni原生插件市场 免费的插件详情页中点击 下载for离线打包 下载原生插件（zip 格式），解压到 HBuilderX 的 uni-app 项目下的 nativeplugins 目录（如不存在则创建）。以下是 DCloud-RichAlert 插件举例，进入后点击 下载离线打包。

      下载解压后，放入项目中后，目录结构如下：

    • 方式二：

      开发者自己开发 uni-app 原生插件，，参考 uni-app原生插件格式说明文档。 按图上的格式配置到 uni-app 项目下的 nativeplugins 目录。

  • 导入后，在配置中的本地插件中勾选上该插件

    image.png

  • 然后就看下面的 八、打包自定义基座，及插件如何使用。

八、打包自定义基座

  • 附：进阶学习：Uniapp Android 本地离线打包（详细流程）、Uniapp Android 离线生成自定义基座（详细流程），但是插件不支持这个离线打包基座，还是得走 云打包基座，有兴趣的时候学下就行。

  • 插件增删都需要重新打包自定义基座，通过标准基座运行是无法生效的，会报错找不到哦。

  • 重要：目前无论是本地插件还是云端插件，都只支持 云打包的基座 运行，离线打包基座也是无法运行出来效果的，只能走 云打包 流程，运行后才能看到插件的效果。

    但有一种情况可以使用离线基座，那就是在开发原生插件的时候使用官方提供的 UniPlugin-Hello-AS 工程，它打包的离线基座可以运行出来插件的效果，但仅限于开发中的，也就是有源码在的这个插件工程里面的。如果这都不能运行，插件都没法开发了。而离线打包的工程 HBuilder-Integrate-AS 则不行，只能走云打包基座。

  • 基座的打包方式顶部有文章介绍，另外，配置打包信息时，如果没有广告配置，可以将下面的广告配置关掉，默认是勾选的。这里是通过 云打包 来做的自定义基座，云打包要排队，但是没的选，用了插件目前只能走 云打包。

    image.png

    image.png

    打包好的基座存放在这里：

    image.png

    image.png

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

    image.png

    image.png

九、如何使用插件

  • 使用云插件 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>

    image.png

  • 然后重新运行或热更新后都能看到效果

    image.png

十、自制原生插件（需要 Android、iOS 原生开发经验）

avatar
文章
阅读
粉丝