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}