I: Problems encountered in the form written by the self-defined component, it is found that the value cannot be transferred, and the value received after clicking is empty.

In the root directory, create the Components folder, create the img-Verify folder (this is the component name I chose), right-click on this folder and create a new Component named img-Verify.

image.png

Img – verify. WXML code

<view class="phone" > <view class="flex"> <view class="w-label"> 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"> SMS verification code </view> <input maxLength ="6" type="number" name="smsCode" class="phone_code" Placeholder =' placeholder '-style='font-size: 14rpx; color:#A4A4A4; text-align:left' bindinput="bindSmsVerifyCodeInput"></input> <view class="code " bindtap="getSmsVerifyCode" Hidden = "{{got}}" data - type = "0" data - phone = "{{phone}}" > access authentication code < / view > < the view class = "code" hidden = "{{! </view> </view> </view>Copy the code

Img – verify. Json code

{
  "component": true,
  "usingComponents": {
    
  }
}
Copy the code

Img – verify. Js code

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(' thate.data.second ', thate.data.second (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){ 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',' please fill in the graphic verification code ') 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', ImgVerifyCode: {type: String},}, /** * The initial data of the component */ data: }, ready: function () {that = this getImgVerifyCode()}, /** ** {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 } }Copy the code

Third, I refer to this component in the modify mailbox page

Image. The PNG WXML code

WXML code

<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 code

var that, app = getApp(), data var that, eitPhone, userEmail import { getSmsVerifyCodeInput } from '.. /.. /component/img-verify/img-verify' Page({/** */ data: {}, /** *) function (options) { }, showTopTips: function (e) { }, formSubmit: function (e) { var v = e.detail.value var newPwd = v.password; var password = md5.hex_md5(newPwd); 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: 'modify successfully ', duration: 1500})}, fail: Function (res) {}}).request()}, /** * Function () {}, / onShow: function () {}, / onHide: OnUnload: function () {}, / onUnload: function () {}, / onPullDownRefresh: Function () {setTimeout(function () {that.onload () wx.stopPulldownRefresh ()}, 1000); }, /** * onReachBottom: function () {}, /** * user click on the upper right corner to share */ onShareAppMessage: function () { } }) import { getSmsVerifyCodeInput } from '.. /.. /component/img-verify/img-verify' the getSmsVerifyCodeInput () method is called on the modify mailbox page to obtain the text message value. ! [image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a229f73c503448498b54ae0e1f0b71fb~tplv-k3u1fbpfcp-watermark .image)Copy the code