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

news2024/11/20 12:37:18

1、插件开发简介

1插件简介

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

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

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

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

2创建插件项目

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

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

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

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

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

1插件云开发的说明

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

2插件开发示例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3插件使用示例

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

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

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

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

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

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

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

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

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

4运行示例程序

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

 ■ 图3 插件项目运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408900.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

英雄联盟轮播图手动轮播

感谢大朋友们小朋友们的催更,这个月都在努力复习功课,无异于对待期末考试。 通过前一个个小案例越做越熟悉,代码越来越简洁,整体架构越来越规范 一步一步循序渐进,今天写一个英雄联盟轮播图手动轮播练练手。 清除网页的…

js逆向点点数据:自动扣webpak-webpackJsonp思路

url链接:点点数据-App应用市场数据分析,AppStore排行榜,ASO,ASM优化平台 请求数据是k,网址是个标准的webpak,不过有有很多个js文件,文件加起来十几mb,就很恶心 扣的话还是扣知乎webpak的老办法,导出加载器&#xff0c…

【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)

🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 🖥️ 蓝桥杯专栏:蓝桥杯题解/感悟 🖥️ TS知识总结:十万字TS知识点总结 👉 你的一键三连是我更新的最大动力❤️! &…

Promise.allSettled()方法介绍

前言: 本篇文章介绍 Promise 对象的Promise.allSettled() 方法,另外的关于 Promise 文章 可以看我的 ES6专栏 promise 实现 Ajax 首先通过 promise 对象实现 Ajax (如下) ,后面 在代码中 会使用到 const getJSON f…

uniapp添加极光推送

1.从dcloud插件市场下载极光SDK插件 (可以云打包,也可以离线打包) 极光JCore官方SDK下载地址 https://ext.dcloud.net.cn/plugin?id4028https://ext.dcloud.net.cn/plugin?id4028 极光JPush官方SDK下载地址 极光JPush官方SDK - DCloud 插…

Request获取请求数据中文乱码问题

目录 一、当Request请求字母时,输出正常 二、当Request请求参数为汉字时 三、使用伪代码了解乱码的形成 URL编码 四、Request请求参数中文乱码-Post请求解决方案 五、Request请求参数中文乱码-Get请求解决方案 前言:Tomcat在7以及更低版本时&#…

【虚幻引擎UE】UE5 实现WEB和UE通讯思路(含工程源码)

UE5实现WEB和UE通讯思路 两个方案,根据需求选择适合自己的: 1.UE打包为像素流页面,嵌入WEB进行通讯。 2.UE和WEB基于WEB UI插件实现通讯,打包为像素流页面。 实现效果如下 ↓ 本文着重说明第二种方案。 示例项目工程文件:https://download.csdn.net/download/qq_35079…

使用nodejs写接口

一、基本步骤 要使用Node.js编写接口,需要遵循以下步骤: 1、安装Node.js:如果尚未在计算机上安装Node.js,可以在Node.js的官方网站上下载安装程序,并按照说明进行安装。 2、初始化项目:在项目文件夹中打…

完美解决 - 前端发版后浏览器缓存问题(发版后及时拉取最新版本代码)

一、简介 开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了。 浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当…

为什么要将程序部署到云服务器上?华为云Web及移动App上云解决方案体验测评

Web及移动App上云是指将Web应用程序或移动应用程序部署到云计算平台上,以便用户可以通过互联网访问这些应用程序。这种部署方式可以提高应用程序的可靠性、可扩展性和安全性,同时也可以降低应用程序的运营成本。 三大特性决定系统的稳定能力 部署应用服务…

【中秋征文】“海上生明月”中秋节网页特效

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

van-uploader上传图片实现过程、使用原生input实现上传图片

1、使用van-uploader 使用van-uploader组件上传图片&#xff0c;并将其封装成组件&#xff0c;接收传入的参数imglist。图片地址为服务器返回的。 完整代码 <template><div class"image-uploader"><div class"list-img" v-for"(src…

html 导入百度地图 网页中如何导入百度地图

先看案例如图所示 首先我们需要知道我们想要标注地点的经纬度 经纬度查询网址如下 图中以同程大厦为例 经纬度查询定位 拾取坐标系统 经纬度查询地图 好了 准备工作做好 现在开始编码~ 第一步 html css部分 注意点1. #map 命名 不要随意更改 如影响到您的布局 您可以在外面在…

多种方法解决前后端报出的SyntaxError: xxx is not valid JSON的问题,比如“[object Object]“ is not valid JSON

文章目录1. 复现问题2. 分析问题3. 解决问题4. 该错误的其他解决方法5. 文章总结1. 复现问题 今天启动后端服务&#xff0c;访问knife4j文档时&#xff0c;却报出如下错误&#xff1a; 于是&#xff0c;按F12打开调试页面板&#xff0c;找到了具体的错误信息&#xff0c;如下所…

那些你不得不了解的HTML基础

瞧一瞧&#xff0c;看一看&#xff0c;新鲜的HTML出笼了 目录 一、HTML基本语法&#xff08;标签&#xff09; 注释 标题 段落 换行 特殊转义字符 格式化标签 图片 超链接a标签 表格标签 列表标签 表单标签 无语义标签 二、基于上述实现的两个案例 制作一份简历…

vue 之 CSS进行样式穿透的方法(/deep/、::v-deep、>>> 、:deep、额外的全局<style>)

一、简介 在很多vue的组件库 , 如vant&#xff0c;elementUI&#xff0c; iview等都可能自定义一些样式文件&#xff0c;如果我们在项目中引入了样式组件或者通过v-html渲染了数据&#xff0c;然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用&#xff0c;修…

做一个前端网页送给女朋友~轮播图+纪念日

文章目录1. 轮播图框架2. 轮播图大盒子实现1. 盒子及图片的可视化2. 将图片重叠起来并放入轮播图盒子中...相对定位与绝对定位3. 添加左右按钮4. 点击按钮跳转图片5. 鼠标离开图片轮播图按钮隐藏6. 添加小圆点按钮7. 点击小圆点跳转图片并且该小圆点变色8. 自动轮播9. 最后一步…

Vue项目中ESLint配置(VScode)

Vue项目中ESLint配置&#xff08;VScode&#xff09; 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint&#xff0c;点击并翻页到最下面&#xff0c;点击setting.json进行配置&#xff1a; // 值设置为true时…

Springboot Long类型数据太长返回给前端,精度丢失问题 复现、解决

前言 惯例&#xff0c;收到兄弟求救&#xff0c;关于long类型丢失精度的问题&#xff1a; 存在一个初学者不会&#xff0c;就会有第二个初学者不会&#xff0c;所以我出手。 正文 不多说&#xff0c;开搞。 如题&#xff0c; 后端返回的数据 给到 前端&#xff0c; Long类型数…

【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制

文章目录问题描述解决过程玩味Vue Scoped知识点解决方法问题描述 ​ 在开发的前期&#xff0c;我清晰的记得使用动画完成了图片放大的效果&#xff0c;当时还写了一篇博文 http://t.csdn.cn/lA9aq上了热榜。可是过了几天之后&#xff0c;这个效果居然“失效了”&#xff0c;我…