开发 | 一篇文章,带你从 0 到 1 开发小程序插件

作者:郑智文

知晓程序注:

前不久,微信释放了一个重磅新能力:微信小程序插件功能。有了它,小程序开发者就可以通过这个功能,强化自身小程序能力;小程序服务提供商也可以用它,为开发者、用户提供强大的小程序功能支持,进一步拓展小程序能力。

插件固然好,但如何从零开发一个插件呢?今天,知晓程序就来手把手,教你如何从零开发一款微信小程序插件。

关注「知晓程序」微信公众号,回复「开发」,获取小程序开发技巧大全。

新建插件工程

新建插件的操作非常简单。只需要在微信开发者工具中新建小程序项目,并选择「建立插件快速启动模板」即可,开发者工具就会自动创建插件项目。

需要注意的是,新建项目时,需要确保选择的项目目录是空目录,否则不会显示「建立插件快速启动模板」选项。

插件目录结构

生成的项目结构主要分为两大块,一个是 plugin,一个是 miniprogramplugin 中放置我们插件的逻辑代码,主要分为 apicomponents 两个部分; miniprogram 中放置的是插件的使用示例或者测试示例。

插件 API 接口开发

以写一个返回「hello world!」的接口为例,我们可以在 plugin/api/data.js 中写下如下代码:

function sayHelloWorld() {  return 'hello world!'}module.exports = {
  sayHelloWorld
}

plugin/index.js 中将我们需要暴露出需要给插件使用者使用的接口:

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

然后在 plugin/plugin.json 的配置文件中,配置插件的入口,默认如下:

{  "main": "index.js"}

然后在 miniprogram 中使用该接口。如在 miniprogram/pages/index/index.js 中使用:

var plugin = requirePlugin("myPlugin")
Page({
 onLoad: function() {
  console.log(plugin.sayHelloWorld())
 }
})

其中 myPlugin 为我们的插件名,微信默认配置。

插件组件开发

同样,以写一个显示 「hello world!」的组件为例,在 plugin/components 下新建一个 helloWorld 文件夹,点击该文件夹,右键生成组件,与普通组件一样,生成以下四个文件。

在 helloWorld.wxml 中编写视图代码:

<view>hello world!</view>

同样,在 plugin/plugin.json 中配置需要暴露给插件使用者使用的组件:

{
  "publicComponents": {
    "hello-world": "components/helloWorld/helloWorld"
  },
  "main": "index.js"
}

在需要引用到该组件的页面的配置文件中,做好配置即可,加入我们要在 index 页面使用,则需要在 miniprogram/pages/index/index.json 中进行如下配置:

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

然后再在 miniprogram/pages/index/index.wxml 中使用:

<hello-world/>

接下来,我们只需完整开发插件,然后选择上传,最后提交审核、发布,其他人就可以使用你的插件了。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2018-03-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

获取iOS应用的URL Schemes 原

3、打开iTunes,查看应用程序,选中相应的应用程序点击右键,选择在Finder中显示,然后解压ipa文件,得到一个文件夹。

10630
来自专栏魏艾斯博客www.vpsss.net

快云小助手网页版 Linux 面板安装过程记录

前几天老魏在快云小助手(快云管理助手)windows 服务器快速部署 web 环境中提到了体验景安快云提供的 web 面板,可以提供简单的服务器管理功能,同时老...

47570
来自专栏企鹅号快讯

PWA 那些事儿

一、背景 文章 2017 前端大事件和趋势回顾,2018 何去何从?中提到了 2017 年前端值得关注的十大事件,其中就提到了 PWA。 大家都知道 Nativ...

25900
来自专栏决胜机器学习

消息队列(一) MySQL实现消息队列

消息队列(一)MySQL实现消息队列 (原创内容,转载请注明来源,谢谢) 一、概述 消息队列(MessageQueue,通常简称MQ)是一种进程间通信或同一进...

96730
来自专栏desperate633

浅谈web开发中的Get和Post方法get和post的区别

在http协议中,实际上有八个http方法。但在实际开发中,绝大多数情况我们只会用到两个方法,就是get和post。所以我们来稍微谈谈两种方法的区别,以及何时应...

26620
来自专栏魏豪的专栏

【腾讯云的1001种玩法】LAMP架构实现动态网站论坛系统

LAMP架构,全称为Linux + Apache + Mariadb + PHP,是一种强大的网站解决方案。LAMP是多个开源项目的首字母缩写。LAMP网站架构...

72900
来自专栏古时的风筝

Hexo + github 打造个人博客

前两年开始用 wordpress 搭了一个网站,但服务器是在 Linode 上,之所以要放在 Linode 上,要从买的域名说起,因为我买的域名是 fengzh...

37180
来自专栏PHP技术大全

grafana+ prometheus+php 监控系统实践

团队在开发流媒体服务,需要实现一个监控在线人数的功能,可以看到历史有多少人在线,当前有多少人在线的功能。 如果用mysql等关系型数据库来实现,可以用事件记录日...

32430
来自专栏我与狸奴不出门

基于CentOS搭建微信小程序--响应错误502

在腾讯云开发者实验室的搭建微信小程序中  ,遇到了在完成实验二会话部署失败后,实验一http访问测试也显示失败并且表示响应错误-错误码:502。(域名是可以正常...

31230
来自专栏有趣的django

微信小程序入门(二)

27130

扫码关注云+社区

领取腾讯云代金券