토스트 구성 요소를 사용하여 사용자 이름이나 비밀번호를 잊어버린 사용자에게 메시지를 표시하는 기능을 구현합니다.

WeChat 미니 프로그램은 현재 점점 더 대중화되고 있으며 점점 더 많은 개발 기능이 필요합니다. 이 기사에서는 주로 사용자 이름 입력을 잊어버린 사용자에게 토스트 메시지 대화 상자를 사용하는 WeChat 미니 프로그램의 기능을 소개합니다. 비밀번호 토스트 구성 요소를 자세히 분석하여 관련 운영 기술을 가진 모든 사람이 메시지 프롬프트 기능을 구현하는 데 도움이 되기를 바랍니다.

1. 효과 표시

2. 키 코드

1 index.wxml

<form bindsubmit="formBindsubmit" bindreset="formReset">
 <view style="display:flex;">
  <label>用户名：</label>
  <input name="userName" placeholder="请输入用户名！" />
 </view>
 <view style="display:flex;">
  <label>密码：</label>
  <input name="psw" placeholder="请输入密码！" password="true" />
 </view>
 <view style="display:flex;margin-top:30px;">
  <button style="width:30%;" formType="submit" >登录</button>
  <button style="width:30%" formType="reset" >重置</button>
 </view>
</form>
<view>{{userName}}</view>
<view>{{psw}}</view>
<toast duration="2000" hidden="{{toastHidden}}" bindchange="toastBindChange">用户名或密码不能为空！</toast>

2 index.js

Page({
 data:{
  // text:"这是一个页面"
  toastHidden:true,
  userName:'',
  psw:''
 },
 formBindsubmit:function(e){
  if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){
   this.setData({
    toastHidden:!this.data.toastHidden
   })
  }else{
   this.setData({
    tip:'',
    userName:'用户名：'+e.detail.value.userName,
    psw:'密码：'+e.detail.value.psw
   })
  }
 },
 formReset:function(){
  this.setData({
   userName:'',
   psw:''
  })
 },
 toastBindChange:function(){
  this.setData({
    toastHidden:!this.data.toastHidden
  })
 }
})

이 기사를 읽고 배운 점이 있나요? 서둘러서 한번 시도해 보세요.

관련 권장 사항:

WeChat 애플릿 사용자 정의 토스트 구현 방법에 대한 자세한 설명

WeChat 애플릿 양식 확인 기능의 전체 예

Thinkphp5 WeChat 애플릿의 사용자 정보 인터페이스 구현 방법에 대한 사례 연구

위 내용은 토스트 구성 요소를 사용하여 사용자 이름이나 비밀번호를 잊어버린 사용자에게 메시지를 표시하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!