Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >微信小程序插件

微信小程序插件

原创
作者头像
mySoul
发布于 2018-09-22 17:23:38
发布于 2018-09-22 17:23:38
5K0
举报
文章被收录于专栏:mySoulmySoul

微信小程序插件

介绍

微信小程序插件是对一组js接口,自定义组件或页面的封装,用来嵌入微信小程序中,用来被开发者调用。

微信小程序必须嵌入到其他程序中才能使用。

插件具有独立的api,域名列表。

开始

创建插件项目

完成以后界面如下

创建完成以后目录如下

代码语言:txt
AI代码解释
复制
- pluggin	// 插件目录,存放插件代码
- miniprogram	// 放置小程序目录,用于存放代码
- doc	// 用于存放说明文档

插件的目录结构

示例的文件目录如下所示

说明,在上方的目录结构中,plugin为插件目录,api文件夹下的data.js为导出的接口。list为插件的组件,index.js为插件的js文件,plugin.json为插件的配置文件。

plugin.json

此文件为该插件的配置文件,向第三方开放的组件,页面和js接口都在该文件里

代码语言:txt
AI代码解释
复制
{

"publicComponents": {

"list": "components/list/list"

},

"main": "index.js"

}

获取用户信息,发起支付可以在获取插件功能页中获取并使用。

插件开发

自定义组件

插件可以使用自定义组件。自定义组件的目录在components。创建自定义组件需要四个文件,wxml,wxss,js,json四个文件,还需要在plugin.json文件下的publicComponents对象中,添加该组件的名称,以及路径。

页面

页面同样具有四个文件,wxml,wxss,js,json四个文件构成,

同样的页面需要在json文件中的page文件中配置。

跳转使用navigator组件进行跳转。

接口

在module中的export中导出接口文件。

插件开发文档

编写doc下的readme.md文件

文档中的链接只能链接到

  1. github
  2. 微信开发者社区
  3. 微信开发者平台

使用插件

添加插件

登录后台,添加插件

目前添加的插件为知晓云的sdk插件

知晓云 https://cloud.minapp.com 具有插件市场,以及小程序市场,是滴,之前了解过知晓云。使用知晓云,可以快速的实现消息的转发,对上传的图片进行鉴黄,以及裁剪等操作。还有关于node.js的云函数功能,能实现关于微信支付,邮件,模板消息,网络请求,图片鉴黄,还提供运营后台的api,能实现包括,对用户的授权认证,内容模块的操作,以及文件模块,用户模块的操作,以及知晓云的开放api,以及开放了一个url作图功能 http://support.minapp.com/hc/kb/article/1082737/ 对于这个功能来说,我还是比较喜欢的,灰常简单,直接调用接口即可。完成了图片的处理,对于图片的处理来说,直接在另一端处理,简化了开发。并且知晓云还提供了一个基于微信小程序的富文本编辑器,完成对富文本的处理 github 地址 https://github.com/ifanrx/wxParser 简化了微信小程序的开发

目前正在使用的授权的第三方平台有,知晓云,腾讯云,插件有知晓云sdk

下面将以知晓云sdk作为实例

知晓云文档 https://doc.minapp.com/

知晓云

创建 企业,创建应用,进行公众号授权

创建完成以后页面如下

接续去github上拉去知晓云提供的dome

完成后效果如上所示

接着微信后台完成服务器域名的配置

加入插件的引用声明

加入如下的内容

代码语言:txt
AI代码解释
复制
"plugins": {

"sdkPlugin": {

"version": "1.7.0",

"provider": "wxc6b86e382a1e3294"

}

}

在app.js文件中完成初始化操作

登录 https://cloud.minapp.com/dashboard/#/app/settings/app/

获取ClientID 进行初始化操作

代码语言:txt
AI代码解释
复制
//app.js

App({

onLaunch: function() {

let that = this

  

// 引入 BaaS SDK

require('./utils/sdk-v1.4.0')

  
  

let clientId = this.globalData.clientId

  

wx.BaaS.init(clientId)

},

  

globalData: {

clientId: '*****************', // 从 BaaS 后台获取 ClientID

tableId: null, // 从 https://cloud.minapp.com/dashboard/ 管理后台的数据表中获取

}

})

