小程序的开发流程

1、注册微信小程序公众号

​ https://mp.weixin.qq.com/

​ 按步骤注册

2、查找appid

3、安装开发工具

​ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

​ 下载后，直接安装。除了路径意外，其他都是下一步

4、创建一个项目

这里的开发者id就是上面图二中第四步的AppID中对应的值

上面我选择使用javascript基础模板创建的，（可以选择其他的，不影响）

即：

接下来就可以进行自己的开发了

​ 首先我们看文件目录

这里很多，我也不太认识。先不管

我们来写自己的以一个小页面

将路径写在pages中的首行，会首先显示该路径的文件

完成上面步骤后，我们点开pages下的list文件

list.wxml就相当于.html结尾的文件。

​ 格式也很相似，不过里面的标签不同。html中的div标签 在这里是用view标签代替

list.wxss也就相当于css文件

​ 用法跟css用法大部分属性都相同

ok、接下来实现一个小效果

在页面显示这个效果的做法

首先在list.wxml中

<!--pages/list/list.wxml-->
<view class="cont1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

然后再wxss中添加样式

.cont1 view {
  width:100px;
  height:100px;
  text-align:center;
  line-height: 100px;
}
.cont1 view:nth-child(1) {
  background-color: aquamarine;
}
.cont1 view:nth-child(2){
  background-color: yellow;
}
.cont1 view:nth-child(3){
  background-color: red;
}
.cont1 {
  display: flex;
  justify-content: space-around;
}
.cont1 {
  display: flex;
  justify-content: space-around;
}

可能这样就ok了，

今天看了一个多小时视频，就会这一点点