值得记录的 （三）- 小程序

近两周真实上手了小程序，记录在项目开发的过程中值得记录的。

函数防抖

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

// 多次点击节流防抖
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 {{status == true ? '' : 'un_selected'}}" bindtap='verification'>{{phone_code_text}}</view>
    </view>
  </view>

{{status == true ? '' : 'un_selected'}} 三元运算符用来给获取验证码之后的倒计时添加选择器，方便修改它的字体颜色样式（#AAA 呈现一种不可点击的样式）。

JS

验证码倒计时模块

var util = require('../../../utils/util.js');
var debounce = util.debounce;  // 多次点击节流防抖 从 util.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
      })
    },

    // 点击获取验证码
    verification: debounce(function(e){
      // 只限判断手机长度
      if((this.data.phone_number).length !== 11){
        wx.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }

      // 按钮是否可点击状态
      if (this.data.status === false) {
        console.log('请稍后重新获取验证码')
        wx.showToast({
          title: '请稍后重新获取验证码',
          icon: 'none'
        })
        return
      }
      var _this = this
      wx.showLoading({
        title: '加载中',
      })
      wx.login({
        success: function (res) {
          let code = res.code
          let phone = _this.data.phone_number
          // 调用api接口, 传递 code 与 phone 参数, 返回 code 0 成功
          req.Ajax('/api', 'post', { code, phone }, true).then(res => {
            wx.hideLoading()
            if(res.code == 0){
              wx.showToast({
                title: '发送验证码成功',
                icon: 'none'
              })
              // 发送验证码 修改获取验证码按钮显示
              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)
            } else {
              wx.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
          })
        }
      })
    }),
    
})

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>

物流信息模块

一个关于小程序会员中心礼品邮寄查询的物流信息模块，不包含 ajax 请求数据的部分，只含有 WXML 和 WXSS 部分。

WXML

<view class="status">
  <image class="bg" src="/pages/img/msg_logstics_bg_img.png"></image>
  <view class="status_info">{{stauts}}</view>
  <view class="status_time">{{updata}}</view>
</view>

<view class="log_simple">
  <image class="icon" src="/pages/img/msg_logstics_icon_airplane.png"></image>
  <view class="log_info">
    <view class="log_company">物流公司：
      <text>{{company}}</text>
    </view>
    <view class="log_number">物流单号：
      <text>{{number}}</text>
    </view>
  </view>
</view>

<view class="detail">
  <view class="detail_list" wx:for="{{list}}" wx:key="{{item}}">
    <view class="icon_point {{item.id == 0 ? 'in': 'on' }}"></view>
    <view class="info">
      <view class="message {{item.id == 0 ? 'last_new':'on_the_way' }}">{{item.name}}</view>
      <view class="time {{item.id == 0 ? 'last_new':'on_the_way' }}">{{item.date}}</view>
    </view>
  </view>
</view>

JS

由于接口问题，没有写 ajax，先自己在 JS 中的 data 造的假数据模拟 wx:for 模板渲染。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    stauts: "已签收",
    updata: "10月31日签收",
    company: '关都快递',
    number: '75123123123',
    list: [{
      id: 0,
      name: "皮卡丘 在 真新镇  进行 配送成功反馈审核通过 ，备注 道馆,反馈端:APP",
      date: "2018-10-31 11:52:41"
    }, {
      id: 1,
      name: "皮卡丘 在 真新镇  进行 配送成功反馈 ，备注 道馆,反馈端:APP",
      date: "2018-10-29 14:03"
    }, {
      id: 2,
      name: "小红龙 在 真新镇  进行 到站扫描",
      date: "2018-10-28 14:03"
    }, {
      id: 3,
      name: "胖丁 在 常磐市 进行 CP揽收 ，备注cp交接",
      date: "2018-10-27 14:03"
    }, {
      id: 4,
      name: "铁甲暴龙 在 常磐市 进行 分拨",
      date: "2018-10-26 14:03"
    }]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(this.data.list)
  },

})

WXSS

/* pages/member_logdetail/member_logodetail.wxss */
page {
  background: #F3F3F3;
}

.status {
  width: 698rpx;
  height: 150rpx;
  margin: auto;
  margin-top: 14rpx; 
}

.status .bg {
  width: 100%;
  height: 100%;
}

.status .status_info {
  position: absolute;
  top: 50rpx;
  left: 55rpx;
  color: #FFF;
  font-size: 32rpx;
}

.status .status_time {
  position: absolute;
  top: 100rpx;
  left: 55rpx;
  color: #FFF;
  font-size: 26rpx;
}


.log_simple {
  background: #FFF;
  box-shadow: 0 3rpx 15rpx 0 rgba(68,69,80,0.11);
  border-radius: 10rpx;
  width: 698rpx;
  height: 150rpx;
  margin: auto;
  margin-top: 18rpx;
  display: flex;
  
}

.log_simple .icon {
  width: 80rpx;
  height: 80rpx;
  margin: 30rpx;
}

.log_simple .log_info {
  margin-top: 30rpx;
}

.log_simple .log_info .log_company {
  margin-bottom: 10rpx;
  color: #ABABAB;
}

.log_simple .log_info .log_number {
  color: #ABABAB;
}

.log_simple .log_info .log_company text,
.log_simple .log_info .log_number text{
  color: #333;
}

.detail {
  width: 698rpx;
  background: #FFF;
  margin: 0 auto;
  margin-top: 20rpx;
  box-shadow: 0 3rpx 15rpx 0 rgba(68,69,80,0.11);
  border-radius: 10rpx;
}

.detail_list {
  display: flex;
}

.detail_list:last-child {
  padding-bottom: 30rpx;
}

.detail_list .info .message {
  width: 553rpx;
  margin-top: 45rpx;
  margin-left: 20rpx;
  font-size: 26rpx;
}

.detail_list .info .time {
  width: 553rpx;
  margin-top: 30rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
}

.icon_point {
  width: 22rpx;
  height: 22rpx;
  background: #019CFF;
  border-radius: 50%;
  display: flex;
  position: relative;
  top: 50rpx;
  margin:0rpx 20rpx 0rpx 40rpx;
}

.on {
  background: #CCC;
}

.last_new {
  color: #61A3FE;
}

.on_the_way {
  color: #888;
}

.in{
  border: 1rpx solid #A0D2FF;
  animation: my_animation 2s infinite;
}
@keyframes my_animation{
    100% {  
    transform: scale(2);  
    background-color: #A0D2FF;  
    }  
}