设为首页收藏本站

JEECG官方网站-企业级JAVA快速开发平台

 找回密码
 立即注册

关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 最新动态 - 技术支持 - 师徒架构班

JEECG最新版本下载 JEECG智能开发平台 - 显著提高开发效率 常见问题 - 入门视频 - 参与开源团队

商务 QQ: 3102411850、418799587 商务热线: 18611788525 客服电话: 010-64808099 官方邮箱: jeecgos@163.com

查看: 1735|回复: 0

微信小程序插件 - 开发教程

[复制链接]

9

主题

0

好友

70

积分

管理员

Rank: 12Rank: 12Rank: 12

发表于 2018-5-3 17:46:46 |显示全部楼层
昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现。
这篇文章,我将会带大家,从0开始,学习如何开发和使用插件。文章分为3个章节:
  • 1、什么是微信小程序插件
  • 2、如何开发微信小程序插件
  • 3、如何使用第三方微信小程序插件

备注:为了节省文字内容,我会将“微信小程序插件”简称为“插件”。
什么是微信小程序插件?
插件一组由js和自定义组件封装的代码库,插件无法单独使用、也无法预览,必须被其他小程序应用嵌入,才能使用。它和NPM的依赖、Maven的依赖库是一个道理。
不过,插件和NPM、Maven依赖管理不同的是:
  • 插件拥有独立的API接口和域名列表,不被小程序本身的域名列表限制。(NPM依赖进来的库不能进行第三方数据请求)
  • 插件必须由腾讯审核通过才能使用(NPM无需腾讯审核)
  • 使用第三方插件必须向第三方申请 (通过NPM使用第三方库无需向第三方申请)

所以,我觉得:在未来,插件应该会被第三方打包成为服务,而不仅仅只是一个代码库。
如何开发微信小程序插件?
下载最新的微信小程序开发者工具,(必须是 1.02.1803130 版本以上),打开开发者工具,进入小程序项目,我们会看到“代码片段”标签,如下图:
微信图片_20180503172043.jpg

点击,右下角的 “创建” 按钮,就可以创建插件了,如下图:
微信图片_201805031720431.jpg

插件的AppId和之前的微信小程序的AppId是同个道理,需要在微信开发者后台新建一个微信小程序插件:
微信图片_201805031720432.jpg
微信图片_201805031720433.jpg

微信小程序插件的名称也必须是独一无二的,申请完毕后就可以获得 插件的AppId了。
填写名称和插件AppID后,进入小程序项目,如下图显示:

微信图片_201805031720434.jpg

项目的代码目录结构如下:
├── 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>

值得注意的是:
代码编写完毕后,注意在 plugin/plugin.json 文件配置:
{  "publicComponents": {    "hgPlayer": "components/player/player"  },  "main": "index.js"}

表示使用该插件的小程序,可以使用 hgPlayer 这个组件,组件hgPlayer对应的代码是 "components/player/player"
配置好后,我就可以上传插件代码到腾讯服务器,进入微信小程序开发者后台提交审核,腾讯审核通过后,第三方小程序就可以使用我们编写的这个插件了。

如何使用第三方插件
使用第三方插件之前,需要进入微信小程序开发者后台,在第三方服务里添加插件:
微信图片_201805031720435.jpg

微信图片_201805031720436.jpg

填写第三方插件的AppId,点击添加按钮,对方账号的 小程序插件 > 申请管理 会出现你的申请,如下图:
微信图片_201805031720437.jpg

需要第三方同意你的申请后,你就可以开始使用第三方插件了。
使用第三方插件的时候,需要在 我们自己的小程序的 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>







您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|JEECG技术论坛 - 基于BPM的JAVA快速开发平台 ( 京ICP备12013567号-3 )  

GMT+8, 2019-9-19 14:35 , Processed in 2.246404 second(s), 24 queries , Gzip On.

JEECG Open Source

© 2001-2012 Comsenz Inc.

回顶部