随着前端技术的发展和人们对产品体验的重视,前端开发工作已经变得越来越重要。而大部分的前端开发工作都是在进行页面布局的搭建和完善,这个过程非常耗时耗力。因此,快速搭建页面并生成代码的技术,会大大加快这个过程,节省大量成本。本文正是针对前端开发中的不足,对页面代码智能生成的难点,即页面截图、代码文本的处理部分进行分析,提出一种编解码模型,来解决快速生成复杂布局页面的问题。它利用基于注意力机制的多尺度特征提取方法来生成页面截图向量表示,相应的描述文本部分则采用词嵌入和LSTM网络进行编码,再使用解码模型对它们的连接向量进行处理,来预测下一个代码词语。除了对算法的研究和优化外,本文还基于已有开发经验,分析现有页面布局内容,提出新数据集的制作方法。并据此产出了由27个布局和标签内容词语组成的20000个页面截图和对应描述文件的page2code数据集。该数据集的页面布局更为复杂,一定程度上反应了当前互联网中多数网页的真实结构,能更好地验证算法的有效性。经过在公开数据集和自制数据集上充分的实验对比,本文所提出模型的评价结果比现有pix2code研究分别高出0.33和0.41。在一些与训练集不同的样本上,它的生成结果也比pix2code模型更加准确。这些结果验证了此模型在页面智能生成问题上的可行性,表明它能够有效地生成复杂布局的页面代码。在此模型的基础上,本文还设计并实现了一个页面智能生成系统,通过前端、后台、模型、数据库之间的多模块通信,生成了微信小程序页面代码,验证了它具有较高的实用价值。