欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

文摘  微信小程序之插件的开发和使用

工具应用 网络 146 0评论

一、什么是微信小程序插件


插件是对一组 js 接口、自定义组件或页面的封装,用于嵌入到小程序中使用。插件不能独立运行,必须嵌入在其他小程序中才能被用户使用;而第三方小程序在使用插件时,也无法看到插件的代码。因此,插件适合用来封装自己的功能或服务,提供给第三方小程序进行展示和使用。


插件开发者可以像开发小程序一样编写一个插件并上传代码,在插件发布之后,其他小程序方可调用。小程序平台会托管插件代码,其他小程序调用时,上传的插件代码会随小程序一起下载运行。


相对于普通 js 文件或自定义组件,插件拥有更强的独立性,拥有独立的 API 接口、域名列表等,但同时会受到一些限制,如一些 API 无法调用或功能受限。还有个别特殊的接口,虽然插件不能直接调用,但可以使用 插件功能页 来间接实现。


同时,框架会对小程序和小程序使用的每个插件进行数据安全保护,保证它们之间不能窃取其他任何一方的数据(除非数据被主动传递给另一方)。


二、如何开发微信小程序插件


开发插件前,请阅读了解《小程序插件接入指南》了解开通流程及开放范围,并开通插件功能。如果未开通插件功能,将无法上传插件。


1.创建插件


插件类型的项目可以在开发者工具中直接创建。详情

下载最新的微信小程序开发者工具,(必须是 1.02.1803130 版本以上),打开开发者工具,进入小程序项目,我们会看到“代码片段”标签,如下图:

111.jpg

点击,右下角的 “创建” 按钮,就可以创建插件了,如下图:

222.jpg

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

微信小程序插件的名称也必须是独一无二的,申请完毕后就可以获得 插件的AppId了。


填写名称和插件AppID后,进入小程序项目,如下图显示:

555.jpg


新建插件类型的项目后,如果创建示例项目,则项目中将包含三个目录:

· plugin 目录:插件代码目录。

· miniprogram 目录:放置一个小程序,用于调试插件。

· doc 目录:用于放置插件开发文档。


miniprogram 目录内容可以当成普通小程序来编写,用于插件调试、预览和审核。下面的内容主要介绍 plugin 中插件代码及 doc 中的插件开发文档。

我们提供了一个可以直接在微信开发者工具中查看的完整插件示例,开发者可以和本文互相对照以便理解。请注意:

· 由于插件需要 appid 才能工作,请填入一个 appid;

· 由于当前代码片段的限制,打开该示例后请 手动将 appid 填写到 miniprogram/app.json 中(如下图)使示例正常运行。

666.png


插件目录结构

一个插件可以包含若干个自定义组件、页面,和一组 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 接口。


2.进行插件开发


请注意:在插件开发中,只有部分接口可以直接调用;另外还有部分能力(如 获取用户信息 和 发起支付 等)可以通过插件功能页的方式使用。


自定义组件

插件可以定义若干个自定义组件,这些自定义组件都可以在插件内相互引用。但提供给第三方小程序使用的自定义组件必须在配置文件中列出(参考上文)。


除去接口限制以外,自定义组件的编写和组织方式与一般的自定义组件相同,每个自定义组件由 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 组件时相仿。


接口

插件可以在接口文件(在配置文件中指定,详情见上文)中 export 一些 js 接口,供插件的使用者调用,如:

代码示例:

module.exports = {
  hello() {
    console.log('Hello plugin!')
  }
}


3.预览、上传和发布


插件可以像小程序一样预览和上传,但插件没有体验版。

插件会同时有多个线上版本,由使用插件的小程序决定具体使用的版本号。

手机预览和提审插件时,会使用一个特殊的小程序来套用项目中 miniprogram 文件夹下的小程序,从而预览插件。

· (建议的方式)如果当前开发者有测试号,则会使用这个测试号;在测试号的设置页中可以看到测试号的 appid 、 appsecret 并设置域名列表。

· 否则,将使用“插件开发助手”,它具有一个特定的 appid 。


4.插件开发文档


在第三方小程序使用插件时,插件代码并不可见。因此,除了插件代码,我们还支持插件开发者上传一份插件开发文档。这份开发文档将展示在插件详情页,供其他开发者在浏览插件和使用插件时进行阅读和参考。插件开发者应在插件开发文档中对插件提供的自定义组件、页面、接口等进行必要的描述和解释,方便第三方小程序正确使用插件。


插件开发文档必须放置在插件项目根目录中的 doc 目录下,目录结构如下:

doc

├── README.md   // 插件文档,应为 markdown 格式

└── picture.jpg // 其他资源文件,仅支持图片

其中,README.md 的编写有一定的 限制条件,具体来说:

