mp-weixin-plugin.md 4.7 KB
Newer Older
1 2
> 本文档意在介绍如何在uni-app中引用和使用小程序插件,如果想了解如何把uni-app项目编译为小程序插件,另见文档:[发布为小程序插件](/collocation/miniprogram-plugin)

3
#### 什么是小程序插件
Q
qiang 已提交
4

5 6 7 8 9 10 11
小程序插件不同于小程序自定义组件。

小程序自定义组件是将组件源码导入到工程中,整体发布。

小程序插件是第三方插件作者按照微信等小程序厂商规范开发的独立插件,直接发布到小程序的插件平台。开发者在自己的小程序工程里只配置插件id,并不把插件源码导入工程。在运行期,由小程序引擎动态联网装载。开发者无法获取引入的三方小程序插件的源码。

在不同的小程序内叫法可能略有区别。微信小程序、支付宝小程序中叫`插件`,百度小程序中叫`动态库`,方便起见,以下统一称为插件。
Q
qiang 已提交
12 13 14 15 16 17

**参考文档**

- [微信小程序插件](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
- [支付宝小程序插件](https://opendocs.alipay.com/mini/plugin/plugin-usage)
- [百度小程序动态库](https://smartprogram.baidu.com/docs/develop/framework/dynamiclib_use/)
18
- [QQ小程序插件](https://q.qq.com/wiki/develop/miniprogram/frame/plugins/)
Q
qiang 已提交
19

20
#### 在uni-app中引入插件
Q
qiang 已提交
21

22
`manifest.json`中的各平台对应的字段内声明使用的插件,具体配置参照所用插件的开发文档
Q
qiang 已提交
23 24 25 26 27 28 29 30 31

**代码示例**

```json
// 微信小程序
"mp-weixin": {
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
D
DCloud_LXH 已提交
32 33
      "provider": "wxidxxxxxxxxxxxxxxxx",
      "export": "index.js"
Q
qiang 已提交
34 35 36 37 38 39 40 41 42
    }
  }
}

// 支付宝小程序
"mp-alipay": {
  "plugins": {
    "myPlugin": {
      "version": "*",
D
DCloud_LXH 已提交
43 44
      "provider": "2019235609092837",
      "export": "index.js"
Q
qiang 已提交
45 46 47 48 49 50 51 52 53 54 55 56 57 58
    }
  }
}

// 百度小程序
"mp-baidu": {
  "dynamicLib": {
    "myPlugin": {
      "provider": "TheUniqueNameOwnedByThisDynamicLib"
    }
  }
}
```

D
DCloud_LXH 已提交
59 60 61 62
**注意**

- `HBuilder X 3.2.13+` 支持 `export` 字段,即小程序导出到插件。目前仅 微信小程序 和 支付宝小程序 支持

Q
qiang 已提交
63 64
#### 在页面中使用

D
DCloud_LXH 已提交
65 66 67
在页面内使用插件内包含的组件需要在`pages.json`内对应页面的`style`节点下配置对应平台的`usingComponents``usingSwanComponents`,示例如下:

`"hello-component": "plugin://myPlugin/hello-component"`为例,`key`(冒号前的`hello-component`)为在页面内使用的组件名称。
Q
qiang 已提交
68

D
DCloud_LXH 已提交
69
`value`分为三段,`plugin`为协议(在百度小程序内为`dynamicLib`),`myPlugin`为插件名称即引入插件时的名称,`hello-component`为插件暴露的组件名称。
Q
qiang 已提交
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146

```json
// 微信小程序
{
  "path": "pages/index/index",
  "style": {
    "mp-weixin": {
      "usingComponents": {
        "hello-component": "plugin://myPlugin/hello-component"
      }
    }
  }
}

// 支付宝小程序
{
  "path": "pages/index/index",
  "style": {
    "mp-alipay": {
      "usingComponents": {
        "hello-component": "plugin://myPlugin/hello-component"
      }
    }
  }
}

// 百度小程序 注意是 usingSwanComponents 不是 usingComponents(HBuilder 3.1.0+ 可以使写为 usingComponents)
{
  "path": "pages/index/index",
  "style": {
    "mp-baidu": {
      "usingSwanComponents": {
        "my-special-list": "dynamicLib://myDynamicLib/special-list"
      }
    }
  }
}

```

#### 在分包内引入插件代码包

支付宝小程序、百度小程序不支持在分包内引入插件。此外如果项目使用了分包,在支付宝小程序内不可使用插件。本节内容仅针对微信小程序。

如果插件只在(同一个插件不能被多个分包同时引用)一个分包用到,可以单独配置到分包中,这样插件不会随主包加载,开发者可以在``pages.json``[subPackages](/collocation/pages?id=subpackages)中声明插件

**代码示例**

```json
"subPackages": [{
    "root": "pagesA",
    "pages": [{
        "path": "list/list"
    }]
    "plugins": {
        "pluginName": {
            "version": "1.0.0",
            "provider": "wxidxxxxxxxxxxxxxxxx"
        }
    }
}]
```

**在分包内使用插件的限制**

* 仅能在这个分包内使用该插件;
* 同一个插件不能被多个分包同时引用;
* 不能从分包外的页面直接跳入分包内的插件页面,需要先跳入分包内的非插件页面、再跳入同一分包内的插件页面。


#### 可能遇到的问题

* 某些插件可能会需要一些权限才能正常运行,请在`manifest.json`中的`mp-weixin`内配置`permission`[详见](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission)
* 微信开发工具提示 “插件版本不存在”,可能是插件开发文档示例代码中使用的版本已经不存在,请在声明插件处更改版本