用于微信小程序开发的定制提示组件

目前，小程序官方提供的交互式反馈组件是Toast、Loading和Modal。

wx.showToast（）

默认情况下，有两个图标：成功和加载。您还可以自定义图标。设置持续时间后，它将自动消失，或者您可以主动调用wx。hideToast（）关闭它。如果标题设置太长，某些内容将被隐藏。

wx.showToast({

标题：“成功”，

icon：“成功”，

持续时间：2000

})

wx.showLoading（）

加载组件没有可供选择的图标。只有圆形图标可用，您必须调用wx。hideLoading（）关闭它。同样，如果标题设置得太长，文本将被隐藏。

wx.show加载({

标题：“正在加载”，

})

...

wx.hideLoading（）

wx.showModal（）

Modale组件具有更多功能。您可以设置标题、内容、确认和取消按钮的内容和颜色，以及它们各自的回调函数。如果标题和内容设置太长，它们将完全显示。此弹出窗口用于上一篇文章中微信小程序开发的授权逻辑，允许用户进行选择。

wx.show模式({

标题：'提示'，

内容：“这是一个模态弹出窗口”，

成功：函数（res）{

如果（res.confirm）{

安慰日志（“用户单击确定”）

}否则如果（res.cancel）{

安慰日志（“用户单击“取消”）

}

}

})

然而，在开发过程中，总是有一些提示性信息需要更舒适的提示组件来显示。例如，系统会提示用户电话号码输入错误，搜索内容不能为空，地图无法打开。如果这些提示与上述三个组件一起显示，则会不舒服，也不美观。因此，我们需要自己开发一个新的tip组件来满足我们的项目需求。

个人提示组件myTopTips

事实上，互联网上有很多由大厂开发的微信组件UI，可以直接集成到项目中，也可以只提取我们需要的部分。我使用的以下topTips组件来自统软云源代码的组件。基于它的topTips组件，我修改了它的样式，并添加了三种不同的提示类型：成功、警告和错误，这基本上满足了我在项目中的使用。

在项目中创建一个新页面，并将其命名为mytips。请记住从json中的app Delete更改其引用路径，否则会出现很多错误。请参阅我的另一个博客“微信小程序开发记录”。然后编辑我的提示。js文件

单元导出={

showMyTips（内容=''，图标=''，选项={}）{

让MyTips=this.data。我的提示||{}；

//如果已经有计时器，请清除它

if（MyTips.timer）{

clearTimeout（MyTips.timer）；

我的提示。计时器=未定义；

}

if（选项类型===“数字”）{

选项={

持续时间：选项

};

}

//选项参数默认参数扩展

options=对象分配({

持续时间：3000

}，选项）；

//设置定时器以定期关闭topTips

让计时器=setTimeout（（）=>{

this.set数据({

“我的提示”。show'：假，

“我的提示”。计时器'：未定义

});

}，options.duration）；

//显示顶部提示

this.set数据({

我的提示：{

显示：true，

所容纳之物

偶像

选项，

计时器

}

});

}

};

接下来，编辑wxml和wxss文件

的背景图像

.mytips｛位置：固定；顶部：10rpx；左侧：0；右侧：0；z索引：999；显示：flex；对齐内容：中心；-webkit转换：translateZ（0）translateY（-150%）；转换：全部.3s ease｝

.mytips显示｛-webkit转换：translateZ（0）translateY（0）｝

.mytips.mytips框｛填充：12rpx 28rpx；背景：#fff；框阴影：0 2px 8px rgba（0,0,0，.2）；边框半径：8rpx；高度：36rpx；｝

.mytips.mytips框文本｛左填充：40rpx；字体大小：24rpx；行高：36rpx；高度：36rpx；显示：块｝

.mytips.mytips框文本。mytips成功{背景：url（数据：image/png；base64，iVBORw0KGgoAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAADh0lEQVRIia2WPYhcVRTHf+fc92ZXO4PBRkgsYiOaQIxEEXaJ4LIrCTbpIgQJiYQtLaIgBCstbCyCBsRCbbYJISQbP4gs+AEaggS2iIKspQEVETTz3rvnbzGzyc5z