开发插件
开发插件前,请阅读并理解《小程序插件接入指南》,了解开通流程和开通范围,开通插件功能。 如果没有开启插件功能,则无法上传插件。
创建插件项目
插件类型的项目可以直接在开发者工具中创建。详情
创建一个新的插件类型项目后,如果创建一个样例项目,该项目将包含三个目录:
小程序目录下的内容可以编写成普通的小程序,供插件调试、预览、审核之用。 以下内容主要介绍plugin中的插件代码和doc中的插件开发文档。
我们提供了一个完整的插件示例,可以直接在微信开发者工具中查看,开发者可以与本文进行对比,以便更好地理解。 警告:
由于插件需要appid才能运行,请填写一个appid; 由于当前代码片段的限制,请打开本例后手动将appid填写到miniprogram/app.json中(如下图),使本例正常运行。
插件目录结构
一个插件可以包含多个自定义组件、页面和一组js接口。 插件目录内容如下:
plugin
├── components
│ ├── hello-component.js // 插件提供的自定义组件(可以有多个)
│ ├── hello-component.json
│ ├── hello-component.wxml
│ └── hello-component.wxss
├── pages
│ ├── hello-page.js // 插件提供的页面(可以有多个,自小程序基础库版本 2.1.0 开始支持)
│ ├── hello-page.json
│ ├── hello-page.wxml
│ └── hello-page.wxss
├── index.js // 插件的 js 接口
└── plugin.json // 插件配置文件
插件配置文件
所有对用户小程序开放的自定义组件、页面和js接口都必须在插件配置文件plugin.json中列出,格式如下:
代码示例:
{
"publicComponents": {
"hello-component": "components/hello-component"
},
"pages": {
"hello-page": "pages/hello-page"
},
"main": "index.js"
}
该配置文件会打开一个自定义组件hello-component,一个页面hello-page以及index.js下导出的所有js接口给用户小程序。
进行插件开发
请注意:在插件开发中,只有部分接口可以直接调用; 此外,部分能力(如获取用户信息、发起支付等)可通过插件功能页面使用。
自定义组件
一个插件可以定义多个自定义组件,这些自定义组件在插件内部可以相互引用。 但是,提供给消费者小程序的自定义组件必须列在配置文件的 publicComponents 部分(见上文)。
除接口限制外易语言怎么开发插件,自定义组件的编写和组织与一般自定义组件相同。 每个自定义组件由四个文件组成:wxml、wxss、js和json。 具体请参考自定义组件的文档。
页
该插件支持从小程序基础库版本 2.1.0 开始的页面。 一个插件可以定义若干个插件页面,这些页面可以从本插件的自定义组件跳转,也可以从其他页面跳转,也可以从用户小程序跳转。 所有页面都必须列在配置文件的页面部分(见上文)。
除了接口限制外,插件页面的编写和组织方式与普通页面相同,每个页面由四个文件组成:wxml、wxss、js和json。 有关详细信息,请参阅有关页面的其他文档。
navigator组件可以在插件进行页面跳转时使用。 当插件跳转到自己的页面时,url应该设置成这样的形式:plugin-private://PLUGIN_APPID/PATH/TO/PAGE。 当需要跳转到其他插件时,也可以这样设置url。
代码示例:
<navigator url="plugin-private://wxidxxxxxxxxxxxxxx/pages/hello-page">
Go to pages/hello-page!
</navigator>
从基础库2.2.2版本开始,在插件自带的页面中,插件也可以调用wx.navigateTo跳转页面,url格式与使用navigator组件时类似。
界面
插件可以在接口文件中导出一些js接口(在配置文件中指定,详见上文)供插件用户调用,如:
代码示例:
module.exports = {
hello: function() {
console.log('Hello plugin!')
}
}
获取小程序导出
在开发者工具中预览效果需要在miniprogram/app.json中手动填写插件AppID
从基础库2.11.1开始,插件中有一个全局函数requireMiniProgram,可以获取用户小程序导出的内容。
例如,用户小程序执行以下导出:
// 使用者小程序
module.exports = {
greeting() {
return 'Greetings from Weixin MiniProgram!';
}
}
然后在插件中,你可以得到这样的内容:
// 插件
const miniProgramExports = requireMiniProgram();
miniProgramExports.greeting(); // 'Greetings from Weixin MiniProgram!'
或者
引用小程序的自定义组件
在开发者工具中预览效果需要在miniprogram/app.json中手动填写插件AppID
有时候,一个插件可能需要把一部分区域给小程序在页面或者自定义组件中渲染,所以需要能够引用小程序的自定义组件。 但是由于插件中不能直接指定小程序自定义组件的路径,所以不能通过usingComponents直接引用。 下面介绍如何通过抽象节点(泛型)实现引用。
如果是插件自定义组件(比如plugin-view),那么我们可以声明一个泛型:
// plugin/components/plugin-view.json
{ "componentGenerics": { "mp-view": true } }
并在要显示小程序组件的位置引用它:
<view>小程序组件:</view>
<mp-view />
在小程序中引用plugin-view时,可以将组件传递给插件进行渲染:
<plugin-view generic:mp-view="comp-from-miniprogram" />
如果是插件页面,插件页面本身就是页面的顶层组件,小程序不会引用它,也不能通过generic:xxx="";来指定抽象节点实现; 因此易语言怎么开发插件,从基础库2.12.2开始,小程序可以在插件的配置中指定插件页面的抽象节点实现。 例如,如果插件页面名为 plugin-index,您可以:
{
"myPlugin": {
"provider": "wxAPPID",
"version": "1.0.0",
"genericsImplementation": {
"plugin-index": {
"mp-view": "components/comp-from-miniprogram"
}
}
}
}
或者
预览、上传和发布
插件可以像小程序一样进行预览和上传,但是插件没有试用版。
插件会同时有多个在线版本,具体版本号由使用插件的小程序决定。
在手机端预览审核插件时,会使用专门的小程序,应用项目中小程序文件夹下的小程序来预览插件。
在开发版小程序中测试
通常,小程序下的代码可以看作是使用插件调试和测试插件的小程序代码。
但有时,需要将插件代码放到实际运行的小程序中进行调试和测试。 此时可以使用开发版小程序直接引用开发版插件。 方法如下:
在开发者工具的插件工程中上传插件。 此时,本次上传获得的插件开发版本ID(英文和数字组成的随机字符串)将包含在上传成功的通知消息中; 点击开发者工具右下角的通知按钮,可以打开通知栏,看到新生成的ID; 在需要使用开发版插件的小程序工程中,将插件版本设置为“version”:“dev-[开发版ID]”的形式,如“version”:“dev-abcdef0123456789abcdef0123456789”足够。
如果小程序的开发版引用了插件的开发版,则此时小程序无法上传发布。 只有将插件版本设置为正式版后,小程序才能正常上传发布。
防范措施:
插件开发文档
当用户小程序使用插件时,插件的代码是不可见的。 因此,除了插件代码,我们还支持插件开发者上传插件开发文档。 本开发文档将展示在插件详情页面,供其他开发者在浏览和使用插件时阅读和参考。 插件开发者应在插件开发文档中对插件提供的自定义组件、页面、接口等进行必要的说明和说明,以方便用户正确使用插件小程序。
插件开发文档必须放在插件工程根目录下的doc目录下,目录结构如下:
doc
├── README.md // 插件文档,应为 markdown 格式
└── picture.jpg // 其他资源文件,仅支持图片
其中,README.md的编写有一定的限制,具体为:
引用的图片资源不能是网络图片,必须放在该目录下; 文档中的链接只能链接到:
编辑好README.md后,可以在开发者工具左侧资源管理器的文件栏中右键点击README.md,选择上传文档。 发布上传的文档后,该文档不会立即发布。 此时,你可以使用账号密码登录管理后台,在小程序插件 > 基本设置中预览并发布插件文档。
插件文件总大小不能大于2M。 如果上传超过限制,将返回错误代码 80051。
其他注意事项 插件间相互调用
插件不能直接引用其他插件。 但是,如果小程序引用多个插件,则插件可以相互调用。
插件调用另一个插件的方法的方式与插件调用自身方法的方式相同。 您可以使用plugin-private://APPID访问插件的自定义组件和页面(目前不能使用plugin://)。
对于js接口,可以使用requirePlugin,但是不能在文件开头使用requirePlugin,因为依赖的插件可能还没有初始化,请考虑稍后再调用requirePlugin,比如当实际调用接口或附加组件时调用。 (这将在未来得到解决。)
插件请求签名
当插件使用wx.request等API发送网络请求时,会携带一个额外的签名HostSign来验证请求是否来自小程序插件。 此签名位于请求标头中,如下所示:
X-WECHAT-HOSTSIGN: {"noncestr":"NONCESTR", "timestamp":"TIMESTAMP", "signature":"SIGNATURE"}
其中 NONCESTR 是随机字符串,TIMESTAMP 是生成随机字符串和 SIGNATURE 的 UNIX 时间戳。 它们是用来计算签名SIGNATRUE的参数,签名算法为:
SIGNATURE = sha1([APPID, NONCESTR, TIMESTAMP, TOKEN].sort().join(''))
其中,APPID为小程序的AppId(可从请求头中的referrer获取); TOKEN即插件令牌,在小程序插件的基本设置中可以找到。
网络请求的referer格式固定为{appid}/{version}/page-frame.html,其中{appid}为小程序的appid,{version}为小程序的版本号,一个版本号0的表示开发版、试用版和审核版,版本号为devtools,表示开发者工具,其余为正式版。
插件开发者可以在服务端验证签名,如下:
sort以字符串形式表示APPID NONCESTR TIMESTAMP TOKEN的四个值,按照字典顺序进行排序(与JavaScript数组的sort方法相同); join 直接将四个排序后的字符串连接在一起; 连接结果使用sha1算法,结果为SIGNATURE。
从基础库2.0.7版本开始,在网络正常的情况下,NONCESTR和TIMESTAMP会在小程序运行过程中每10分钟改变一次。 如果需要,可以通过判断TIMESTAMP来判断当前签名是否仍然有效。