Detaillierte Erläuterung des Eingabebeispiels für das WeChat-Applet

In diesem Artikel werden hauptsächlich die relevanten Informationen zur Implementierung der Eingabe- und dynamischen Einstellungsschaltflächen des WeChat-Applets vorgestellt. Ich hoffe, dass dieser Artikel allen helfen kann.

Implementierung der WeChat-Applet-Eingabeeingabe und der Schaltfläche für dynamische Einstellungen

[Anforderung] Wenn die Mobiltelefonnummer ausgefüllt und die Vereinbarung überprüft wurde, Die Schaltfläche „Sofort“ leuchtet auf und kann angeklickt werden. Wenn eine der Schaltflächen nicht erfüllt ist, ist die Schaltfläche ausgegraut und kann nicht angeklickt werden. Der Countdown fordert den Vorgang auf Das Toast-Popup-Fenster zeigt Inhalte an, die nicht den Anforderungen entsprechen.

<view class="container">
  <!--手机号-->
  <view class="section">
    <text class="txt">手机号</text>
    <input value="{{mobile}}" placeholder-class="placeholder" placeholder="11位手机号码" type="number" maxlength="11"
        bindinput="mobileInput"/>
  </view>
  <!--图片验证码-->
  <view class="section">
    <view>
      <text class="txt">图形验证码</text>
      <input placeholder-class="placeholder" placeholder="输入图形验证码" type="text" maxlength="4"
          bindinput="imgCaptchaInput"/>
    </view>

    <image class="imgBtn" src="{{imgCodeSrc}}" bindtap="getImgCode"></image>
  </view>
  <!--短信验证码-->
  <view class="section">
    <view>
      <text class="txt">验证码</text>
      <input placeholder-class="placeholder" placeholder="输入验证码" type="number" maxlength="6"
          bindinput="smsCaptchaInput"/>
    </view>

    <view class="smsBtn" bindtap="getSMS">{{captchaText}}</view>
  </view>

  <view class="agree" style="margin-top:40rpx">
    <checkbox-group bindchange="checkboxChange">
     <checkbox class="check" value="1" checked="true" bindchange="checkboxChange"></checkbox>
    </checkbox-group>
    <span>已阅读并同意</span> <text style="color:#98c7ff" bindtap="xieyi">《用户使用协议》</text>
  </view>
  <view class="regist {{phoneAll&&checkAgree?&#39;active&#39;:&#39;&#39;}}" bindtap="regist">立即登录</view>
</view>
    <!--mask-->
<view class="toast_mask" wx:if="{{isShowToast}}"></view>
    <!--以下为toast显示的内容-->
<view class="toast_content_box" wx:if="{{isShowToast}}">
<view class="toast_content">
  <view class="toast_content_text">
    {{toastText}}
  </view>
</view>
</view>

js

// 获取全局应用程序实例对象
const app = getApp()

