前情提要

微信小程序中使用 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"
}
1
2
3
4
5
6
7
8
9
10
11
12

pages/index/index.wxml

<view class="container">
  <view class="title">登录</view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder="用户名" />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder="密码" />
    </view>
  </view>
  <button size="mini" bindtap="login">登录</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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: '登录成功'
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

相关链接

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