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

本文探讨了使用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' + '事件名' + '方法名'

	这样做比较清晰


 

WePY 的官方网站为 **[https://wepyjs.github.io/wepy-docs/](https://wepyjs.github.io/wepy-docs/)**,这是 WePY 框架的官方文档站点,提供了框架的详细说明、安装指南、API 文档、示例代码以及常见问题解答。以下是关键信息的整理: --- ### **1. 官网核心内容** - **首页**:框架简介、特性列表、快速入门链接。 - **文档**: - **安装**:环境配置、CLI 工具使用。 - **基础**:项目结构、生命周期、数据绑定。 - **组件**:组件注册、通信、插槽(Slot)。 - **API**:原生 API 的 Promise 化封装(如 `wx.request` → `this.$http`)。 - **插件**:状态管理(`wepy-redux`)、路由优化等扩展功能。 - **示例**:代码片段、Demo 项目(如 TodoList)。 - **更新日志**:版本迭代记录(如 WePY 1.x → 2.x 的重大变更)。 --- ### **2. 关键特性说明(官网重点)** - **类 Vue 语法**: - 支持 `template`、`script`、`style` 分块,类似 Vue 单文件组件(`.vue`)。 - 指令如 `v-if`、`v-for`、`@tap`(替代 `bindtap`)。 - **Promise 化 API**: ```javascript // 原生微信 API(回调风格) wx.request({ url: 'https://api.example.com', success(res) { /* ... */ } }); // WePY 封装(Promise 风格) this.$http.get('https://api.example.com').then(res => { /* ... */ }); ``` - **组件化**: ```javascript // 父组件(pages/index.wpy) <template> <child-component :title="parentTitle" @update="handleUpdate" /> </template> <script> import ChildComponent from '../components/child'; export default { components: { ChildComponent }, data: { parentTitle: '父组件标题' }, methods: { handleUpdate(newTitle) { /* ... */ } } }; </script> ``` --- ### **3. 版本差异(官网强调)** - **WePY 1.x**: - 兼容微信小程序基础库 1.9.9+。 - 语法更接近 Vue 1.x(如 `options API`)。 - **WePY 2.x**: - 要求微信小程序基础库 2.2.1+。 - 支持 Vue 2.x 语法(如 `computed`、`watch`)。 - 改进插件系统,支持多端开发(支付宝、百度小程序)。 --- ### **4. 资源链接** - **GitHub 仓库**:[https://github.com/wepyjs/wepy](https://github.com/wepyjs/wepy) (包含源码、Issue 提交、贡献指南) - **社区**: - 微信群/QQ 群(官网可申请加入)。 - SegmentFault 标签:[wepy](https://segmentfault.com/t/wepy)(中文技术问答)。 --- ### **5. 常见问题(官网 FAQ)** #### **Q1:如何从原生小程序迁移到 WePY?** - **步骤**: 1. 安装 WePY CLI 初始化项目。 2. 将原有 `.js`、`.wxml`、`.wxss` 文件合为 `.wpy`。 3. 修改 API 调用方式(如 `wx.request` → `this.$http`)。 4. 通过 `wepy build` 编译测试。 #### **Q2:WePY 支持 TypeScript 吗?** - 支持,需在项目中配置: 1. 安装 `@wepy/cli` 的 TypeScript 插件。 2. 在 `tsconfig.json` 中启用装饰器语法(`experimentalDecorators: true`)。 3. 将 `.wpy` 文件的 `<script>` 部分改为 `.ts` 后缀。 #### **Q3:WePY 性能如何?** - **优势**: - 减少文件数量,降低 I/O 开销。 - Promise 化 API 避免回调地狱,提升代码可读性。 - **注意**: - 复杂组件需避免过度嵌套(类似 Vue 的性能优化)。 - 使用 `wepy-analyzer` 插件分析打包体积。 --- ### **6. 快速上手示例(官网代码片段)** #### **安装 WePY** ```bash npm install -g @wepy/cli wepy init standard my-project cd my-project npm install ``` #### **编写页面(`src/pages/index.wpy`)** ```html <template> <view class="container"> <text>{{ count }}</text> <button @tap="increment">增加</button> </view> </template> <script> export default class Index extends wepy.page { data = { count: 0 }; methods = { increment() { this.count += 1; } }; } </script> <style> .container { padding: 20rpx; } </style> ``` #### **运行项目** ```bash wepy build --watch # 开发模式(自动编译) ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值