微信小程序云开发 | 插件的微信小程序云开发

简介: 微信小程序云开发 | 插件的微信小程序云开发

1、插件开发简介


1●插件简介

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


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


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


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


2●创建插件项目

在用微信开发者工具创建插件小程序项目时,要填写或选择项目基本信息(项目名称、项目所在的目录、AppID、开发模式),界面如图1所示。

image.png

■ 图1 创建插件小程序项目的界面


创建完成后的项目初始目录和文件如图2所示。

image.png

■ 图2 创建完成后的项目初始目录和文件


2、插件云开发的说明和示例


1●插件云开发的说明

在小程序插件中可以使用云开发,插件中使用云开发时,使用的是插件方的云资源而非宿主(即插件使用方)的云资源,在使用方式上与在小程序中使用无异。如果需要保证兼容性,插件代码包的大小约增加70 KB,因此使用插件的小程序包大小也会因插件代码包的增大而增大。


2●插件开发示例

在项目的plugin目录下创建bookinfos.js文件,修改文件代码,修改后的代码如例1所示。


【例1】文件bookinfos.js修改后的代码示例。

image.png

修改在项目的plugin目录下的plugin.json文件,修改后的代码如例2所示。


【例2】文件plugin.json修改后的代码示例。

image.png

在目录plugin/components下创建文件bookinfos.wxml、bookinfos.js、bookinfos.wxss和bookinfos.json。

文件bookinfos.wxml修改后的代码如例3所示。


【例3】文件bookinfos.wxml修改后的代码示例。

image.png

文件bookinfos.js修改后的代码如例4所示。


【例4】文件bookinfos.js修改后的代码示例。

image.png

文件bookinfos.wxss修改后的代码如例5所示。


【例5】文件bookinfos.wxss修改后的代码示例。

image.png

文件bookinfos.json修改后的代码如例6所示。


【例6】文件bookinfos.json修改后的代码示例。

保持目录plugin/api及位于该目录下的data.js内容不变,保持plugin目录下的project.config.json文件内容不变。


3●插件使用示例

修改在项目的miniprogram目录下的文件app.json,修改后的代码如例7所示。


【例7】文件app.json修改后的代码示例。

image.png

编译项目,自动在目录miniprogram/pages下创建books.wxml、books.js、books.wxss和books.json文件。

文件books.wxml修改后的代码如例8所示。


【例8】文件books.wxml修改后的代码示例。

image.png文件books.js修改后的代码如例9所示。


【例9】文件books.js修改后的代码示例。

image.png

文件books.json修改后的代码如例10所示。


【例10】文件bookinfos.json修改后的代码示例。

image.png

4●运行示例程序

编译项目,运行程序,在微信开发者工具的模拟器中输出结果如图3所示。

image.png

■ 图3 插件项目运行结果


目录
相关文章
|
8月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
8月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
12月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2294 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
1428 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
1436 3
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
3877 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
19391 14
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
1227 3