微信小程序自定义组件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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
JS之相等操作符详解
Sep 13 Javascript
js实现无缝滚动图
Feb 22 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
浅谈Vue数据响应
Nov 05 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP实现八皇后算法
2019/05/06 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python异常处理例题整理
2019/07/07 Python
Python实现最常见加密方式详解
2019/07/13 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python statsmodel的使用
2020/12/21 Python
Python try except else使用详解
2021/01/12 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
学生自我鉴定范文
2013/10/04 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
奖励通知
2015/04/22 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS