027-87227388

微信小程序插件怎么开发

发布时间:2020-11-15 浏览:40

  下载最新的微信小程序开发者工具,(必须是 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:

  值得注意的是:

  编写组件是调用 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 直接使用了,例如: