微信小程序：自定义组件传值——获取手机验证码

最新推荐文章于 2024-03-18 11:45:40 发布

yoyo小小汐~

最新推荐文章于 2024-03-18 11:45:40 发布

阅读量276

点赞数

文章标签：微信小程序软件测试程序员接口测试自动化测试测试工程师

本文链接：https://blog.csdn.net/weixin_57794111/article/details/134160151

版权

一：遇到的问题通过自己自定义的组件编写的表单，发现传值不了，点击后收到的值为空。

二：创建组件先在根目录创建components文件夹，创建img-verify文件夹（这个是我取的组件名字），在这个文件夹上点击右键新建一个component，名字依然叫做img-verify。

image.png

img-verify.wxml代码

如果对软件测试、接口、自动化、性能测试、测试开发、面试经验交流。感兴趣可以加裙485187702，群内会有不定期的发放免费的资料链接，这些资料都是从各个技术网站搜集、整理出来的，如果你有好的学习资料可以私聊发我，我会注明出处之后分享给大家。

<view class="phone" >  
         <view class="flex">
         <view class="w-label">图形验证码</view>
          <input placeholder='请输入验证码'  maxlength="6" placeholder-style='font-size:26rpx;color:#A4A4A4;text-align:left'  class="phone_code" name="imgcode" bindinput="bindImgVerifyCodeInput" ></input>
          <image src="{{imgVerifyCode}}" style="width:166rpx;height:64rpx;margin-top:13rpx;" bindtap="getImgVerifyCode"></image>
            <image src="../../images/gouxuan.png" class="gouxuan_img" wx:if="{{isImgCodeCorrect}}"></image>
        </view>
          <view class="flex">
             <view class="w-label">短信验证码</view> 
          <input  maxlength="6" type="number" name="smsCode"  class="phone_code" placeholder='请输入短信验证码'placeholder-style='font-size:26rpx;color:#A4A4A4;text-align:left'  bindinput="bindSmsVerifyCodeInput"></input>
          <view class="code " bindtap="getSmsVerifyCode" hidden="{{got}}" data-type="0" data-phone="{{phone}}">获取验证码</view>
          <view class="code " hidden="{{!got}}">{{second}}s 重新获取</view>
        </view>
      </view>

img-verify.json代码

{
  "component": true,
  "usingComponents": {
    
  }
}

img-verify.js代码

var api = require('../../utils/api.js')
const app = getApp()
var that
var imgVerifyCode
var smsVerifyCode
var lastGetVerifyCodeTime

var countDown = function(){
    var that = this    
    console.log('that.data.second',that.data.second)
    // 上一轮倒计时已经结束 
    if (that.data.second === 0 ){
      that.setData({
        got: false,
        // getSmsVerigyAgain: true
      })
      return 
    }
    that.setData({
      got: true
    })
    var timer = setInterval(() => {
      if (that.data.second < 1) {
        clearInterval(timer)
        that.setData({
          got: false,
       
        })
        return 
      }
      that.setData({
        second: --that.data.second
      })
    }, 1000)    
  }
var getImgVerifyCode = function (){

      var nowTime = Date.now()
     

      if (nowTime - lastGetVerifyCodeTime < 500){
        console.log('操作太快啦')
        return 
      }
      lastGetVerifyCodeTime = nowTime
      api.applyImgVerifyCode(app,that, function success(res){
        // console.log(res)
        that.setData({
          imgVerifyCode: res.data.imgVerifyCode
        })
      })
    }

function getSmsVerifyCode () {
    if (!imgVerifyCode) {
      this.triggerEvent('showTopTips','请先填写图形验证码')
      return 'error'
    }
 
    api.applySmsVerifyCode(app,that,imgVerifyCode,0,app.globalData.phone,function success(){
      that.setData({isImgCodeCorrect: true})
       that.setData({
          got: true,
          second: 60
        })
        countDown.call(that)
    },function fail(){
      that.setData({
        isImgCodeCorrect: false,
        // produce: false
        })
      setTimeout(getImgVerifyCode,1500)
    })
   
  }
Component({
  externalClasses: ['weui-cell', 'weui-cell_input', 'weui-cell__hd', 'weui-cell__bd', 'weui-cell__ft', 'weui-vcode-img', 'weui-vcode-btn'],
  
  /**
   * 组件的属性列表
   */
  properties: {
    imgVerifyCode: {
      type: String
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },
  ready: function ( ){

    that = this
    getImgVerifyCode()
  },
  /**
   * 组件的方法列表
   */
  methods: {
    bindImgVerifyCodeInput : function(e) {
      imgVerifyCode = e.detail.value
    
      if (imgVerifyCode.length && !that.data.activeClass){
        that.setData({
          activeClass: 'is_bindtap'
        })
     
      }else if (!imgVerifyCode.length){
        that.setData({
          activeClass: ''
        })
      }
   
    },
    bindSmsVerifyCodeInput : e => {
    },
    
    // var getImgVerifyCode = function(){
    getImgVerifyCode: getImgVerifyCode,
    getSmsVerifyCode: getSmsVerifyCode

  }
})
module.exports = {
  getSmsVerifyCodeInput:function ()  {
    return smsVerifyCode
  }
}

三、我在修改邮箱的页面引用这个组件

image.png wxml代码

wxml代码

<img-verify weui-cell="weui-cell" weui-cell_input="weui-cell_input" weui-cell__hd="weui-cell__hd" weui-cell__bd="weui-cell__bd" weui-cell__ft="weui-cell__ft" weui-vcode-img="weui-vcode-img" weui-vcode-btn="weui-vcode-btn" bind:showTopTips="showTopTips"/>

js代码

var that, app = getApp(), data
var that, eitPhone, userEmail
import { getSmsVerifyCodeInput } from '../../component/img-verify/img-verify'
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
   

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },
  showTopTips: function (e) {

  },
  formSubmit: function (e) {
    var v = e.detail.value
    var newPwd = v.password;
    var password = md5.hex_md5(newPwd);
    var email = v.email

    //获取短信输入的值
    var information = getSmsVerifyCodeInput();
  
    var data = {
      email: email,
      smsCode: information,
      password: password
    }
    var uri = '/staff/bindEmail.do'
    new http({
      app: app,
      that: that,
      url: uri,
      data: data,
      isNotShowErrorPage: true,
      loadingImmediately: true,
      isNotReTry: true,
      success: function (res) {  
        console.log(res)  
        app.globalData.userEmail =email
        app.globalData.shouldRefreshMe = true
       
        wx.navigateBack({
          delta: 1,
          duration: 1500 
        })
        wx.showToast({
          title: '修改成功',
          duration: 1500 
        })
      },
      fail: function (res) {
      }
    }).request()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    setTimeout(function () {
      that.onLoad()
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1000);

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

import { getSmsVerifyCodeInput } from '../../component/img-verify/img-verify'
这个里面中的getSmsVerifyCodeInput（）方法 给到了这个页面，在修改邮箱这个页面调用这个方法，就可以获取到短信的值了。

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a229f73c503448498b54ae0e1f0b71fb~tplv-k3u1fbpfcp-watermark.image)

最后：下面是配套学习资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！【100%无套路免费领取】