文章目錄

• 前情提要
• 小程序項目
• • app.json
  • pages/index/index.wxml
  • pages/index/index.wxss
  • pages/index/index.js
• 相關鏈接

前情提要

微信小程序中使用 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，接口調用結束（不論成功或失敗）的回調。

小程序項目

代碼涉及的文件有：

app.json

pages/index/index.wxml

pages/index/index.wxss

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

<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>

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: '登錄成功'})} })

相關鏈接

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

總結

以上是生活随笔為你收集整理的微信小程序中使用wx.showToast()进行界面交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。