forEachListenEvents 函数主要是通过 wepy 中 声明的 events 事件名和入参，借助 babel types 手动创建对应的 AST Node，最终生成对应的形如 this.eventBus.on("canceldeposit", this.canceldeposit) 形式的监听，其中，this.canceldeposit 为原有 events 中的事件被移入 methods 后的函数，相关伪代码实现如下所示：
// 根据 events 中的 methods 构建事件监听的调用// 并塞入 created 中forEachListenEvents(targetNode: types.ObjectMethod) {this.clzProperty.listenEvents.forEach((item) => {const methodsNode: any = item// 形如 this.$on('test', ()=>{})if (methodsNode?.key?.name) {// 创建 this 表达式const thisEx = t.thisExpression()// 创建 $on 表达式const ide = t.identifier('$eventBus.$on')// 合并 this.$on 表达式const om = t.memberExpression(thisEx, ide)// 创建事件名称参数节点const eventNameIde = t.stringLiteral(methodsNode.key.name.toString().trim())// 获取方法体内代码内容节点const meNode = t.memberExpression(t.thisExpression(),t.identifier(methodsNode.key.name.toString().trim()))const ceNode = t.callExpression(om, [eventNameIde, meNode])const esNode = t.expressionStatement(ceNode)// 将合成后的代码插入到 created 中targetNode.body.body.push(esNode)}}) }3.emitter vue 代码生成
构建完 Vue AST 之后 ， 我们可以调用 generate 函数生成源码字符串：
transform() {const ast = this.buildCompVueAst()const compVue = this.genCode(ast)return { compVue, wxs: this.buildWxs() }}5.4 Wepy page 转换5.4.1 差异性梳理上面的章节已经给大家分析了template、component的代码转换逻辑 ， 这一节主要带大家一起看下如何转换page文件 。page转换的逻辑即如何实现wepy 的 page.wpy 模块转换为 uniapp 的 page.vue 模块 。
首先我们来看下wepy 的 page 小程序实例：
<script>import wepy from 'wepy';import Counter from '../components/counter';export default class Page extends wepy.page {config = {};components = {counter1: Counter};data = https://www.huyubaike.com/biancheng/{};methods = {};events = {};onLoad() {};// Other properties}