之前就想学习一下微信小程序，只不过前段时间在学习Java中的一些线程的知识，拖了很久也没有实行这个目标，今天终于从网上找了一个完整的视频，来从头学习完整的开发流程，现在逐渐有一种想法，就是自己构建项目，开发项目完成的一整套流程，想弄的特别熟悉，没事的时候，有什么好的想法的时候，可以自己开发一个项目，从今天起，重视项目的构建，独立开发！这次是跟着视频讲解来做一下笔记！
一、构建项目
微信小程序的开发需要借助微信提供的生态，到微信公众平台上去申请账号，得到appId，做一些开发小程序的准备工作，具体网站是：https://mp.weixin.qq.com/
1、新建项目
我用的开发者工具是微信官方提供的开发者工具，下载的是：稳定版 Stable Build (1.02.1904090)，用起来还是挺好用的，哈哈，第一次使用，还是不错的，可能也是因为没有用过其他的吧，进入正题吧！
（1）创建一个空白的项目，也可以是官方提供的有一些基本的文件的项目，这里选择的是把一些文件都删除掉，只剩下pages文件夹以及project.config.json，这个是项目的配置文件，然后从头开始新建文件以及文件夹，需要新建的文件以及文件夹如下：
app.json
注意：这个文件中是需要写一些代码的，不然后面没办法新建page模块，只需要写如下代码：{}大括号，代表的是一个对象，
官方app.json文件配置项详解地址：
小程序页面配置详细参数：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
app.js
注意：这个也是需要写初始代码的，不然没法创建page模块，只需要写如下代码：App()
classic基础模块
注意在微信开发者工具中直接右键 -->新建classic目录-->新建page，然后填写classic名称，即自动创建了四个文件classic.js、classic.json、classic.wxml、classic.wxss，并且在app.json中添加了"pages": ["pages/classic/classic"]这段代码，这个第二个classic代表的是classic.wxml页面文件，这就是在app.json 中注册完成，每新建一个page模块都需要在这个app.json中注册
下面是一个模块中的四个文件：
classic.js
classic.json
classic.wxml
这里其实是小程序的骨架，写小程序中特有的标签，其实相当于前端框架中的组件，所以小程序中的页面是由公用的组件来构成的，官方的文档地址：
https://developers.weixin.qq.com/miniprogram/dev/component/
简单的实例代码：
1 <view class="chunk color1"></view> 2 <view class="chunk color2"></view> 3 <view class="chunk color3"></view>
classic.wxss
这里是来写页面的样式的，相当于前端中的css文件
简单的代码示例：
1 .chunk{
2 width:100px;
3 height: 100px;
4 }
5
6 .color1{
7 background-color: blue;
8 }
9 .color2{
10 background-color: black;
11 }
12 .color3{
13 background-color: yellow;
14 }
2、项目中布局
小程序中的布局是支持flex布局的，虽然我也不知道flex布局是什么鬼，但是应该是和boostrap中的栅栏形式的布局是类似的吧
Flex布局的特点:
(1)任意方向的伸缩，向左，向右，向下，向上
(2)在样式层可以调换和重排顺序
(3)主轴和侧轴方便配置
(4)子元素的空间拉伸和填充
(5)沿着容器对齐
Flex布局的应用：
（1）主体元素的布局，最大的container的布局设置内部块状元素的横向排列和纵向排列
.container{
display: flex; // flex的用法
/* flex-direction: column; */ 纵向排列
/* flex-direction: row; */ 横向排列
/* flex-direction: row-reverse; */ 横向颠倒排列 也就是反转过来
flex-direction: column-reverse; 纵向颠倒排列 也是反转过来
}
（2）view组件
view组件的是自适应的，通常情况下，宽度是100%，高度就是你指定容器的高度，高度是自适应的，随着你的指定的容器的大小而变化
（3）justify-content属性
主要是来控制子元素的对齐方式的
justify-content: flex-end;// 向下对齐
justify-content: flex-start; // 向上对齐
justify-content: center;//居中对齐
justify-content: space-between;// 头尾靠边 然后中间元素等距排列 相当于平均分布
justify-content: space-around;// 等距分布 头尾不靠边 子元素两边的元素距离是相等的
（4）flex中的主轴和交叉轴
这个可以从一个例子中来理解，就是子元素既在水平方向居中又在垂直方向居中的情况
align-items: center; // 交叉轴方向
justify-content: center; // 主轴方向
（5）flex中的换行
在flex布局中，flex的处理是自动会适应屏幕的宽度。来缩小你子元素的宽度，如何能子元素保持设定的大小，就需要换行了，在flex中，自动换行的元素是flex-wrap
flex-wrap:wrap;// 自动换行
flex-wrap:nowrap;// 默认不换行
原文地址：https://www.cnblogs.com/ssh-html/p/11129590.html