一：遇到的问题
通过自己自定义的组件编写的表单，发现传值不了，点击后收到的值为空。
二：创建组件
先在根目录创建components文件夹，创建img-verify文件夹（这个是我取的组件名字），在这个文件夹上点击右键新建一个component，名字依然叫做img-verify。
image.png
img-verify.wxml代码
<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代码
<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
网友评论