Wx is used in wechat applet Showtoast() for interface interaction

Antecedents feed

Use... In wechat applet wx.showToast() Display message prompt box , This API Receive an object as a parameter , This object contains the following properties ：

• title, Content of tips , mandatory .
• icon, The icon displayed , Not required , There are four optional values , The default value is success.
  • success, Success icon , here title Text shows at most 7 The Chinese characters .
  • error, Failure icon , here title Text shows at most 7 Length of Chinese characters .
  • loading, Load icon , here title Text shows at most 7 Length of Chinese characters .
  • none, Don't show icons , here title The text can display up to two lines .
• image, The local path of the custom icon ,image Has a higher priority than icon.
• duration, Delay time of prompt .
• mask, Whether the transparent mask is displayed （ The transparent mask can prevent touch penetration ）, Boolean value , The default is false, That is, the transparent mask is not displayed .
• success, Interface call successful callback .
• fail, Callback for interface call failure .
• complete, End of interface call （ Whether success or failure ） The callback .

Applet project

The files involved in the code are ：

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": " Login Center ",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<view class="container">
  <view class="title"> Sign in </view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder=" user name " />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder=" password " />
    </view>
  </view>
  <button size="mini" bindtap="login"> Sign in </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: ' Please enter your user name ',
        icon:'error'
      })
      return;
    }
    if(!password){
    
      wx.showToast({
    
        title: ' Please enter your password ',
        icon:'error'
      })
      return;
    }
    wx.showToast({
    
      title: ' Login successful '
    })
  }
})

Related links

【 Wechat applet 】 Common interface interaction