微信小程序封装组件的实现,小程序如何封装组件_Hi小程序
微信小程序封装组件的实现,小程序如何封装组件
|HiShop|阅读量：
导读：相信大家在开发小程序时会遇到某个功能多次使用的情况，比如弹出框。这个时候大家首先想到的是组件化开发，就是把弹出框封装成一个组件，然后哪里使用哪里就调用，对，看来大家都是有...
Hi小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈微信小程序封装组件的实现,小程序如何封装组件。
最新消息， 近日， 微信官方对小程序组件进行两个调整，给用户提供更自主的选择权。 1 打开其他小程序组件上线，用户点击后就可以直接跳转到其他小程序了。 2 新增打开小程序设置页组件，用户点击后可以进入设置页管理自己的各项授权信息。 ■开发者....
相信大家在开发小程序时会遇到某个功能多次使用的情况，比如弹出框。这个时候大家首先想到的是组件化开发，就是把弹出框封装成一个组件，然后哪里使用哪里就调用，对，看来大家都是有思路的人，但是要怎样实现呢。
微信小程序封装组件具体实现步骤：
1.新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图
2.我们可以写一些组件样式和布局，跟页面写法类似，我就不多说了，直接把代码贴出 :
popup.wxml
&view class=&wx-popup& hidden=&{{flag}}&&
&view class='popup-container'&
&view class=&wx-popup-title&&{{title}}&/view&
&view class=&wx-popup-con&&{{content}}&/view&
&view class=&wx-popup-btn&&
&text class=&btn-no& bindtap='_error'&{{btn_no}}&/text&
&text class=&btn-ok& bindtap='_success'&{{btn_ok}}&/text&
popup.wxss
/* component/popup.wxss */
.wx-popup {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
.popup-container {
left: 50%;
width: 80%;
max-width: 600
border: 2rpx solid #
border-radius: 10
box-sizing: bordre-
transform: translate(-50%, -50%);
background: #
.wx-popup-title {
width: 100%;
padding: 20
text-align:
font-size: 40
border-bottom: 2
.wx-popup-con {
margin: 60rpx 10
text-align:
.wx-popup-btn {
justify-content: space-
margin-bottom: 40
.wx-popup-btn text {
align-items:
justify-content:
width: 30%;
height: 88
border: 2rpx solid #
border-radius: 88
样式和布局和布局已经写好了接下来要介绍的就是
Component构造器
Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
Component&构造器构造的组件也可以作为页面使用。
使用&this.data&可以获取内部数据和属性值，但不要直接修改它们，应使用&setData&修改。
生命周期函数无法在组件方法中通过&this&访问到。
属性名应避免以 data 开头，即不要命名成&dataXyz&这样的形式，因为在 WXML 中，&data-xyz=&&&会被作为节点 dataset 来处理，而不是组件属性。
在一个组件的定义和使用时，组件的属性名和data字段相互间都不能冲突（尽管它们位于不同的定义段中）。
component介绍完后就是最为关键的js了
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
* 组件的属性列表
properties: {
type: String,
// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '标题'
// 属性初始值（可选），如果未指定则会根据类型选择一个
// 弹窗内容
content: {
type: String,
value: '内容'
// 弹窗取消按钮文字
type: String,
value: '取消'
// 弹窗确认按钮文字
type: String,
value: '确定'
* 组件的初始数据
flag: true,
* 组件的方法列表
methods: {
//隐藏弹框
hidePopup: function () {
this.setData({
flag: !this.data.flag
//展示弹框
showPopup () {
this.setData({
flag: !this.data.flag
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
_error () {
//触发取消回调
this.triggerEvent(&error&)
_success () {
//触发成功回调
this.triggerEvent(&success&);
上边会用到一个&triggerEvent下面我们就来介绍下：
自定义组件触发事件时，需要使用&triggerEvent&方法，指定事件名、detail对象和事件选项。
现在一个弹窗的组件就封装好了接下来就是调用了。
调用的时候需要在调用的页面新建一个json文件，json文件里需要配置usingComponents就是引用组件，看代码：
index.json
&usingComponents&: {
&popup&: &/component/popup/popup&
现在基本上完成了需要的就是在首页引用了。
&!--index.wxml--&
&view class=&container&&
&view class=&userinfo&&
&button bindtap=&showPopup&& 点我 &/button&
&popup id='popup'
title='小组件'
content='学会了吗'
btn_no='没有'
btn_ok='学会了'
bind:error=&_error&
bind:success=&_success&&
配置index.js加上点击事件
//index.js
//获取应用实例
const app = getApp()
onReady: function () {
//获得popup组件
this.popup = this.selectComponent(&#popup&);
showPopup() {
this.popup.showPopup();
//取消事件
_error() {
console.log('你点击了取消');
this.popup.hidePopup();
//确认事件
_success() {
console.log('你点击了确定');
this.popup.hidePopup();
一个弹窗组件就完成了。
　　小程序数据助手是一款运营小程序必备工具，可以随时随地的查看自己小程序后
猜你喜欢的内容
类小程序组件开发文档
小程序客服消息开发文档
近日，微信官方小游戏开放客服消息能力，下面是官方开发文档： openCustomerServiceConversation(Object object) 基础库 2.0.3 开始支持，低版本需做兼容处理 进入客服会话。后台接入方式与小....
类小程序组件小程序开发实例
扫码点餐小程序系统开发
与工业化思维的大规模生产、大规模销售、大规模传播等特征不同的是，今天的互联网+思维正在重构市场、用户、产品以及产业价值链，这种信息化革命使得用户迈入一个以开放、平等为特征的全新消费时代。饭点高峰期，顾客可在排队期间通过手机扫描餐厅门口展架上的二维码，进入点餐小程序，率先....
小程序产品推荐
移动云商城
一款会赚钱的网上商城系统——移动云商城，让零售企业转型电商更简单！独创6合一全网营销模式、裂变式推广分佣快速吸粉引流，不论微信、APP、手机触屏还是PC端网上购物商城，只要1个后台即可掌控全网最火爆的6大商城！
小程序基础入门
热门小程序
读过此文的人还读过
官方微信>>>微信小程序picker组件下拉框选择input输入框的实例
转载 &更新时间：日 10:28:51 & 作者：今天一点也不冷
这篇文章主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
微信小程序picker组件下拉框选择input输入框的实例
实现效果图：
&view class="row-wrap"&
&view class="label"&预约项目&/view&
&picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}"&
&text&{{casArray[casIndex]}}&/text&
&view class="section {{reply?'on':'off'}}"&
&input name="other" placeholder="请输入所预约项目" type="text"/&
nickName: "",
avatarUrl: "",
casArray: ['双眼皮', 'TBM', '隆胸', '减肥', '手动输入'],
userName: '',
mobile: '',
Gender: 'female',
casIndex: 0,
* 生命周期函数--监听页面加载
bindCasPickerChange: function (e) {
console.log('乔丹选的是', this.data.casArray[e.detail.value])
if (e.detail.value == 4) {
this.setData({ reply: true })
this.setData({ reply: false })
this.setData({
casIndex: e.detail.value
添加input框的样式
font-size:28
margin-left: 50
margin-top: 30
.on{display: block}
.off{display: none}
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具手把手教你实现小程序中的自定义组件 - 咚..咚 - 博客园
之前做开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只是寥寥几句，一笔带过而已，所以写起来真的是非常非常痛苦！！
好在微信小程序的库从 1.6.3 开始，官方对于自定义组件这一块有了比较大的变动，首先比较明显的感觉就是文档比以前全多了，有木有！（小程序文档），现在小程序支持简洁的组件化编程，可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中复用，提高自己代码的可读性，降低自己维护代码的成本！
本篇文章就是手把手教你实现小程序中自定义组件，坐稳啦~
要做自定义组件，我们先定一个小目标，比如说我们在小程序中实现一下 WEUI 中的弹窗组件，基本效果图如下。
我们初始化一个小程序（本示例基础版本库为 1.7 ），删掉里面的示例代码，并新建一个&components&文件夹，用于存放我们以后开发中的所用组件，今天我们的目的是实现一个 弹框 组件，因此，我们在&components&组件中新建一个&Dialog&文件夹来存放我们的弹窗组件，在&Dialog&下右击新建&Component&并命名为&dialog&后，会生成对应的&json wxml wxss js&4个文件，也就是一个自定义组件的组成部分，此时你的项目结构应该如下图所示：
组件初始化工作准备完成，接下来就是组件的相关配置，首先我们需要声明自定义组件，也就是将&dialog.json&中&component&字段设为&true&：
"component": true,
// 自定义组件声明
"usingComponents": {}
// 可选项，用于引用别的组件
其次，我们需要在&dialog.wxml&文件中编写弹窗组件模版，在&dialog.wxss&文件中加入弹窗组件样式，它们的写法与页面的写法类似，我就不赘述，直接贴代码啦~
dialog.wxml&文件如下：
dialog.wxss&文件如下：
组件的结构和样式都有了，还缺少什么呢，没错，还缺&js&， 眼睛比较犀利的同学，可能已经发现了我们在&dialog.wxml&文件中的会有一些比如&{{ isShow }}&、&{{ title }}&这样的模版变量，还定义了&_cancelEvent&和&_confirmEvent&两个方法，其具体实现就是在&dialog.js&中。
dialog.js&是自定义组件的构造器，是使用小程序中&Component&构造器生成的，调用&Component&构造器时可以用来指定自定义组件的属性、数据、方法等，具体的细节可以参考一下官方的文档
下面我通过代码注释解释一下构造器中的一些属性的使用：
截至目前为止，你应该完成了一个自定义弹窗组件的大部分，可是你保存后并没有发现任何变化，因为我们还需要在&index.wxml&文件中引入它！
首先需要在&index.json&中引入组件：
"usingComponents": {
"dialog": "/components/Dialog/dialog"
然后我们在&index.wxml&中引入它，并增加我们自定义的一些值，如下
嗯哪，还差最后一步，&index.js&配置，没错，这个也很简单，我就复制粘贴了
到此！大功告成！
让我们测试一下试试看：
点击按钮之后呢，会出现如下效果：
点击取消或者确定按钮的话，我们在事件中设置了弹窗会关闭，并会打印出相应的信息，具体点击完应该怎么做，就看你们自己发挥了，我只能帮你到这里了~
现在，你已经基本掌握了小程序中的自定义组件开发技巧，怎么样，是不是很棒，应该给自己点个赞，打个call。 总体来说，小程序推出自定义组件后，感觉方便了很多，还没有 get 的小伙伴们，赶紧学习学习，以后多用组件化开发，就不会那么难受了，加油哦~
具体代码，我已经托管到&&上了，欢迎&issue&~
原文地址：http://blog.csdn.net/rolan1993/article/details/只需一步，快速开始
后使用快捷导航没有帐号？
所属分类： &
微信小程序实现下拉刷新，上拉加载效果，实用小程序功能
查看: 112|回复: 0
& 主题帖子积分
专家路上, 积分 1075, 距离下一级还需 3925 积分
专家路上, 积分 1075, 距离下一级还需 3925 积分
本帖最后由 五道杠 于
15:23 编辑
微信小程序实现下拉刷新，上拉加载效果，实用的小程序功能
下拉刷新和上拉加载是两个独立又联系的功能，下拉刷新除了重新请求服务器数据外还要对之前的状态和页码进行初始化，而上拉加载需要服务器端有分页机制，和内存中数据的添加和页码的对应变化，以及状态的变化。
1213330-ea93b7bf.gif (3.85 MB, 下载次数: 1)
15:13 上传
对下拉刷新是有一定支持的，那就是json文件里的enablePullDownRefresh参数，设置enablePullDownRefresh后会触发js文件中的onPullDownRefresh方法，你可以在里面做要做的事情，比如对页面的初始化，对数据列表的清空等，初始化数据后，记得最后执行一次wx.stopPullDownRefresh()，将下拉关闭，否则那些小点点是不会消失的。
tips：下拉刷新的样式在一定程度上也可以通过backgroundColor和backgroundTextStyle改变。由于enablePullDownRefresh默认为false ,这里enablePullDownRefresh=true设置后才会触发onPullDownRefresh方法,还有模拟器测试的时候需要按住页面后下拉，才会看到刷新提示 。
如果scroll-view高度设置为100%，则不能触发上拉刷新和下拉加载事件。使用scroll-view的时候里面不可以使用某些标签textarea、map、canvas、video组件
scroll-view滚动中无法触发onPillDownRefresh事件，若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部。
e01a3.jpeg (29.47 KB, 下载次数: 0)
15:13 上传
&&/**
& &* 页面相关事件处理函数--监听用户下拉动作
& &*/
&&onPullDownRefresh: function () {
& & console.log(&下拉刷新&)
& & let that =
& & that.setData({
& && &pageIndex: 0, // 每次触发下拉事件pageIndex=0
& & })
& & that.gainLoadingListData()
&&},
&&/**
& &* 初始化数据或是下拉刷新数据
& &*/
&&gainLoadingListData:function() {
& & let that =
& & let pageIndex = that.data.pageI
& & let userCode = that.data.userC
& & console.log(&pageIndex == &, pageIndex);
& & networking.gainData(userCode, pageIndex, function (data) {
& && &wx.stopPullDownRefresh(); // 数据请求成功后，停止刷新
& && &var array =
& && &that.setData({
& && &&&array: array,
& && &})
& & }, function (message) {
& && &console.log(&message=&, message)
& & })
&&},复制代码
上拉加载，获取更多数据主要利用了js中的onReachBottom方法，它表示“页面上拉触底事件的处理函数”，我们就在这时请求服务器获取新的数据并且添加到现有数据下面。
/**
& &* 页面上拉触底事件的处理函数
& &*/
&&onReachBottom: function () {
& & console.log(&上拉加载&)
& & let that =
& & that.setData({
& && &loading: true,&&//把&上拉加载&的变量设为false，显示
& && &pageIndex: that.data.pageIndex + 5
& & })
& & // 上拉获取更多数据
& & this.gainMoreLoadingListData()
&&},
/**
& &* 上拉获取更多数据
& &*/
&&gainMoreLoadingListData: function () {
& & let that =
& & let pageIndex = that.data.pageI
& & let userCode = that.data.userC
& & console.log(&pageIndex == &, pageIndex);
& & networking.gainData(userCode, pageIndex, function (data) {
& && &if (data.length != 0) { // 数组不为空
& && &&&var array = that.data.array.concat(data);
& && &&&for (var index in array) {
& && && & var date = new Date(array[index].orderTime)
& && && & var y = date.getFullYear();
& && && & var m = (date.getMonth() + 1);
& && && & var d = date.getDate();
& && && & var h = date.getHours();
& && && & var mm = date.getMinutes();
& && && & m = m & 9 ? m : '0' +
& && && & d = d & 9 ? d : '0' +
& && && & // h = h & 9 ? h : '0' +
& && && & // mm = mm & 9 ? mm : '0' +
& && && & var dateStr = [y, m, d,].join('-');
& && && & // var timeStr = [h, mm].join(':')
& && && & // var format = dateStr + & & + timeS
& && && & var format = dateStr
& && && & array[index].orderTime =
& && &&&}
& && &&&that.setData({
& && && & array: array,
& && && & loading: true,&&//把&上拉加载&的变量设为false，显示
& && &&&})
& && &} else { // 数组为空
& && &&&that.setData({
& && && & loading: false,&&//把&上拉加载&的变量设为true，隐藏
& && && & loaded: true,&&//把&上拉加载完成&的变量设为false，显示
& && &&&})
& && &}
& & }, function (message) {
& && &console.log(&message=&, message)
& & })
&&},复制代码
关注我的同学（只显示前32名）
www.henkuai.com—微信开发者的分享交流平台，专注微信开发生态。
天津市滨海新区中新生态城中成大道生态建设公寓9号楼3层301
微信公众号使用本插件，可以小程序中快速实现下拉菜单的功能
请前往下载组件代码。
解压组件代码，在小程序主目录下创建目录wmzj，用于存放小程序组件代码，目录结构如下：
在页面page.wxml中引入组件模板
&import src="/wmzj/dropdown_menu/dropdown_menu.wxml"/&
&template is="wmzj_dropdown_menu" data="{{menu_data}}"/&
在页面page.wxss中引入组件样式
@import "/wmzj/dropdown_menu/dropdown_menu.wxss";
在页面page.js中加入初始数据和时间相应函数
// 引入组件js文件
var dropdown_menu = require("../../wmzj/dropdown_menu/dropdown_menu.js");
// 组件初始化数据
menu_data: {
menu_items: [
name: "动物",
sub_name: ["猴子","长颈鹿","龙"]
name: "汽车品牌",
sub_name: ["法拉利","兰博基尼","保时捷"]
name: "地名",
sub_name: ["广州","深圳"]
// 组件初始函数
DropDownMenuFunc: function(e) {
dropdown_menu.DropDownMenuFunc(e);
// 组件选择事件
ClickSubMenu: function(e) {
console.log(e);
var menu_name = e.currentTarget.dataset.
var sub_name = e.currentTarget.dataset.
wx.showModal({
showCancel: false,
title: '点击菜单',
content: menu_name + '-' + sub_name,
如果觉得wmdz对您有用，请随意打赏。您的支持将鼓励我继续创作！
微信：mmxingkong123 QQ：
阅读(...) 评论()