2018.3.13微信小程序插件重大功能更新！

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

2018.3.13微信小程序插件重大功能更新！

在这篇文章中，我将带您学习如何从零开始开发和使用插件。 文章分为3章：

注：为了保存文字内容，我将“微信小程序插件”简称为“插件”。

什么是微信小程序插件？

插件是由js和自定义组件封装的一组代码库。 插件不能单独使用或预览。 它们必须嵌入到其他小程序应用中才能使用。 和NPM的依赖、Maven的依赖库是一样的。

不过插件与NPM、Maven依赖管理的区别在于：

因此，我认为：未来插件应该被第三方封装为服务，而不仅仅是代码库。

如何开发微信小程序插件？

下载*新的微信小程序开发工具（必须是1.02.以上版本），打开开发工具，进入小程序项目，我们会看到“代码片段”标签，如下图：

图像

点击右下角“创建”按钮，创建插件，如下图：

图像

插件的AppId与之前微信小程序的AppId相同。 需要在微信开发后台新建一个微信小程序插件：

图像

图像

微信小程序插件的名称也必须是唯一的。 申请完成后，即可获取插件的AppId。

填写名称和插件AppID后，进入小程序项目，如下图：

图像

项目的代码目录结构如下：

├──

│ ├── app.js

│ ├── app.json

│ └── 页数

├──

│ ├── API

│ ├──

│ ├──index.js

│ └── .json

└── ..json

在文件..json中我们看到以下代码：

{
    "miniprogramRoot": "./miniprogram",
    "pluginRoot": "./plugin",
    "compileType": "plugin",
    "setting": {
        "newFeature": true
    },
    "appid": ".....",
    "projectname": "videoPlayer",
    "condition": {}
}

/.json文件中，代码如下：

{
  "publicComponents": {
    "hgPlayer": "components/player/player"
  },
  "main": "index.js"
}

在/index.js文件中，代码如下：

var data = require('./api/data.js')
module.exports = {
  getData: data.getData,
  setData: data.setData
}

外部抛出接口在/index.js中定义。 小程序使用该插件时，只能使用该插件提供的这两个接口。 小程序无法使用插件的其他接口（或方法）。

完成上述配置后，就可以开始在/中编写组件代码了。 比如我写了我的播放器组件如何开发微信小程序开发，代码如下：

.js：

Component({
  data: {
    myData:[]
  }
})

.wxml：

值得注意的是：

编写组件就是调用()来定义组件代码，这和App()、Page()是一样的。

该组件可以调用的微信API是有限的。 例如，无法调用wx.login()来获取用户信息。 具体限制是：

代码写完后，注意/.json文件中的配置：

{
  "publicComponents": {
    "hgPlayer": "components/player/player"
  },
  "main": "index.js"
}

表示使用该插件的小程序可以使用该组件。 该组件对应的代码为“//”

配置好后，我就可以将插件代码上传到腾讯服务器，进入微信小程序开发后台提交审核了。 腾讯审核通过后，第三方小程序就可以使用我们编写的插件了。

如何使用第三方插件

使用第三方插件之前，需要进入微信小程序开发后台2018.3.13微信小程序插件重大功能更新！，将插件添加到第三方服务中：

图像

图像

填写第三方插件的AppId，点击添加按钮，对方账号的小程序插件 > 应用管理中就会出现你的应用，如下图：

图像

第三方需要同意您的申请后，您就可以开始使用第三方插件了。

使用第三方插件时，我们需要在自己的小程序的app.json中进行如下配置：

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "myPlugin": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    }，
    "plugin1": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    },
     "plugin2": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    }
    ...
  }
}

：配置要使用的第三方插件列表。

配置完插件列表后，由于每个插件可能有多个组件，所以我们需要定义每个页面要使用的组件。 例如，要在index.js中使用该组件，需要在index.json中进行如下配置：

{
  "usingComponents": {
    "player": "plugin://myPlugin/hgPlayer"
  }
}

"": ":///" 意思是：您希望该页面使用该插件组件，该页面的别名为： 。

配置好index.json后，可以直接在index.wxml中使用，例如：

跟进

到目前为止，我们已经介绍了：

这个怎么样？ 小程序的开发和使用够简单吗？ 你能完全理解并上手吗？ 你还有别的问题吗？ 欢迎留言与我交流。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等