微信小程序中使用wx.showToast()进行界面交互

文章目录

前情提要

微信小程序中使用 **

wx.showToast()

** 显示消息提示框，这个API接收一个对象作为参数，该对象包含以下属性：

• **title**，提示的内容，必填项。
• **icon**，显示的图标，非必填项，有以下四个可选值，其中默认值是success。 - success，成功图标，此时title文本最多显示7个汉字。- error，失败图标，此时title文本最多显示7个汉字长度。- loading，加载图标，此时title文本最多显示7个汉字长度。- none，不显示图标，此时title文本最多可显示两行。
• **image**，自定义图标的本地路径，image的优先级高于icon。
• **duration**，提示的延迟时间。
• **mask**，是否显示透明蒙层（透明蒙层可防止触摸穿透），布尔值，默认是false，即不显示透明蒙层。
• **success**，接口调用成功的回调。
• **fail**，接口调用失败的回调。
• **complete**，接口调用结束（不论成功或失败）的回调。

小程序项目

代码涉及的文件有：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{"pages":["pages/index/index"],"window":{"navigationBarBackgroundColor":"#0149af","navigationBarTitleText":"登录中心","navigationBarTextStyle":"white"},"style":"v2","sitemapLocation":"sitemap.json"}

pages/index/index.wxml

<viewclass="container"><viewclass="title">登录</view><viewclass="list"><viewclass="item"><inputtype="text"data-type="username"bindinput="handleInput"placeholder="用户名"/></view><viewclass="item"><inputtype="text"passworddata-type="password"bindinput="handleInput"placeholder="密码"/></view></view><buttonsize="mini"bindtap="login">登录</button></view>

pages/index/index.wxss

.container{padding: 20rpx;}.container .title{padding: 20rpx 0;border-bottom: 1px solid #ddd;font-weight: bold;font-size: 32rpx;}.list{margin: 40rpx auto 20rpx;}.item{margin: 12rpx 0;padding: 0 20rpx;border: 1px solid #ddd;border-radius: 6rpx;}.item input{width: 100%;height: 60rpx;font-size: 28rpx;}button{font-weight: normal;font-size: 28rpx!important;color: #fff;background: #0149af;}

pages/index/index.js

Page({data:{username:"",password:""},handleInput(e){const type = e.target.dataset.type;this.setData({[type]:e.detail.value
    })},login(){const{username,password}=this.data;if(!username){
      wx.showToast({title:'请输入您的用户名',icon:'error'})return;}if(!password){
      wx.showToast({title:'请输入您的密码',icon:'error'})return;}
    wx.showToast({title:'登录成功'})}})

相关链接

【微信小程序】常见界面交互