之前就想学习一下微信小程序,只不过前段时间在学习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
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中的栅栏形式的布局是类似的吧
(1)任意方向的伸缩,向左,向右,向下,向上
(2)在样式层可以调换和重排顺序
(3)主轴和侧轴方便配置
(4)子元素的空间拉伸和填充
(5)沿着容器对齐
Flex布局的应用:
(1)主体元素的布局,最大的container的布局设置内部块状元素的横向排列和纵向排列