在写小程序代码的时候，我们发现经常有一段代码我们经常敲，经常使用某一自定义组件，例如商城首页的轮播图和商品详情页的商品展示栏是近乎相同的代码；微信小程序里的弹窗提示可以使用在多个地方…
小程序自定义组件
找到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里只需要这简短一行代码就能实现一个轮播图组件
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 circular autoplay interval='3000' duration='300' indicator-dots indicator-active-color='#fffff'> <block wx:for="{{list}}" wx:key="{{index}}"> <swiper-item> <image src="https://www.jb51.net/{{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!”字样
弹窗组件实例
index页面引入，直接上代码
index.wxml代码
<view> <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 hidden="{{!isShow}}"> <view></view> <view> <view>{{ title }}</view> <view>{{ content }}</view> <view> <view catchtap='_cancelEvent'>{{ cancelText }}</view> <view 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代码