值得记录的-小程序记录

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

函数防抖

使用函数节流实现防止用户多次快速点击后触发事件。

// 多次点击节流防抖
function debounce(func, wait = 500) {
  let timeout;
  return function (event) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.call(this, event)
    }, wait);
  };
}

短信验证码

WXML

  <view class="phone_area">
    <view class="phone_area_number">
      <view class="phone_area_title">请输入手机号：</view>
      <input class="phone_area_input" bindinput="bindnumbervalue" maxlength="11">{{phone_number}}</input>
    </view>
    <view class="phone_area_code">
      <view class="phone_area_title">请输入验证码：</view>
      <input class="phone_area_input" bindinput="bindcodevalue" maxlength="4">{{phone_code}}</input>
      <view class="get_code_button" bindtap='verification'>{{phone_code_text}}</view>
    </view>
  </view>

JS

验证码倒计时模块，(可能有误，后续待测试)

Page({
  data: {
    // 手机验证码
    phone_number: '', // 手机号
    phone_code_text: '获取验证码',  // 按钮提示信息
    phone_code: '', // 验证码
    status: true,
  },
  // 手机输入 
  bindnumbervalue(event){
    this.setData({
      phone_number: event.detail.value
    })
  },
  // 验证码功能
  bindcodevalue(event){
    this.setData({
      phone_code: event.detail.value
    })
  },
  // 点击获取验证码  并添加 debounce 节流防抖
  verification: debounce(function(e){
    if((this.data.phone_number).length !== 11){
      wx.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      })
      return 
    }
    
    // 此处需要调用api接口, 假设返回 code 0 ,成功.  返回其他 return
    
    console.log(this.data.status)
    if (this.data.status === false) {
      return
    }

    var _this = this
    var code_number = 60 // 定义 60 秒的倒计时
    var code_value = setInterval(function () {
      _this.setData({
        phone_code_text: '重新获取' + (--code_number) + 's',
        status: false
      })
      if (code_number == 0) {
        clearInterval(code_value)
        _this.setData({
          phone_code_text: '获取验证码',
          status: true,
        })
      }
    }, 1000)
  }),
})

wx-if

wx-if 结合 new Date() 实现条件渲染

双 11 活动信息弹窗广告倒计时 background，通过 wx-if 结合 new Date() 实现格式化实现最后三天自行判断。省去了双 11 期间重新修改代码上传版本的不必要操作。并且在活动最后一天自动消失，之后再删除冗余代码重新迭代版本即可。

  onLoad: function () {
    var timeDay = new Date().getDate();
    var timeMonth = new Date().getMonth()
    var timeYear = new Date().getFullYear();

    this.setData({
      timeDay: timeDay,
      timeMonth: timeMonth + 1, 
      timeYear: timeYear,
    });  
  },

<!-- 活动时间 -->
<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 9}}" class="newBg" hidden="{{hiddenName}}">
  <image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-3.png'></image>
  <view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>

<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 10}}" class="newBg" hidden="{{hiddenName}}">
  <image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-2.png'></image>
  <view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>

<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 11}}">
  <image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-1.png'></image>
  <view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>