微信小程序中的組件
ps:
剛做小程序的時(shí)候枪狂，上傳代碼有限，組件開(kāi)發(fā)在官方文檔的描述又少的可憐宋渔，當(dāng)時(shí)真的是非常的痛苦州疾，不過(guò)，不要慌皇拣，現(xiàn)在又了我這么長(zhǎng)時(shí)間的積累严蓖，現(xiàn)在開(kāi)發(fā)一個(gè)小程序自定義組件已經(jīng)是一個(gè)很 So Eacy的事情了薄嫡。 接下來(lái)，帶大家一步一個(gè)腳印的自定義一個(gè)微信小程序的彈框組件颗胡。come：辽睢！開(kāi)車==>
效果圖：
效果圖
開(kāi)始吧毒姨，第一步：
我們初始化一個(gè)小程序哑蔫，刪掉index的實(shí)例代碼，讓index變的空空如也弧呐，并且新建一個(gè)components文件夾闸迷，用于存放我們接下來(lái)要開(kāi)發(fā)用的組件，然后在components文件夾中創(chuàng)建一個(gè) dialog 的文件夾俘枫，點(diǎn)擊 dialog文件夾然后右鍵選擇 Component 并命名為 dialog 會(huì)自動(dòng)生產(chǎn)對(duì)應(yīng)的文件腥沽，如果你現(xiàn)在的目錄結(jié)構(gòu)跟下面的這個(gè)一樣，那就沒(méi)啥問(wèn)題鸠蚪，可以進(jìn)入下一步了：
image.png
第二步：
- 關(guān)于的組件所需要的基本工作已經(jīng)做好了今阳，接下來(lái)就是組件的相關(guān)配置，首先需要聲明一下我們自定義的組件茅信，打開(kāi)我們創(chuàng)建的 dialog.json :將代碼設(shè)置如下：
// dialog.json
{
"component": true,//自定義組件聲明
"usingComponents": {} // 可選項(xiàng)盾舌，用于引入別的組件
}
ps: 小伙伴們?nèi)绻猚opy這段代碼記得刪掉json文件中的注釋哦，要不然會(huì)報(bào)錯(cuò)的
- 接下來(lái)我們就需要寫 dialog 的模板了汹押，話不多說(shuō)矿筝，直接上 dialog 的wxml和wxss 的代碼
dialog.wxml ：
<!--pages/components/Dialog/dialog.wxml-->
<view class='dialog-container' hidden="{{!isShow}}">
<view class='mask'></view>
<view class='dialog'>
<view class='dialog-title'>{{ title }}</view>
<view class='dialog-content'>{{ content }}</view>
<view class='dialog-footer'>
<view class='dialog-btn' catchtap='cancelEvent'>{{ cancelText }}</view>
<view class='dialog-btn' catchtap='confirmEvent'>{{ confirmText }}</view>
</view>
</view>
</view>
dialog.wxss
/* pages/components/Dialog/dialog.wxss */
.mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.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;
}
.dialog-title{
font-size: 18px;
padding: 15px 15px 5px;
}
.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;
}
.dialog-footer{
display: flex;
align-items: center;
position: relative;
line-height: 45px;
font-size: 17px;
}
.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);
}
.dialog-btn{
display: block;
-webkit-flex: 1;
flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
}
.dialog-footer .dialog-btn:nth-of-type(1){
color: #353535;
}
.dialog-footer .dialog-btn:nth-of-type(2){
color: #3CC51F;
}
.dialog-footer .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);
}
- 組件的結(jié)構(gòu)和樣式都已經(jīng)大功告成了，但是我們肯定還需要 js 來(lái)完成組件的功能棚贾，我相信眼神好的各位已經(jīng)發(fā)現(xiàn)了一些會(huì)用到 js 的地方了吧窖维，（斜眼笑） 栗子：{{isShow}}、{{title}} 還定義了 cancelEvent 和 confirmEvent 兩個(gè)方法妙痹，這些都是在 dialog.js 中了
dialog.js 是自定義組件的構(gòu)造器铸史，是用小程序的 component 構(gòu)造生產(chǎn)的 ，Component構(gòu)造器可以用來(lái)指定自定義組件的屬性怯伊、方法 琳轿、數(shù)據(jù)
配置一下dialog.js
// pages/components/Dialog/dialog.js
Component({
/**
* 組件的屬性列表
*/
options:{
multipleSlots: true //在組件定義時(shí)選項(xiàng)中啟用slot
},
// 組件的屬性列表，用于組件自定義設(shè)置
properties: {
// 彈窗標(biāo)題
title:{ // 屬性名字
type: String,// 類型(必填項(xiàng)){String,Number,Boolean,Object,null}
value: '我是dialog'// 屬性初始值
},
// dialog 內(nèi)容
content: {
type: String,
value: '我是dialog內(nèi)容'
},
// 取消按鈕
cancelText: {
type: String,
value: '取消'
},
// 彈窗確認(rèn)按鈕文字
confirmText: {
type: String,
value: '確定'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
isShow: false//dialog顯示隱藏
},
/**
* 組件的方法列表
*/
methods: {
// 隱藏彈框
hideDialog(){
this.setData({
isShow: !this.data.isShow
})
},
// 展示彈框
showDialog(){
this.setData({
isShow: !this.data.isShow
})
},
cancelEvent(){
this.triggerEvent('cancelEvent')
},
confirmEvent(){
this.triggerEvent('confirmEvent')
}
}
})
- 到現(xiàn)在我們已經(jīng)完成了微信小程序自定義組件的大部分耿芹，接下來(lái)我們需要在 index.wxml 中引入它才可以使用哦
index.json
{
"usingComponents": {
"dialog": "/pages/components/Dialog/dialog" // 這里要注意路徑不能寫錯(cuò)了哦崭篡，而且json文件不能有注釋的
}
}
index.wxml:
<view class="container">
<dialog id='dialog'
title='dialog標(biāo)題'
content='dialog內(nèi)容部分'
cancelText='取消'
confirm='謝謝你'
bind:cancelEvent="cancelEvent"
bind:confirmEvent="confirmEvent">
</dialog>
<button type="primary" bindtap="showDialog"> 點(diǎn)我顯示 </button>
</view>
最后配置一下index.js
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
//獲得dialog組件
this.dialog = this.selectComponent("#dialog");
},
showDialog() {
this.dialog.showDialog();
},
//取消事件
cancelEvent() {
console.log('你點(diǎn)擊了取消');
this.dialog.hideDialog();
},
//確認(rèn)事件
confirmEvent() {
console.log('你點(diǎn)擊了確定');
this.dialog.hideDialog();
}
})
到這里就已經(jīng)大功告成了，快去試試你的微信小程序組件是不是已經(jīng)可以正常使用了哦吧秕，如果出現(xiàn)以下報(bào)錯(cuò)琉闪，那你一定沒(méi)有好好的看我的代碼
image.png
ps:如果你們出現(xiàn)了這個(gè)報(bào)錯(cuò)，把json文件里面的注釋刪掉就好了砸彬。
現(xiàn)在的微信小程序有了自定義組件颠毙，我們寫小程序的時(shí)候也方便多了斯入，我把小程序的代碼推到github上，如果大家需要的話可以去拉以下
// gitHub本篇地址
https://github.com/aizhoujin/applet-of-WeChat-component.git
結(jié)束蛀蜜，希望大家早日掌握好微信小程序刻两，前端之路越走越遠(yuǎn)！~~~
