微信小程序之实现弹窗组件及点击弹窗按钮实现页面跳转

创建一个名为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, // 页面加载时弹窗可见
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

以上是一个基本的自定义弹窗组件创建和使用的示例流程。

实现效果图：