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

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

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 插件项目运行结果


目录
相关文章
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
28 0
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
25 0
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
31 3
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
31 2
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
25 0
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
27 0
|
13天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
13天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
13天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
13天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。