微信小程序自定义组件components(代码详解)


Posted in Javascript onOctober 21, 2019

在写小程序代码的时候,我们发现经常有一段代码我们经常敲,经常使用某一自定义组件,例如商城首页的轮播图和商品详情页的商品展示栏是近乎相同的代码;微信小程序里的弹窗提示可以使用在多个地方…

小程序自定义组件

找到components目录,没有就新建

微信小程序自定义组件components(代码详解)

在compoents目录里新建一个用于存放代码的目录(下面用g-swiper表示)

在g-swiper目录里新建Compoent(名字自取),新建后会和新建Page时一样自动生成四个页面文件(g-swiper.wxml g-swiper.wxss g-swiper.js g-swiper.json)

轮播图实例

<g-swiper list="{{imageList}}" g-class="swiper"/>

在index.wxml里只需要这简短一行代码就能实现一个轮播图组件

微信小程序自定义组件components(代码详解)

json声明

要想使用组件必先声明,在index.json里声明组件名称和地址

{
 "usingComponents": {
  "g-swiper":"/components/g-swiper/g-swiper"
 }
}

在组件的json也必须的声明,g-swiper.json(下面代码直接复制报错请将注释删掉)

{
 "component": true,    // 自定义组件声明
 "usingComponents": {}   // 可选项,用于引用别的组件
}

wxml和wxss

wxml和wxss里的代码跟普通页面里的代码没什么区别

g-swiper.wxml代码

<swiper class="g-class" circular autoplay interval='3000' duration='300' indicator-dots indicator-active-color='#fffff'>
 <block wx:for="{{list}}" wx:key="{{index}}">
  <swiper-item class="swiper-item">
   <image src="{{item}}"/>
  </swiper-item>
 </block>
</swiper>

g-swiper.wxss代码

.swiper-item image{
 width:100%;
 height:100%
}

js

js代码和普通页面js代码有所不同,这里是用Component包起来的而不是被Page包起来的

js代码

Component({
 externalClasses:["g-class"],
 properties: {
   list:{
    type:Array,
    value:[]
   }
 },
})

注意:这里的g-class样式和list数据我将它的定义权利交给引入它的一方,这里是index页面引入它

组件绑定外部方法

组件绑定外部方法的方式,以一自定义button为例

g-btn.wxml代码

<button bindtap="btnTest">g-btn</button>

g-btn.js代码

Component({
 methods: {
   /*
   * 公有方法
   */
  btnTest:function(){
   this.triggerEvent('action')
  }
 }
})

在index里引入并且展示出来

index.wxml代码

<g-btn bind:action="btnTest"></g-btn>

在index.js里加入方法btnTest()

btnTest:function(){
 console.log('g-btn is clicked now!')
}

可以看到Console栏里出现了“g-btn is clicked now!”字样

弹窗组件实例

微信小程序自定义组件components(代码详解)

index页面引入,直接上代码

index.wxml代码

<view class="container">
  <dialog id='dialog' 
   title='这是标题' 
   content='这是对话框的内容' 
   cancelText='取消' 
   confirmText='确定'
   bind:cancelEvent="_cancelEvent" 
   bind:confirmEvent="_confirmEvent">
  </dialog>
  <button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>

index.js代码

Page({
 onReady: function () {
  //获得dialog组件
  this.dialog = this.selectComponent("#dialog");
 },
 showDialog() {
  this.dialog.showDialog();
 },
 //取消事件
 _cancelEvent() {
  console.log('你点击了取消');
  this.dialog.hideDialog();
 },
 //确认事件
 _confirmEvent() {
  console.log('你点击了确定');
  this.dialog.hideDialog();
 }
})

组件dialog目录里

dialog.wxml代码

<view class='wx_dialog_container' hidden="{{!isShow}}">
  <view class='wx-mask'></view>
  <view class='wx-dialog'>
    <view class='wx-dialog-title'>{{ title }}</view>
    <view class='wx-dialog-content'>{{ content }}</view>
    <view class='wx-dialog-footer'>
     <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
     <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
    </view>
  </view>
</view>

dialog.wxss代码

.wx-mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
position: fixed;
z-index: 5000;
width: 80%;
max-width: 600rpx;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.wx-dialog-title{
font-size: 18px;
padding: 15px 15px 5px;
}
.wx-dialog-content{
padding: 15px 15px 5px;
min-height: 40px;
font-size: 16px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.wx-dialog-footer{
display: flex;
align-items: center;
position: relative;
line-height: 45px;
font-size: 17px;
}
.wx-dialog-footer::before{
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.wx-dialog-btn{
display: block;
-webkit-flex: 1;
flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
color: #353535;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
color: #3CC51F;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}

dialog.js代码

Component({
 /**
  * 组件的属性列表
  * 用于组件自定义设置
  */
 properties: {
  // 弹窗标题
  title: {      // 属性名
   type: String,   // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
   value: '标题'   // 属性初始值(可选),如果未指定则会根据类型选择一个
  },
  // 弹窗内容
  content: {
   type: String,
   value: '弹窗内容'
  },
  // 弹窗取消按钮文字
  cancelText: {
   type: String,
   value: '取消'
  },
  // 弹窗确认按钮文字
  confirmText: {
   type: String,
   value: '确定'
  }
 },
 /**
  * 私有数据,组件的初始数据
  * 可用于模版渲染
  */
 data: {
  // 弹窗显示控制
  isShow: false
 },
 /**
  * 组件的方法列表
  * 更新属性和数据的方法与更新页面数据的方法类似
  */
 methods: {
  /*
   * 公有方法
   */
  //隐藏弹框
  hideDialog() {
   this.setData({
    isShow: !this.data.isShow
   })
  },
  //展示弹框
  showDialog() {
   this.setData({
    isShow: !this.data.isShow
   })
  },
  /*
  * 内部私有方法建议以下划线开头
  * triggerEvent 用于触发事件
  */
  _cancelEvent() {
   //触发取消回调
   this.triggerEvent("cancelEvent")
  },
  _confirmEvent() {
   //触发成功回调
   this.triggerEvent("confirmEvent");
  }
 }
})

总结

以上所述是小编给大家介绍的微信小程序自定义组件components,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
微信小程序实现侧边分类栏
Oct 21 #Javascript
微信小程序实现侧边栏分类
Oct 21 #Javascript
微信小程序中weui用法解析
Oct 21 #Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 #Javascript
小程序实现日历左右滑动效果
Oct 21 #Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 #Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
php的字符串用法小结
2010/06/08 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
js重写方法的简单实现
2016/07/10 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
layui的select联动实现代码
2019/09/28 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
python制作简单五子棋游戏
2019/06/18 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python字符串三种格式化输出
2020/09/17 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
应用数学专业求职信
2014/03/14 职场文书
部门活动策划方案
2014/08/16 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
销售工作决心书
2015/02/04 职场文书
5.12护士节活动总结
2015/02/10 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python