小白教程

 找回密码
 立即注册

微信小程序 使用插件

发布者: 小白教程

使用插件

添加插件

在使用插件前,首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台,通过 appid 查找插件并添加。如果插件无需申请,添加后可直接使用;否则需要申请并等待插件开发者通过后,方可在小程序中使用相应的插件。

引入插件代码包

使用插件前,使用者要在 app.json 中声明需要使用的插件,例如:

代码示例:

{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx"
    }
  }
}

如上例所示, plugins 定义段中可以包含多个插件声明,每个插件声明以一个使用者自定义的插件引用名作为标识,并指明插件的 appid 和需要使用的版本号。其中,引用名(如上例中的 myPlugin)由使用者自定义,无需和插件开发者保持一致或与开发者协调。在后续的插件使用中,该引用名将被用于表示该插件。

在分包内引入插件代码包

如果插件只在一个分包内用到,可以将插件仅放在这个分包内,例如:

{
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ],
      "plugins": {
        "myPlugin": {
          "version": "1.0.0",
          "provider": "wxidxxxxxxxxxxxxxxxx"
        }
      }
    }
  ]
}

在分包内使用插件有如下限制:

  • 仅能在这个分包内使用该插件;
  • 同一个插件不能被多个分包同时引用;
  • 如果基础库版本低于 2.9.0 ,不能从分包外的页面直接跳入分包内的插件页面,需要先跳入分包内的非插件页面、再跳入同一分包内的插件页面。

使用插件

使用插件时,插件的代码对于使用者来说是不可见的。为了正确使用插件,使用者应查看插件详情页面中的“开发文档”一节,阅读由插件开发者提供的插件开发文档,通过文档来明确插件提供的自定义组件、页面名称及提供的 js 接口规范等。

自定义组件

使用插件提供的自定义组件,和使用普通自定义组件的方式相仿。在 json 文件定义需要引入的自定义组件时,使用 plugin:// 协议指明插件的引用名和自定义组件名,例如:

代码示例:

{
  "usingComponents": {
    "hello-component": "plugin://myPlugin/hello-component"
  }
}

出于对插件的保护,插件提供的自定义组件在使用上有一定的限制:

  • 默认情况下,页面中的 this.selectComponent 接口无法获得插件的自定义组件实例对象;
  • wx.createSelectorQuery 等接口的 >>> 选择器无法选入插件内部。

页面

插件的页面从小程序基础库版本 2.1.0 开始支持。

需要跳转到插件页面时,url 使用 plugin:// 前缀,形如 plugin://PLUGIN_NAME/PLUGIN_PAGE, 如:

代码示例:

<navigator url="plugin://myPlugin/hello-page">
  Go to pages/hello-page!
</navigator>

js 接口

使用插件的 js 接口时,可以使用 requirePlugin 方法。例如,插件提供一个名为 hello 的方法和一个名为 world 的变量,则可以像下面这样调用:

var myPluginInterface = requirePlugin('myPlugin');

myPluginInterface.hello();
var myWorld = myPluginInterface.world;

导出到插件

从基础库 2.11.1 起,使用插件的小程序可以导出一些内容,供插件获取。具体来说,在声明使用插件时,可以通过 export 字段来指定一个文件,如:

{
  "myPlugin": {
    "version": "1.0.0",
    "provider": "wxidxxxxxxxxxxxxxxxx",
    "export": "index.js"
  }
}

则该文件(上面的例子里是 index.js)导出的内容可以被这个插件用全局函数获得。例如,在上面的文件中,使用插件的小程序做了如下导出:

// index.js
module.exports = { whoami: 'Wechat MiniProgram' }

那么插件就可以获得上面导出的内容:

// plugin
requireMiniProgram().whoami // 'Wechat MiniProgram'

具体导出什么内容,可以阅读插件开发文档,和插件的开发者做好约定。

当插件在分包中时,这个特性也可以使用,但指定的文件的路径是相对于分包的。例如在 root: packageA 的分包中指定了 export: exports/plugin.js,那么被指定的文件在文件系统上应该是 /packageA/exports/plugin.js。

使用的多个插件的导出互不影响,两个插件可以导出同一个文件,也可以是不同的文件。但导出同一个文件时,如果一个插件对导出内容做了修改,那么另一个插件也会被影响,请注意这一点。

请谨慎导出 wx 对象或某个具体的 wx API,这将使插件可以以使用者小程序的身份调用 API。

微信小程序教程
  1. 微信小程序 小程序简介

  2. 微信小程序 开始

  3. 小程序代码构成

  4. 小程序宿主环境

  5. 小程序协同工作和发布

  6. 配置小程序

  7. sitemap配置

  8. 微信小程序 场景值

  9. 微信小程序 注册小程序

  10. 微信小程序 注册页面

  11. 微信小程序 页面生命周期

  12. 微信小程序 页面路由

  13. 微信小程序 模块化

  14. 微信小程序 API

  15. 微信小程序 WXML

  16. 微信小程序 WXSS

  17. 微信小程序 WXS

  18. 微信小程序 事件系统

  19. 微信小程序 简单双向绑定

  20. 微信小程序 基础组件

  21. 微信小程序 获取界面上的节点信息

  22. 微信小程序 响应显示区域变化

  23. 微信小程序 动画

  24. 微信小程序 初始渲染缓存

  25. 微信小程序 运行环境

  26. 微信小程序 JavaScript支持情况

  27. 微信小程序 运行机制

  28. 微信小程序 更新机制

  29. 微信小程序 组件模板和样式

  30. 微信小程序 Component构造器

  31. 微信小程序 组件间通信与时间

  32. 微信小程序 组件生命周期

  33. 微信小程序 behaviors

  34. 微信小程序 组件间关系

  35. 微信小程序 数据监听器

  36. 微信小程序 纯数据字段

  37. 微信小程序 抽象节点

  38. 微信小程序 自定义组件扩展

  39. 微信小程序 开发第三方自定义组件

  40. 微信小程序 单元测试

  41. 微信小程序 开发插件

  42. 微信小程序 使用插件

  43. 微信小程序 插件调用API的限制

  44. 微信小程序 插件功能页

  45. 微信小程序 网络

  46. 微信小程序 文件系统

  47. 微信小程序 画布

  48. 微信小程序 分包加载

  49. 微信小程序 多线程Worker

  50. 微信小程序 服务端能力

  51. 微信小程序 自定义tabBar

  52. 微信小程序 周期性更新

  53. 微信小程序 数据预拉取

  54. 微信小程序 DarkMode适配指南

  55. 微信小程序 大屏适配指南

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-11-24 11:47 , Processed in 0.015003 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

返回顶部