12月21日总结

经过前面的文章介绍，基本上 UniApp 的内容就介绍完毕了
那么从本文开始，我们就开始进行一个项目的实战
这次做的项目是苹果计算器，这个项目的难度不是很大，但是也不是很简单，适合练手

创建项目

打开 HBuilderX，点击左上角 文件 -> 新建 -> 项目：

搭建基本布局

项目创建完毕之后，首先来分析一下苹果计算器的整体布局结构，分为一上一下如下图：

上面的部分主要是显示计算结果的，下面的部分主要是显示计算器的按键

搭建上半部分布局

更改 index.vue 的内容如下：

运行一下，看看效果发现，背景并没有是黑色，而是白色。

注意点：在 UniApp 中所有的元素都是放在 page 中的, 所以想要全屏，可以直接设置 page 的样式

我们需要在 App.vue 中修改一下：

这么一改，就可以了，效果如下：