wepy 在 methods 中调用 methods 方法，并保证 this 一致

最新推荐文章于 2024-08-12 10:03:44 发布

原创最新推荐文章于 2024-08-12 10:03:44 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

18 篇文章

订阅专栏

本文探讨了使用wepy框架开发微信小程序时，如何正确处理不同作用域下的方法调用，特别是在methods中调用非事件响应方法的常见错误及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 wepy 开发微信小程序时，可能会出现以下情况：
	
	export default class AccountForgetPassword extends wepy.page {
		config = {

		}

		data = {

		}

		methods = {
			// 获取图形验证码
			getCaptchaCode () {

			},

			// 发送短信验证码
			sendVerificationCode () {

				// 当短信验证码，验证过期等其他情况时，我们需要重新获取 '图形验证码'
				// 我们想着直接调用 'getCaptchaCode()'
				this.methods.getCaptchaCode()

				/*
					但是，这样调用，getCaptchaCode() 的 this 作用域并非外层的 this
				 */
			}
		}
	}


下面是解决方法：

	export default class AccountForgetPassword extends wepy.page {
		config = {

		}

		// 将获取图形验证码的方法，定义到外层
		getCaptchaCode () {

		}

		data = {

		}

		methods = {
			// 获取图形验证码
			onTapGetCaptchaCode () {
				this.getCaptchaCode()
			},

			// 发送短信验证码
			onTapSendVerificationCode () {

				// 这里也调用外层的 getCaptchaCode()
				this.getCaptchaCode()
			}
		}
	}

同时，注意下：
	wepy 规定的是 methods 只负责响应页面事件，不被其它方法调用。所以，我们以后约定，methods 方法的定义为：
		'on' + '事件名' + '方法名'

	这样做比较清晰