创建数据表

数据表的crud操作

代码语言:txt
AI代码解释
复制
// pages/hello/hello.js

Page({

  

/**

* 页面的初始数据

*/

data: {

creatingBookName: '',

},

  

/**

* 绑定添加书目的提交按钮点击事件,向服务器发送数据

**/

createBook: (e) => {

let bookName = this.data.creatingBookname; // 缓存在data对象中的输入的书名

let tableID = '1'; // 从后台获取到的对应数据表的id

let Books = new wx.Baas.TableObject(tableID); // 实例化tableID的数据表对象

let book = Books.create(); // 创建一条记录

  

// 调用创建数据项接口,对数据进行储存

book.set({bookName})

book.save();

book.then(() => {

})

},

  

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

  

},

  

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

  

},

  

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

  

},

  

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

  

},

  

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

  

},

  

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

  

},

  

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

  

},

  

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

  

}

})

大致如上所示。

至此,知晓云了解到此结束。因为有微信小程序云开发了,并且也会node+express 或者koa框架,所以直接使用微信小程序云开发即可,

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
终于过审!首批小程序插件诞生了
3 月 13 日小程序上线小程序插件功能,在此之后许多小程序开发者提交了插件等待审核,然而微信团队对于此事十分严谨,一次次告知「代码审核未通过」。 近几日,在历经重重「打击」后,首批过审的小程序插件终于诞生。 「知晓云 SDK」与「腾讯地图」插件无疑是其中的佼佼者,而这两款插件也将作为本文的范例,从使用插件前后的对比、使用插件方式等几个方面为大家做一个简单的介绍。同时,我们也将公开 AppID,方便大家申请使用。 知晓云是个好用、顺手的小程序 BaaS (Backend As A Service)后端云服务
知晓君
2018/07/04
1.1K0
知晓云助力小程序开发
小程序开发遇到瓶颈 虽然腾讯提供了小程序解决方案,https://cloud.tencent.com/solution/la。但是对于普通开发者或者小企业的开发人员来说,购买域名,网站备案、部署SSL
八哥
2018/01/18
2K0
知晓云助力小程序开发
知晓云 | 5 分钟实现小程序模板消息推送,你可以这样做
但是,有了知晓云,你不用再头疼如何开发模板消息模块。只需要几步简单的操作,就可以轻松实现模板消息推送。
知晓君
2018/07/30
1.5K0
只要 5 分钟,让你立刻拥有自己的小程序 | 知晓云
Hello,各位知晓程序的读者们,我是犯迷糊的小羊。目前是 ifanr 的一只前端攻城狮,同时也是知晓云团队的一员。
知晓君
2018/08/01
1.1K0
只要 5 分钟,让你立刻拥有自己的小程序 | 知晓云
微信小程序开发
要求开发者有一些前端知识(HTML,CSS ,JavaScript), “工欲善其事必先利其器”,我们得先:
狂奔滴小马
2021/11/15
7.3K0
微信小程序开发
开发 | 无需后端编码,10 分钟教你实现一个朋友圈小程序
虽然目标功能的业务逻辑并不复杂,但其背后需要一套靠谱的权限控制系统,也意味着需要一个完整的后端服务系统来支持运行。
知晓君
2018/07/27
8150
开发 | 教你刷爆朋友圈:2 招搞定小程序生成分享图片功能
最近频频刷屏的许多 HTML 5 作品,都用到了生成含有用户信息的图片并保存分享的功能。
知晓君
2018/07/27
7420
2019-面向小白的微信小程序-视频教学-基础
微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用
万少
2025/02/08
1840
2019-面向小白的微信小程序-视频教学-基础
接口人小程序快速开发--知晓云体验
今天要分享一个好东西,花叔保证不是广告。 话说,有一天,爱范儿的运营经理Angela找到我,说他们做了一个叫“知晓云”的东东,想邀请我来体验一下。 我说好啊,他们就给了我一枚体验码,然后我周末花了两天
花叔
2018/04/18
1.2K0
接口人小程序快速开发--知晓云体验
【腾讯游戏人生】微信小程序开发总结
目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。
一时两无
2018/06/08
3.2K3
微信小程序自定义组件
其中,components为组件目录,nodemodules为模块目录,pages为小程序的页面目录,utils为一些基础功能的封装。好比安装的第三方百度统计功能在此。
mySoul
2018/09/15
2.7K0
【愚公系列】《微信小程序与云开发从入门到实践》029-自定义组件基础
随着移动互联网的快速发展,微信小程序作为一种新兴的应用形态,已经成为了众多开发者和企业的重要选择。它不仅拥有广泛的用户基础,还具备轻便、便捷的特点,能够实现丰富的功能和良好的用户体验。而在小程序的开发过程中,自定义组件的使用则是提升代码复用性和维护性的重要手段。
愚公搬代码
2025/01/21
1260
开发 | 一篇文章,带你从 0 到 1 开发小程序插件
作者:郑智文 知晓程序注: 前不久,微信释放了一个重磅新能力:微信小程序插件功能。有了它,小程序开发者就可以通过这个功能,强化自身小程序能力;小程序服务提供商也可以用它,为开发者、用户提供强大的小程序功能支持,进一步拓展小程序能力。 插件固然好,但如何从零开发一个插件呢?今天,知晓程序就来手把手,教你如何从零开发一款微信小程序插件。 关注「知晓程序」微信公众号,回复「开发」,获取小程序开发技巧大全。 新建插件工程 新建插件的操作非常简单。只需要在微信开发者工具中新建小程序项目,并选择「建立插件快速启动模板」
知晓君
2018/07/04
4670
微信开发--微信小程序(一)
微信小程序开发相对于微信公众号的开发显得更为重要,下面就来简单介绍一下微信小程序的开发.
生南星
2019/07/22
16.4K0
微信开发--微信小程序(一)
开发 | 谁说 LBS 小程序开发难?前端女王大人手把手教会你
利用它,你可以在小程序中调用一个功能完整的地图,让小程序里所展示的地点更直观、更精确。
知晓君
2018/07/30
9030
微信小程序自定义tab,多层tab嵌套实现
小程序最近是越来越火了…… 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧。
solocoder
2022/04/06
8060
微信小程序自定义tab,多层tab嵌套实现
小程序开发知识必备-自定义组件
在 component 文件目录下,创建一个 select 文件夹,随后 select 文件夹下手动创建:select.js、select.json、select.wxml、select.wxss 四个文件。
leader755
2022/03/09
1.4K0
小程序开发知识必备-自定义组件
【推荐】开源项目minapp-重新定义微信小程序的开发
minapp 重新定义微信小程序的开发 官网:https://qiu8310.github.io/minapp/ 作者:Mora minapp 重新定义微信小程序的开发 使用 用 npm 安装命令行工具: npm install -g @minapp/cli --registry "https://registry.npmjs.org/" (避免从淘宝镜像上安装,它上面的还是老版本,已经给他们提了一个 issue) 初始化项目:minapp init <你要创建项目的文件夹> (同时支持创建 js 和
iKcamp
2018/03/30
1.4K0
【推荐】开源项目minapp-重新定义微信小程序的开发
[猫头虎分享21天微信小程序基础入门教程] 第12天:小程序的自定义组件开发
大家好,我是猫头虎,一名全栈软件工程师。今天我们继续微信小程序的学习,重点了解如何开发自定义组件。自定义组件可以提高代码的复用性和模块化程度,使开发更加高效和灵活。🚀
猫头虎
2024/05/26
1220
探索微信小程序的奇妙世界:从入门到进阶
https://cloud.tencent.com/developer/article/2465647?shareByChannel=link
忆愿
2024/12/01
1980
探索微信小程序的奇妙世界:从入门到进阶
推荐阅读
相关推荐
终于过审!首批小程序插件诞生了
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文