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

一、简介

• uniapp 基座、标准基座、自定义基座；传统打包、快速安心打包的区别。

• 原生插件文档，文档写的很详情，主要支持两种方式：本地插件、云端插件。

  

• 本地插件、云端插件 都只能 只能使用自定义基座 来看效果，每次增删插件都必须要重新打包基座，其实就是将第三方包解析嵌入到包内，然后本地修改的内容跟包内的内容结合达到热更新效果，也能实时看到最新效果。

二、使用云端插件

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

  

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

  

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

  

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

三、本地插件使用

• 本地插件 分为两种情况

  • 方式一：

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

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

    

  • 方式二：

    开发者自己开发 uni-app 原生插件，原生插件开发完成后按指定格式压缩为 zip 包，参考uni-app原生插件格式说明文档。 按上图的格式配置到 uni-app 项目下的 nativeplugins 目录。

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

  

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

八、打包自定义基座

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

• 基座的打包方式顶部有文章介绍，另外，配置打包信息时，如果没有广告配置，可以将下面的广告配置关掉，默认是勾选的。这里是通过 云打包 来做的自定义基座，如果会本地打包也是可以的实现的，云打包要排队，本地打包不需要排队。

  

  

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

  

  

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

  

  

• 使用云插件 DCloud-RichAlert：

  1、在 vue 页面或 nvue 页面引入这个原生插件，不是放顶部引入哦，是放 onLoad 之类的生命周期中引入，可以定义一个属性接收。

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

  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)
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

  

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

  

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

• 下面会自制一个简单的插件作为流程学习。

• Uniapp 自制 Android 原生插件详细流程【待定】

• Uniapp 自制 iOS 原生插件详细流程【待定】