【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup，其中包含图片和名称

在微信小程序中，你可以使用weui组件库来实现弹出一个确认的popup，并在其中包含图片和名称。以下是一个示例代码：

在wxml文件中，添加一个按钮来触发弹出确认popup：

<button bindtap="showPopup">显示确认Popup</button>

在wxss文件中，定义确认popup的样式：

.popup {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}.popup-inner {width: 80%;background-color: #fff;padding: 20px;text-align: center;
}.popup-img {width: 100px;height: 100px;margin-bottom: 10px;
}.popup-name {font-size: 16px;font-weight: bold;margin-bottom: 10px;
}

在js文件中，编写相应的逻辑来显示和隐藏确认popup，并传递图片和名称数据：

Page({data: {showPopup: false,popupImage: "",popupName: "",},showPopup() {const image = "图片链接"; // 替换为实际的图片链接const name = "产品名称"; // 替换为实际的产品名称this.setData({showPopup: true,popupImage: image,popupName: name,});},hidePopup() {this.setData({showPopup: false,});},
});

在wxml文件中，添加确认popup的代码：

<!-- 确认popup -->
<view wx:if="{{showPopup}}" class="popup" bindtap="hidePopup"><view class="popup-inner" bindtap="stopPropagation"><image class="popup-img" src="{{popupImage}}"></image><view class="popup-name">{{popupName}}</view><button bindtap="hidePopup">确认</button></view>
</view>