微信小程序实战笔记（1）

观前提示：笔者是第一次正式接触前后端以及小程序开发的初学者，这篇文章是笔者learn by doing和费曼学习法的产物，可能会有很多谬误和不成熟的解释，希望各位读者能够理性讨论，如果有错误欢迎指出。

跳过各种安装等步骤，我们来看看微信小程序是怎么实现的。

---

基本文件结构

笔者作为初学者，还只接触到了上面page的结构。

当我们新建一个页面时，他会包含以下四个文件:

.js：JavaScript文件，用于处理小程序的逻辑，例如用户的点击事件或数据处理.

.json:JSON配置文件，用于设置小程序的窗口背景色、导航条样式等。

.wxml:微信小程序的标记语言，用于小程序的结构布局。它非常类似于HTML。

.wxss:微信小程序的样式表语言，用于设置小程序的样式，它扩展自CSS。

但这四个文件有些功能会相互重合，例如设置窗口背景色就可以同时在js文件中动态设置，在json文件中配置，在wxss中配置。

---

关于wxss中对于一个元素的各种设置

其实因为是初学者，每个参数在什么时候能够应用还不太理解，在开发的过程中我仅用过这几种：

通用

display

这个可以决定每个元素的表现类型，如block，flex，grid等。

• none：元素不会被显示在页面上，它会从文档流中消失，同时它的空间也会消失。
• block：元素会显示为块级元素，它会新起一行显示，并且尽可能占满父元素的宽度。
• inline：元素会显示为内联元素，它不会新起一行，它的宽度只占它的内容宽度。
• inline-block：元素会同时具有内联和块级元素的特性，它不会新起一行，但是可以设置宽度和高度。