微信小程序第二天—小白之路

我不是女神ヾ 2022-05-22 06:52 168阅读 0赞

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"

![70][]

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.