1)引用到的图片资源不能是网络图片,且必须放在这个目录下;

2)文档中的链接只能链接到:

    · 微信开发者社区(developers.weixin.qq.com)

    · 微信公众平台(mp.weixin.qq.com)

    · GitHub(github.com)

编辑 README.md 之后,可以使用开发者工具打开 README.md,并在编辑器的右下角预览插件文档和单独上传插件文档。发布上传文档后,文档不会立刻发布。此时可以使用帐号和密码登录 管理后台 ,在 小程序插件 > 基本设置 中预览、发布插件文档。


5.其他注意事项


插件请求签名

插件在使用 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 是插件 Token,可以在小程序插件基本设置中找到。


插件开发者可以在服务器上按以下步骤校验签名:

· sort 对 APPID NONCESTR TIMESTAMP TOKEN 四个值表示成字符串形式,按照字典序排序(同 JavaScript 数组的 sort 方法);

· join 将排好序的四个字符串直接连接在一起;

· 对连接结果使用 sha1 算法,其结果即 SIGNATURE 。

自基础库版本 2.0.7 开始,在小程序运行期间,若网络状况正常, NONCESTR 和 TIMESTAMP 会每 10 分钟变更一次。如有必要,可以通过判断 TIMESTAMP 来确定当前签名是否依旧有效。


三、使用微信小程序插件


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


1.添加插件


在使用插件前,首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台,通过 appid 查找插件并添加。如果插件无需申请,添加后可直接使用;否则需要申请并等待插件开发者通过后,方可在小程序中使用相应的插件。


2.引入插件代码包


使用插件前,使用者要在 app.json 中声明需要使用的插件,例如:

代码示例:

{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx"
    }
  }
}

如上例所示, plugins 定义段中可以包含多个插件声明,每个插件声明以一个使用者自定义的插件引用名作为标识,并指明插件的 appid 和需要使用的版本号。其中,引用名(如上例中的 myPlugin)由使用者自定义,无需和插件开发者保持一致或与开发者协调。在后续的插件使用中,该引用名将被用于表示该插件。


在分包内引入插件代码包

如果插件只在一个分包内用到,可以将插件仅放在这个分包内,例如:

{
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["pages/cat", "pages/dog"],
      "plugins": {
        "myPlugin": {
          "version": "1.0.0",
          "provider": "wxidxxxxxxxxxxxxxxxx"
        }
      }
    }
  ]
}


在分包内使用插件有如下限制:

· 仅能在这个分包内使用该插件;

· 同一个插件不能被多个分包同时引用;

· 目前,还不能从分包外的页面直接跳入分包内的插件页面,需要先跳入分包内的非插件页面、再跳入同一分包内的插件页面。


3.使用插件


使用插件时,插件的代码对于使用者来说是不可见的。为了正确使用插件,使用者应查看插件详情页面中的“开发文档”一节,阅读由插件开发者提供的插件开发文档,通过文档来明确插件提供的自定义组件、页面名称及提供的 js 接口规范等。


自定义组件

使用插件提供的自定义组件,和使用普通自定义组件的方式相仿。在 json 文件定义需要引入的自定义组件时,使用 plugin:// 协议指明插件的引用名和自定义组件名,例如:

代码示例:

{
  "usingComponents": {
    "hello-component": "plugin://myPlugin/hello-component"
  }
}


出于对插件的保护,插件提供的自定义组件在使用上有一定的限制:

· 默认情况下,页面中的 this.selectComponent 接口无法获得插件的自定义组件实例对象;

· wx.createSelectorQuery 等接口的 >>> 选择器无法选入插件内部。


页面

插件的页面从小程序基础库版本 2.1.0 开始支持。

需要跳转到插件页面时,url 使用 plugin:// 前缀,形如 plugin://PLUGIN_NAME//PLUGIN_PAGE, 如:

代码示例:

<navigator url="plugin://myPlugin/hello-page">
  Go to pages/hello-page!
</navigator>


js 接口

使用插件的 js 接口时,可以使用 requirePlugin 方法。例如,插件提供一个名为 hello 的方法和一个名为 world 的变量,则可以像下面这样调用:

const myPluginInterface = requirePlugin('myPlugin')
myPluginInterface.hello()
const myWorld = myPluginInterface.world


插件调用API的限制https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/api-limit.html 

插件调用组件的限制https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/component-limit.html 


插件功能页https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages.html 


参考网址:

https://www.jianshu.com/p/c027500e6f2e

https://blog.csdn.net/sxl131415/article/details/80484911 

https://www.cnblogs.com/tbd-love/p/8391871.html


原文地址:https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/

转载请注明: ITTXX.CN--分享互联网 » 微信小程序之插件的开发和使用

最后更新:2019-01-21 19:44:30

赞 (1) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