微信小程序之项目的创建

时间:2024-04-17 15:11:07

  之前就想学习一下微信小程序,只不过前段时间在学习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

这里其实是小程序的骨架,写小程序中特有的标签,其实相当于前端框架中的组件,所以小程序中的页面是由公用的组件来构成的,官方的文档地址:
简单的实例代码:
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;// 默认不换行
 
内容出处:七月老师《纯正商业级小程序开发》视频课程