微信小程序第二天—小白之路
1. 一般微信小程序中pages数组下面的第一项元素代表了启动需要显示的第一个页面。
2.如果pages目录下面创建一个目录posts，在page中如果设置错误，比如说："pages": [
"pages/post/post",
"pages/welcome/welcome"
]
会出现：pages/post/post.wxml字样。
3.图片引用原地址是src而不是scr，这里需要注意以下，有的时候就是会出现这种低级的错误。
4.在swiper-item里面添加了图片，如果单单是在swiper-item中的<image>设置style的宽高样式，加载出来的图片并不是完整的，那么我们要是想要到完整的图片，我们就必须在swiper里面再设置一样的宽高样式。（必须两个地方同时设置）。
5.swiper只是一个容器，要放什么内容还要看你在swiper设置了什么东西。
6.为了简化程序，我们采取在post.wxss中设置样式，使得图片铺满
swiper{
width:100%;
height:500rpx;
}
swiper image{
width:100%;
height:500rpx;
}
我有一个疑问：能不能用
.swiper{
width:100%;
height:500rpx;
}
代替上面的swiper?如果用.swiper的话，那就应该在<swiper>里面设置他的class。但是我设置了class以后虽然有图片输出但是却是没有铺满的，是什么原因呢？我又试了一下：我把swiper设置用class，而在swiper-item还是保持原样。如下：
.s{
width:100%;
height:500rpx;
}
swiper image{
width:100%;
height:500rpx;
}
效果是一样的，图片也铺满。
如果，我第一个swiper保持不变，而第二个改为.swiper image。效果：第一张图片也就是（swiper）没有铺满，而第二张中（如果我在swiper-item中设置class=”.swiper image”，以后图片就可以铺满。但是，如果我在image中设置class=”.swiper image”，效果显示却是没有铺满）。如果我在第二张中把class=”.swiper image”改成：
class=“.b”,则刚好与上面所说的相反，也就是在<image>里面设置才有效果。
什么问题啊？？？
7. indicator-dots=“true”表示出现的三个滑动小黑点。autoplay=”true”表示自动切换，比如说图片的自动切换。interval="2000"这个是设置间隔多长时间就进行一次切换。（注意：如果我们设置 vertical=“true”,就是要使得那几张图片垂直切换，如果不设置则是默认水平切换的。）
8.如果我们要配置导航栏上面的颜色，那么应该新建.jion文件，我这里就是post.jion文件。然后再里面编辑：
{
"navigationBarBackgroundColor":"#405f80"
}
9.
10. 相对路径和绝对路径
绝对路径，在图片路径设置的时候以“/”开头，一般是从根节点开始的。
相对路径，是指在图片路径设置的时候以“.”开头，以当前页面为参考标准。每两个点代表往上走一级，相对路径需要注意的是同级的路径。
11. 在margin的设置中，如果有两个以上（3~4）个需要设置那么我们就采用他的简化形式，顺序是 上-右-下-左。那么 margin-top:10rpx ;
12. margin-bottom:20rpx;
13. margin-left:10rpx;
那么就可以化简为： margin：10rpx 0 20rpx 10rpx;
14. 一般如果在一行上面有一个字，则可以用px,但是如果超过1个字了还是px就很容易造成字往下移动。所以超过1字运用rpx就行了。
15.
swiper{
width:100%;
height:500rpx;
}
swiper image{
width:100%;
height:500rpx;
}
.post-container{
display: flex;
flex-direction:column;
margin-top:20rpx;
margin-bottom:40rpx;
background-color: #fff;
border-bottom: 1px solid #ededed;
border-top:1px solid #ededed;
padding-bottom: 5px;
}
.post-author-date{
margin:10rpx 0 20rpx 10rpx;
}
.post-author{
width:60rpx;
height: 60rpx;
vertical-align: middle;
}
.post-date{
margin-left: 20rpx;
vertical-align: middle;
margin-bottom: 5px;
font-size:26rpx;
}
.post-title{
font-size:34rpx;
font-weight:600;
color:#333;
margin-bottom: 10px;
margin-left:10px;
}
.post-image{
margin-left:16px;
width:100%;
height:340rpx;
margin:auto 0;
margin-bottom: 15px;
}
.post-content{
color:#666;
font-size:28rpx;
margin-left:20rpx;
margin-bottom: 20rpx;
letter-spacing: 2rpx;
line-height: 40rpx;
}
.post-like{
font-size:13px;
flex-direction: row;
line-height: 16px;
margin-left: 10px;
}
.post-like-image{
height:16px;
width:16px;
vertical-align: middle;
}
.post-like-font{
vertical-align: middle;
margin-right: 20px;
}
16.