微信小程序入门：从零到一打造码仔备忘录
相信很多小伙伴看完上次的《微信小程序快速入门-小程序之前准备（1/5）》已经迫不及待想要开始编码了。今天，我们就来满足大家的期待，直接进入代码实战环节！
今天的主要内容
今天主要分享以下两点：
首先，我们会从官方提供的案例入手，解读代码中的秘密。接着，我们会从零到一一个小项目——码仔备忘录。在这个过程中，我会从前端基础讲起，先搞定显示层，再处理逻辑层，循序渐进地带大家完成一个小程序。
小程序目录结构与文件解析
我们先来看最外层的目录结构和文件。小程序项目通常包含两个文件夹，分别代表两个页面。此外，还有一个工具文件夹，用于存放工具类文件。接下来是三个以“app”开头的文件，它们属于全局文件：
1. app.js：全局实例，所有页面共享。其他页面可以通过getApp()获取该实例，通常用于存放全局对象，比如用户信息。
2. app.json：包含全局配置，所有页面都需要在这里配置，包括小程序头部样式。注意，数组的第一项代表小程序的首页。
3. app.wxss：全局样式，所有页面共享，无需额外引用。
此外，还有project.config.json和sitemap.json，分别用于项目配置和小程序搜索配置。过程中，我们通常只需要关注app.js、app.json和app.wxss这三个文件。
页面文件解析
每个页面通常包含四个文件：.js、.json、.wxml和.wxss。其中，.json文件大部分情况下可以不用，直接删除也不会影响页面功能。
在小程序中，.wxml、.wxss和.js分别相当于网页中的HTML、CSS和JavaScript。
小程序运行机制
小程序的运行机制是从app.json配置项开始解析的。接下来，我们来看首页的展示结构布局。打开调试器，可以看到页面中有三个元素：头像、名字和欢迎文案，它们从上到下排列。
布局代码中使用了view和image等小程序组件。组件以标签的形式成对出现，每个组件都有属性，比如src属性。
样式与布局
组件的颜色、大小、居中以及间距都属于样式范畴。小程序会自动引入当前文件夹同名的样式文件，而网页则需要手动引入。
在布局时，我们通常会用容器包裹所有组件。比如，用view组件包裹image和button组件。需要注意的是，button组件自带很多样式，布局起来比较麻烦，除非用到特殊能力，否则通常不推荐使用。
从零到仔备忘录
接下来，我们开始从零码仔备忘录。首先，删除项目中的无用代码，比如pages文件夹和app.wxss中的样式，只保留必要的路径配置。
然后，在pages文件夹下新增四个基础文件：.js、.json、.wxml和.wxss。清空无用代码后，我们就可以开始编写码仔备忘录了。
项目需求与布局
码仔的需求是每天记录自己的事情，因此我们需要一个简单的备忘录。项目界面包含两个元素：码仔图片和按钮。
首先，在项目中新建一个文件夹存放图片素材。准备好素材后，开始编写页面布局代码。通常，我们会用view组件包裹image和button组件。
样式编写与优化
在编写样式时，我们需要注意图片的宽高比例。默认情况下，image组件的宽度为320，高度为240。如果图片变形，可以通过设置实际宽高来解决。
样式编写有两种方式：行内样式和类选择器。行内样式虽然方便，但不够灵活，因此推荐使用类选择器。此外，如果多个页面共享同一样式，可以将样式放在app.wxss中，减少重复代码。
布局技巧与适配
为了让图片和按钮居中显示，我们可以使用flex布局。这是小程序中非常常用的布局方式，大家一定要熟练掌握。
最后，我们还需要调整按钮与图片之间的距离，可以通过设置外边距来实现。
全局配置与头部样式
如果需要修改头部样式，可以在app.json中配置。比如，将头部背景颜色设置为主色调。
总结
这一章节主要带大家完成了小程序静态页面的，重点是了解小程序的页面结构和样式编写。布局是前端的核心技能，大家一定要反复练习，后续会频繁用到。
