手把手教你开发微信小程序中的插件
继上次 手把手教你实现微信小程序中的自定义组件 已经有一段时间了(不了解的小伙伴建议去看看,因为插件很多内容跟组件相似),今年3月13日,小程序新增了 小程序**「插件」 功能,以及开发者工具新增 「代码片段」**功能,即在小程序基础库 1.9.6 版本上,允许开发者开发插件,同时将插件提供给其它小程序使用,这无疑给开发者带来了福音,因为不同的小程序之间可以共享代码啊,这将省去不少的开发成本了~ 小程序插件接入小程序插件不像自定义组件那样,很方便的就可以嵌在自己的代码中了,它是需要去官网开通小程序插件功能才能使用的,详细的接入流程和文档可以阅读官方的小程序插件接入指南,当然这不是我们本篇文章的重点,本篇文章重点是教你如何开发一个微信小程序插件~ 具体实现建立模板要开发一个小程序插件,前期准备要充分,我们打开在开发者工具中,我们按照正常步骤新建一个小程序项目,并选择 「建立插件快速启动模板」 ,没有 项目结构插件项目建立完成之后,开发者工具就会自动新建一个插件项目,官网给的示例项目的结构如下: 我们先大概了解一下~ 项目中包含了两个目录:
前者就跟普通小程序一样,我们可以正常开发,后来用来插件调试、预览和审核,不同的是
{"publicComponents": {"list": "components/list/list"},"main": "index.js"} 具体实现有些人可能纳闷了?觉得官方不是现成的示例了,为啥我还要写这篇文章呢?在我看来,官网给的示例过于简单,不足以展示插件的用法,官方给的示例中很多东西都没有涉及到,只是单纯的数据列表渲染,没有交互,这在实际开发中几乎是不存在的,大部分情况下,我们都是要通过插件的回调来进行一系列操作,本篇文章就是专门针对微信官网示例的痛点,分享一下自己的实现过程和思路~ ok,老规矩,首先先定一个小目标,我们要实现一个省市区选择器的插件,并在点击提交按钮的时候把数据提交过去,大整效果如下图所示~ Step1首先,我们在 代码如下: 结构 <view class='section'><view class="section-title">省市区选择器</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" ><view class="picker">当前选择:{{region[0]}},{{region[1]}},{{region[2]}}</view></picker></view> 样式
js Component({properties : {region : {type : Array ,value: ['北京市', '北京市', '东城区']}},data: {},methods : {bindRegionChange(e){this.setData({region: e.detail.value })}}) 跟我们书写自定义组件基本相同,数据绑定在 Step2到这里,你已经实现了一个自定义的组件,如何将其以插件的形式让其他小程序应用呢,需要配置两个地方,一个是
{"publicComponents": {"regionPicker" : "components/regionPicker/regionPicker"},"main": "index.js"} 另一个是在我们需要的页面中去引入(这里是
{"usingComponents": {"regionPicker" : "plugin://myPlugin/regionPicker"}} 接着页面中调用一下即可
<!--引入插件 --><regionPicker /><button class='submit'>提交</button> 现在你看到的效果基本也就是下图这样了~ 嗯,看起来功能都正常,好像也没什么问题啊~ 不对,好像又有问题了,我切换后的数据怎么传过来,我点击提交按钮的时候怎么穿我选择区域呢,确实是,我们接着看~ Step3我们接下来就要解决上面的问题,首先,我们有了之前开发组件的经验,应该都知道,我们刚才是在 嗯,其实回调触发也很简单,有过自定义组件开发经验的小伙伴应该早都想到了,跟自定义组件一样,我们只需要在组件 bindRegionChange(e){this.setData({region: e.detail.value })// 触发回调this.triggerEvent("changeEvent", { region: this.data.region})} 我们把每次的改变值通过回调穿回去,这样我们直接在
Page({data: {region: ['广东省', '广州市', '海珠区']},submit(){console.log(this.data.region)},changeEvent(e){console.log(e)this.setData({region : e.detail.region})},onLoad(){}}) 这样,每次选择区域后,通过回调触发,我们就可以通过 到这里,插件的数据交互传递基本没什么问题了~ 想想,我们还有什么没有用到的呢,插件的 Step4我们知道了
后面通过 还记得我们之前的插件入口文件 var api = require('./api/api.js')// 获取设备信息wx.getSystemInfo({success: function(res) {// 存数据api.setSystemInfo({model: res.model ,system: res.system})},})module.exports = {getPluginInfo: api.getPluginInfo ,getSystemInfo: api.getSystemInfo} 后面我们还看到了
我们引入插件后,如何调用插件的接口呢? 其实也很简单,我们只需要在对应的 现在在页面 看到 返回如下内容: 接口数据也能完美的获取,棒棒哒~ |
手把手教你开发微信小程序中的插件相关推荐
- 微信小程序轮播中的current_手把手教你美化微信小程序中的轮播效果
微信小程序现在依然很火,相信大家有目共睹:所以作为前端开发者,掌握如何开发小程序,是一项必备技能了,你觉得呢? 相对于PC和H5开发,小程序坑很多,所以需要慢慢"踩",被坑多了,路 ...
- 开发微信小程序 中遇到的坑 及解决方法
开发微信小程序 中遇到的坑 及解决方法 参考文章: (1)开发微信小程序 中遇到的坑 及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
- 手把手教你进行微信小程序开发案例1---计算器
由于之前的文章中已经教会了大家如何注册自己的一个微信小程序,并且利用微信开发工具进行小程序的开发,所以这里不再介绍如何下载工具和注册账号,不懂的小伙伴们可以观看我之前发过的教程哦. #####下面我将 ...
- 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...
- 手把手教你玩微信小程序跳一跳
最近微信小程序火的半边天都红了,虽然不会写,但是至少也可以仿照网上大神开发外挂吧!下面手把手教妹纸们(汉纸们请自觉的眼观耳听)怎么愉快的在微信小游戏中获得高分. 废话不多说,咱们这就发车了!呸!咱们这 ...
- 手把手教你制作微信小程序,开源、免费、快速搞定
最近做了个"罗孚传车"的小程序 一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) ...
- 另一个小程序 返回的支付结果如何得到_手把手教你测微信小程序
WeTest 导读 在小程序持续大量爆发的形势下,现在已经成为了各平台竞争的战略布局重点.至今年2月,月活超500万的微信小程序已经达到237个,其中个人开发占比高达2成.因小程序的开发门槛低.传播快 ...
- 手把手教您搭建微信小程序商城?(二)
之前[文章]有很多人问我小程序商城上线的事情~所以我打算把文章完善下 一.注册小程序 进入微信公众平台,单击"立即注册",选择帐号注册类型:[小程序]. 2.填写小程序的帐户信息, ...
- 手把手教你迁移微信小程序到 QQ 浏览器!
继微信.QQ 之后,QQ 浏览器上也可以使用小程序了. 12 月 5 日,QQ浏览器小程序宣布,实现与微信小程序打通.QQ 浏览器 Android 版现已上线小程序,在搜索的场景下,小程序嵌入 QQ ...
最新文章
- leetcode 279. 完全平方数 bfs广度优先解法 图解 动态规划解法 c代码
- oracle12 官网文档,Oracle 21c 官方文档 发布了
- c# 操作excle
- nssl1478-题【dp】
- Java最新大厂面试真题总结,瞬间高大上了!
- oracle中游标的使用
- fiddler抓包工具配置详解
- Qt 实现多语言 国际化 翻译
- UnsatisfiedDependencyException
- html文件如何显示大纲视图,如何使用大纲视图生成章节目录
- 包含类别变量的中介模型检验方法
- 免费云服务器申请攻略!白嫖党乐开了花
- 还不重视!脸上有螨虫的几种表现?
- Gmail 为什么打不开
- A2M峰会直击|闲鱼纳米镜——人人都是数据分析师
- 前端技术(7) : 省市区联动并设置默认值II
- 解析:外部网页内如何一键复制微信号添加微信好友
- JDK源码分析--HashMap深入理解
- up主迎来春天,开始叫马云爸爸啦,阿里巴巴通过淘宝收购B站2400万股
- 【codecombat】 试玩全攻略 第六关 cell commentary