1.
打开微信开发工具，里面的appid要填写，不填的话，里面的一些开放性api是调用不到。
2.
微信开发工具的快捷键
//在工具上按F1
image.png
//悬浮功能
image.png
//快速查找文件
工具上按command+p
//快速查找最近打开过的文件
工具上按command+e
3.
在.json文件中，健值对一定要使用双引号。最后一个不能加逗号，不能注释
4.
image.png
5.
project.config.json是微信小程序的环境配置文件，有没有这个文件，不会影响小程序运行，根据你现在的环境自动生成的。
6.
//如果需要这种全景的头部背景图可以取消导航，在app.json里面配置
navigationStyle:custom
image.png
7.
flex详细讲解
全称 flex flexible box 弹性盒子
flex container 弹性盒子容器
flex item 弹性盒子容器下的子元素
这里也有display:inline-flex
<!--index.wxml-->
<view class='container'>
<view class='chunk color1'></view>
<view class='chunk color2'></view>
<view class='chunk color3'></view>
</view>
/**index.wxss**/
.chunk{
width: 100px;
height: 100px;
}
.container{
display: flex;
//column让下面的子元素变为垂直排列，独立一行显示
//row为水平排列，一行显示，也是默认值
flex-direction:column;
}
.color1{
background-color: red;
}
.color2{
background-color: blue;
}
.color3{
background-color: green;
}
排列----------------------------------------------------------------------
//column让下面的子元素变为垂直排列，独立一行显示
//row为水平排列，一行显示，也是默认值
flex-direction:column;
image.png
//row-reverse 倒序排列
//column-reverse 列的倒序排列
flex-direction:row-reverse;
image.png
对齐方式----------------------------------------------------------------------
//justify-content:flex-end //如果是反过来排序end就是向上顶
//justify-content:center 居中
//justify-content:space-between; 如下图，头尾靠顶端，中间的元素等距离排（平均分布）
flex-direction:column-reverse;
justify-content:flex-end
image.png
//justify-content:space-between;
image.png
//justify-content:space-around;等均分布
image.png
主轴和交叉轴----------------------------------------------------------------------
justify-content:center;//这个是垂直局中（这个是指主轴）
align-items:center;//就是水平居中（这个是指交叉轴）
flex-direction:column;
//下图是主轴是竖着
image.png
//下图的主轴是横的
image.png
//下图是改变了flex-direction:row-reverse;轴的方向也会改变，左和右
image.png
//基线对齐(让子元素的文字去对齐，会参考第一个子元素的文字基线)
image.png
//自动填充100%高度
image.png
超出宽度换行flex-wrap与消除间距----------------------------------------------------------------------
如果设置的子元素大于屏幕，就会平均分布宽度，除非设置了换行（相当于总宽度除子元素，就等于真是的宽）
//flex-wrap:wrap 换行，高度要刚好，不然会平均分布，所以下面设置了高度200px
image.png
网友评论