微信小程序自定义组件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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
Vue快速实现通用表单验证的方法
Feb 24 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弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
Node.js文件操作详解
2014/08/16 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
JS如何生成动态列表
2020/09/22 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python装饰器初探(推荐)
2016/07/21 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
喜之郎果冻广告词
2014/03/20 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
Pillow图像处理库安装及使用
2022/04/12 Python