创建一个名为PopupWindow的弹窗组件：
1、创建组件目录结构：
在项目的components目录下新建一个名为PopupWindow的文件夹，里面包含四个核心文件： PopupWindow.wxml 、 PopupWindow.wxss 、PopupWindow.js 、 PopupWindow.json
2、编写组件文件：
PopupWindow.wxml：定义组件的结构。
<!--components/PopupWindow/PopupWindow.wxml-->
<view class="popup-mask" hidden="{{!showPopup}}"></view>
<view class="popup-window" hidden="{{!showPopup}}">
<view class="popup-header">
<text class="popup-title">重要提示</text>
</view>
<view class="popup-body">
<view class="popup-message">
<!-- 弹窗具体内容 -->
<text>校园二手书交易，不限品类，诚信标价，让校园二手书合理流通起来！！！</text>
</view>
<view class="popup-buttons">
<button class="popup-button" bindtap="goToRules">卖书规则</button>
<button class="popup-button confirm-btn" bindtap="closePopup">开始卖书</button>
</view>
</view>
</view>PopupWindow.wxss：编写样式。
/* components/PopupWindow/PopupWindow.wxss */
.popup-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.popup-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
width: calc(80vw - 40px);
/* 假设留出20px左右的边距 */
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 1000;
padding: 20px;
}
.popup-body {
text-align: center;
}
.popup-message {
font-size: 12px;
line-height: 1.5;
color: #666;
padding: 0 16px;
}
.popup-buttons {
display: flex;
justify-content: space-around;
margin-top: 16px;
}
.popup-button {
display: inline-block;
margin: 0;
padding: 0;
font-size: 32rpx;
line-height: 64rpx;
height: 64rpx;
text-align: center;
color: tomato;
border-radius: 8rpx;
border: 1rpx solid tomato;
background-color: transparent;
}
.confirm-btn {
color: white;
background-color: #ff6700;
}
.popup-header {
display: flex;
justify-content: center;
/* 添加这一行以使内容居中对齐 */
align-items: center;
/* 添加这一行以使垂直居中对齐 */
border-bottom: 1px solid #ddd;
padding: 0 16px;
margin-bottom: 16px;
}
.popup-title {
font-size: 18px;
font-weight: bold;
color: #333;
text-align: center;
/* 添加这一行使其居中 */
}PopupWindow.js：编写逻辑，处理弹窗的显示与隐藏、以及其他交互逻辑。（ goToRules（）函数实现点击“卖书规则”跳转到“规则详情”页面，closePopup（）函数改变showPopup变量为false实现弹窗消失）
// components/PopupWindow/PopupWindow.js
Component({
data: {
showPopup: true, // 初始状态下，弹窗显示
},
methods: {
goToRules: function() {
wx.navigateTo({
url: '/pages/rules/rules',
});
},
closePopup: function() {
this.setData({ showPopup: false }); // 用showPopup变量来控制弹窗显示与否
}
},
})PopupWindow.json（可选）：配置组件对外暴露的自定义属性、样式等。
{
"component": true,
"usingComponents": {}
}3、在其他页面使用该弹窗组件 ：
在需要使用这个弹窗组件的页面中引入它，并在wxml中使用。（本代码在announce页面引入）
<!--pages/announce/announce.wxml-->
<import src="../../components/PopupWindow/PopupWindow.wxml" />
<view>
<!-- 页面主体内容 -->
<PopupWindow visible="{{isPopupVisible}}" /> <!-- 使用弹窗组件，并通过isPopupVisible控制显示 -->
</view>在对应的页面.js文件中，管理popupVisible变量来控制弹窗的显示和隐藏。
// pages/announce/announce.js
Page({
/**
* 页面的初始数据
*/
data: {
isPopupVisible: true, // 页面加载时弹窗可见
},
/**
* 生命周期函数--监听页面加载
*/
onl oad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})以上是一个基本的自定义弹窗组件创建和使用的示例流程。
实现效果图：