Page({
  data: {
    //toast默认不显示
    isShowToast: false,
    mobile: '',
    imgCode: '',
    code: '',
    // inviteCode: '',
    errorContent: '请输入手机号',
    timer: 60,
    captchaText: '获取验证码',
    captchaSended: false,
    isReadOnly: false,
    capKey: '',
    sendRegist: false,
    imgCodeSrc: '',
    phoneAll: false,
    checkAgree:true,
    checkboxValue:[1],
  },
  // 显示弹窗
  showToast(txt, duration = 1500) {
    //设置toast时间，toast内容
    this.setData({
      count: duration,
      toastText: txt
    });
    var _this = this;
    // toast时间
    _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
    // 显示toast
    _this.setData({
      isShowToast: true,
    });
    // 定时器关闭
    setTimeout(function () {
      _this.setData({
        isShowToast: false
      });
    }, _this.data.count);
  },
  // 双向绑定mobile
  mobileInput(e) {
    this.setData({
      mobile: e.detail.value
    });

    if(this.data.mobile.length===11){
      this.setData({
        phoneAll: true
      });
    }else if(this.data.mobile.length<11){
      this.setData({
        phoneAll: false
      });
    }
  },
  // 双向绑定img验证码
  imgCaptchaInput(e) {
    this.setData({
      imgCode: e.detail.value
    });
  },
  // 双向绑定sms验证码
  smsCaptchaInput(e) {
    this.setData({
      code: e.detail.value
    });
  },
  // 同意协议
  checkboxChange(e) {
    this.data.checkboxValue = e.detail.value;
    if(this.data.checkboxValue[0]==1){
      this.setData({
        checkAgree: true
      });
    }else {
      this.setData({
        checkAgree: false
      });
    }
  },
  // 获取短信验证码
  getSMS() {
    var that = this.data;

    if (!that.mobile) {
      this.showToast(&#39;请输入手机号&#39;);
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast(&#39;请输入正确手机号&#39;);
    }
    else if (that.imgCode.length != 4) {
      this.showToast(&#39;请输入正确图片验证码&#39;);
    }
    else {
      if (that.captchaSended) return;
        this.setData({
          captchaSended: true
        })
      app.api.getSMSByMobileAndCaptcha({
        mobile: that.mobile,
        capKey: that.capKey,
        code: that.imgCode,
        type:1
      
      }).then((result) => {
        this.showToast(result.message);
        if (result.code != 1) {
          this.getImgCode();
          this.setData({
            captchaSended: false,
          });
        } else {
          var counter = setInterval(() => {
            that.timer--;
            this.setData({
              timer: that.timer,
              captchaText: `${that.timer}秒`,
              isReadOnly: true
            });
            if (that.timer === 0) {
              clearInterval(counter);
              that.captchaSended = false;
              that.captchaText = &#39;获取验证码&#39;;
              this.setData({
                timer: 60,
                captchaText: &#39;获取验证码&#39;,
                captchaSended: false
              })
            }
          }, 1000);
        }
      });
    }
  },
  // 获取图形码
  getImgCode() {
    var capKey = "zdx-weixin" + Math.random();
    this.setData({
      imgCodeSrc: "http://prezdx.geinihua.com/invite/WeChat/verify?capKey=" + capKey,
      capKey: capKey
    });
  },
  //用户使用协议
  xieyi() {
    wx.navigateTo({
      url: &#39;../userXieyi/userXieyi&#39;
    })

  },
  // 注册
  regist() {
    var that = this.data;
    if(!that.checkAgree||!that.phoneAll){
      return
    }
    // sessionCheck为1，目的是防止微信code码先于session过期
    var code = wx.getStorageSync(&#39;wxCode&#39;);
    var sessionCheck = wx.getStorageSync(&#39;sessionCheck&#39;);

    wx.setStorageSync(&#39;mobile&#39;,that.mobile);

    if (!that.mobile) {
      this.showToast(&#39;请输入手机号&#39;);
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast(&#39;请输入正确手机号&#39;);
    } else if (that.code.length != 6) {
      this.showToast(&#39;请输入正确验证码&#39;);
    } else {
      wx.showLoading({
        title: &#39;加载中...&#39;,
      });
      app.api.loginByCaptcha({
        mobile: that.mobile,
        smsCode: that.code,
        code: code,
        sessionCheck:sessionCheck,
      }).then((res) => {
        wx.hideLoading();
        if (res.code == 2||res.code==1) {
          //注册成功
          wx.setStorageSync(&#39;token&#39;, res.businessObj.token);
          wx.setStorageSync(&#39;userId&#39;,res.businessObj.userId);
          this.sucessCb(res);
          app.globalData.isLogin = true; //设置为登录成功
        } else {
          this.showToast(res.message);
        }
      });
    }
  },
  // 成功回调
  sucessCb(res) {
    wx.redirectTo({
      url: &#39;/pages/index/index&#39;
    })
  },
  onLoad: function () {
    this.getImgCode();
    var that=this;
    if(wx.getStorageSync(&#39;mobile&#39;)){
      that.setData({
        mobile: wx.getStorageSync(&#39;mobile&#39;),
      })
    }
    if(this.data.mobile.length===11){
      this.setData({
        phoneAll: true
      });
    }

  },

})

Verwandte Empfehlungen:

Ausführliche Erklärung, wie Vue den Eingabewert erhält

Detaillierte Erklärung der Fuzzy-Prompt-Funktion des Javascript-Eingabefelds

Detaillierte Erklärung der WeChat-Entwicklungseingabe Eingabefeld

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Eingabebeispiels für das WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!