微信小程序之项目的创建

Posted 2022-03-18 ssh-html

　　之前就想学习一下微信小程序，只不过前段时间在学习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/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

小程序页面配置详细参数：

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;// 默认不换行