微信小程序插件
昨天（2018.3.13），微信小程序发布了重大功能更新，支持插件的使用和开发，个人预计，不超过2个月，优质服务的插件将会如雨后春笋般涌现。
这篇文章，我将会带大家，从0开始，学习如何开发和使用插件。文章分为3个章节：
1、什么是微信小程序插件
2、如何开发微信小程序插件
3、如何使用第三方微信小程序插件
备注：为了节省文字内容，我会将“微信小程序插件”简称为“插件”。
什么是微信小程序插件？
插件一组由js和自定义组件封装的代码库，插件无法单独使用、也无法预览，必须被其他小程序应用嵌入，才能使用。它和NPM的依赖、Maven的依赖库是一个道理。
不过，插件和NPM、Maven依赖管理不同的是：
插件拥有独立的API接口和域名列表，不被小程序本身的域名列表限制。（NPM依赖进来的库不能进行第三方数据请求）
插件必须由腾讯审核通过才能使用（NPM无需腾讯审核）
使用第三方插件必须向第三方申请 （通过NPM使用第三方库无需向第三方申请）
所以，我觉得：在未来，插件应该会被第三方打包成为服务，而不仅仅只是一个代码库。
如何开发微信小程序插件？
下载最新的微信小程序开发者工具，（必须是 1.02.1803130 版本以上），打开开发者工具，进入小程序项目，我们会看到“代码片段”标签，如下图：
点击，右下角的 “创建” 按钮，就可以创建插件了，如下图：
插件的AppId和之前的微信小程序的AppId是同个道理，需要在微信开发者后台新建一个微信小程序插件：
微信小程序插件的名称也必须是独一无二的，申请完毕后就可以获得 插件的AppId了。
填写名称和插件AppID后，进入小程序项目，如下图显示：
项目的代码目录结构如下：
├── miniprogram
│ ├── app.js
│ ├── app.json
│ └── pages
├── plugin
│ ├── api
│ ├── components
│ ├── index.js
│ └── plugin.json
└── project.config.json
在文件 project.config.json 中，我们看到代码如下：
{
"miniprogramRoot": "./miniprogram",
"pluginRoot": "./plugin",
"compileType": "plugin",
"setting": {
"newFeature": true
},
"appid": ".....",
"projectname": "videoPlayer",
"condition": {}
}
miniprogramRoot：配置小程序的根目录，可以使用小程序来测试编写的插件
pluginRoot：插件相关代码所在的根目录
compileType：项目的编译类型，必须配置为 plugin，在上传代码的时候才会以插件的方式上传到腾讯服务器。
在 plugin/plugin.json 文件中，代码如下：
{
"publicComponents": {
"hgPlayer": "components/player/player"
},
"main": "index.js"
}
publicComponents：配置的是插件可以给使用的小程序提供哪些组件，一个插件可以定义很多个组件，组件和组件之间相互引用，但是小程序只能使用在publicComponents里配置的组件。
main：定义入口文件，在入口文件 index.js 中定义小程序可以使用插件的那些接口。
在 plugin/index.js 文件中，代码如下：
var data = require('./api/data.js')
module.exports = {
getData: data.getData,
setData: data.setData
}
在 plugin/index.js 定义了对外抛出接口为 getData 和 setData，小程序在使用这个插件的时候，只能使用到插件提供的这两个接口，插件的其他接口（或方法）小程序无法使用。
做好以上配置后，就可以开始在 plugin/components 编写组件代码了，例如我写了我的播放器组件，代码如下：
player.js：
Component({
data: {
myData:[]
}
})
player.wxml:
<view class="section tc">
<video id="myVideo" src="..." enable-danmu danmu-btn controls>
</video>
</view>
值得注意的是：
编写组件是调用 Component() 定义组件代码，和App() 、Page()一样的道理。
在组件能能够调用的微信API受限，比如说不能调用 wx.login() 获取用户信息，具体限制在：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/plugin/api-limit.html
代码编写完毕后，注意在 plugin/plugin.json 文件配置：
{
"publicComponents": {
"hgPlayer": "components/player/player"
},
"main": "index.js"
}
表示使用该插件的小程序，可以使用 hgPlayer 这个组件，组件hgPlayer对应的代码是 "components/player/player"
配置好后，我就可以上传插件代码到腾讯服务器，进入微信小程序开发者后台提交审核，腾讯审核通过后，第三方小程序就可以使用我们编写的这个插件了。
如何使用第三方插件
使用第三方插件之前，需要进入微信小程序开发者后台，在第三方服务里添加插件：
填写第三方插件的AppId，点击添加按钮，对方账号的 小程序插件 > 申请管理 会出现你的申请，如下图：
需要第三方同意你的申请后，你就可以开始使用第三方插件了。
使用第三方插件的时候，需要在 我们自己的小程序的 app.json 做如下配置：
{
"pages": [
"pages/index/index"
],
"plugins": {
"myPlugin": {
"version": "dev",
"provider": "填写申请通过的插件AppId"
}，
"plugin1": {
"version": "dev",
"provider": "填写申请通过的插件AppId"
},
"plugin2": {
"version": "dev",
"provider": "填写申请通过的插件AppId"
}
...
}
}
plugins： 配置的要使用的第三方插件列表。
插件列表配置好后，由于每个插件可能会有多个组件，所以需要我们在每个页面定义要使用到的组件，例如，在 index.js 中要使用 hgPlayer 这个组件，需要在 index.json 配置如下：
{
"usingComponents": {
"player": "plugin://myPlugin/hgPlayer"
}
}
"player": "plugin://myPlugin/hgPlayer" 的含义是：要本页面使用插件 myPlugin 的组件 hgPlayer，同时在本页面的别名为 ：player 。
配置好 index.json 后，就可以在 index.wxml 直接使用了，例如：
<view class="xxxx">
<player />
</view>
相关知识
微信小程序之植物识别demo(百度开发接口）
免费接入！快递100上线小程序【快递查询】功能插件，向第三方小程序开放接入
基于uniapp微信小程序的摄影街拍圈子交流平台
微信小程序识别花草方法步骤 微信小程序怎么识别花草
网上花店微信小程序
鲜花绿植出售租赁苗木农业公众号开发定制微信小程序
微信小程序期末大作业解析：打造花店小程序
三明大田花店微信小程序怎么做？
鲜花店微信小程序制作方法教程
花店预订小程序制作【花店预订微信小程序模板】
网址: 微信小程序插件 https://m.huajiangbk.com/newsview774582.html
| 上一篇: 全球最大花卉市场，你猜在哪儿？ |
下一篇: 拍鲜花，要花团锦簇，还不能纷繁无 |
