微信小程序中的组件
ps:
刚做小程序的时候，上传代码有限，组件开发在官方文档的描述又少的可怜，当时真的是非常的痛苦，不过，不要慌，现在又了我这么长时间的积累，现在开发一个小程序自定义组件已经是一个很 So Eacy的事情了。 接下来，带大家一步一个脚印的自定义一个微信小程序的弹框组件。come！！开车==>
效果图：
效果图
开始吧，第一步：
我们初始化一个小程序，删掉index的实例代码，让index变的空空如也，并且新建一个components文件夹，用于存放我们接下来要开发用的组件，然后在components文件夹中创建一个 dialog 的文件夹，点击 dialog文件夹然后右键选择 Component 并命名为 dialog 会自动生产对应的文件，如果你现在的目录结构跟下面的这个一样，那就没啥问题，可以进入下一步了：
image.png
第二步：
- 关于的组件所需要的基本工作已经做好了，接下来就是组件的相关配置，首先需要声明一下我们自定义的组件，打开我们创建的 dialog.json :将代码设置如下：
// dialog.json
{
"component": true,//自定义组件声明
"usingComponents": {} // 可选项，用于引入别的组件
}
ps: 小伙伴们如果要copy这段代码记得删掉json文件中的注释哦，要不然会报错的
- 接下来我们就需要写 dialog 的模板了，话不多说，直接上 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);
}
- 组件的结构和样式都已经大功告成了，但是我们肯定还需要 js 来完成组件的功能，我相信眼神好的各位已经发现了一些会用到 js 的地方了吧，（斜眼笑） 栗子：{{isShow}}、{{title}} 还定义了 cancelEvent 和 confirmEvent 两个方法，这些都是在 dialog.js 中了
dialog.js 是自定义组件的构造器，是用小程序的 component 构造生产的 ，Component构造器可以用来指定自定义组件的属性、方法 、数据
配置一下dialog.js
// pages/components/Dialog/dialog.js
Component({
/**
* 组件的属性列表
*/
options:{
multipleSlots: true //在组件定义时选项中启用slot
},
// 组件的属性列表，用于组件自定义设置
properties: {
// 弹窗标题
title:{ // 属性名字
type: String,// 类型(必填项){String,Number,Boolean,Object,null}
value: '我是dialog'// 属性初始值
},
// dialog 内容
content: {
type: String,
value: '我是dialog内容'
},
// 取消按钮
cancelText: {
type: String,
value: '取消'
},
// 弹窗确认按钮文字
confirmText: {
type: String,
value: '确定'
}
},
/**
* 组件的初始数据
*/
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')
}
}
})
- 到现在我们已经完成了微信小程序自定义组件的大部分，接下来我们需要在 index.wxml 中引入它才可以使用哦
index.json
{
"usingComponents": {
"dialog": "/pages/components/Dialog/dialog" // 这里要注意路径不能写错了哦，而且json文件不能有注释的
}
}
index.wxml:
<view class="container">
<dialog id='dialog'
title='dialog标题'
content='dialog内容部分'
cancelText='取消'
confirm='谢谢你'
bind:cancelEvent="cancelEvent"
bind:confirmEvent="confirmEvent">
</dialog>
<button type="primary" bindtap="showDialog"> 点我显示 </button>
</view>
最后配置一下index.js
//index.js
//获取应用实例
const app = getApp()
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();
}
})
到这里就已经大功告成了，快去试试你的微信小程序组件是不是已经可以正常使用了哦，如果出现以下报错，那你一定没有好好的看我的代码
image.png
ps:如果你们出现了这个报错，把json文件里面的注释删掉就好了。
现在的微信小程序有了自定义组件，我们写小程序的时候也方便多了，我把小程序的代码推到github上，如果大家需要的话可以去拉以下
// gitHub本篇地址
https://github.com/aizhoujin/applet-of-WeChat-component.git
结束，希望大家早日掌握好微信小程序，前端之路越走越远！~~~
