微信小程序：自定义组件传值—

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

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

二：创建组件先在根目录创建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 lastGetVerifyCodeTimevar 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 = nowTimeapi.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 = thisgetImgVerifyCode()},/*** 组件的方法列表*/methods: {bindImgVerifyCodeInput : function(e) {imgVerifyCode = e.detail.valueif (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.valuevar 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 =emailapp.globalData.shouldRefreshMe = truewx.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%无套路免费领取】