微信小程序项目实例学习笔记1

学完基础之后，跟着老师做个项目案例

尺寸

官网建议设计师用iPhone6作为视觉稿的标准，因为iPhone6的1px=2rpx，这样换算起来方便，比如屏幕宽度为375px，共有750个物理像素，那么直接用750rpx就行了(750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素)

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

rpx之前说过可以根据屏幕自适应，通过rpx，我们只需要根据750的设计稿写代码即可，不必担心在各个平台的适配情况。一次开发，在各个平台都会长得一模一样！

把设计图修改为750px宽，可以在PS里面用图像大小(Ctrl+Alt+I)长宽比约束后设置宽度为750像素，这样我们用选框工具量多少就给多少rpx就可以了

看完我还是不太懂他是怎么做到自适应的，反正就这么用吧

文档

可以开着官方文档，一边做一边查文档。

项目案例

https://edu.newsight.cn/works_xingqing.php?cid=102&id=1340

按照链接里的项目做一个实例

项目初始化

全局配置设置window

因为项目导航栏背景是黑色，所以把新建项目里的"navigationBarBackgroundColor": "#fff"删掉就行了，因为他默认是黑色

修改导航栏标题颜色为白色，默认是黑色，所以把他改成"navigationBarTextStyle":"white"

修改导航栏标题"navigationBarTitleText": "新视觉实训"

页面初始化

因为新建项目会生成一些初始化代码，不需要他们，把页面的wxml、wxss、js和全局样式app.wxss里初始化的内容删掉

因为js里要存放上图所示的对象，所以输入page选择第二个，就会出现内容为空的page对象

首页头部模块布局

index.wxml:

<view class="header">
  <view class='container hdcon'>
    <navigator open-type="switchTab" url="/pages/index/index" class='logo'>
      <image mode="heightFix" src="/images/logo.png"></image>
    </navigator>
    <view  class='kefu'>
      <button open-type="contact" class="btn"></button>
      <image mode="heightFix" src="/images/xiaoxi.png"></image>
    </view>
  </view>
</view>

这里学到了一个标签可以用空格来加多个类名，如第二行的class='container hdcon'，至于躲什么要用这两个类是因为，这个头部的container可以在其他页面复用，所以可以写到全局样式app.wxss里，然后用hdcon类来写首页头部容器自己的特有样式。

用button按钮覆盖图像来做一个点击图标出现联系客服的效果

index.wxss:

.header{
  width:100%; /*或者750rpx*/
  height:90rpx;
  border: 1px solid red;
}
.hdcon{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:100%;
}
.hdcon navigator,.hdcon .kefu{
  height:50rpx;
}
.hdcon image{
  height:100%;
}
.kefu{
  position: relative;
  animation: dh linear 1s infinite alternate;
}
.kefu .btn{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  opacity: 0;
}

css一直是我的软肋，学的不是很精，布局这一块老是弄得很乱，写不出理想的布局，跟着老师写有些也是似懂非懂，所以记录一下。

header类布局一个宽高的框来放头部内容，边框可以去掉，这里加上只是为了看看容器有多大

hdcon类表示头部容器(header-container)，把他设置成弹性布局，这样就使两张图在一个水平方向上，justify-content: space-between设置项目在主轴上两端对齐，align-items: center;设置项目与交叉轴中点对齐(相当于垂直居中)，height:100%继承父类header的高

因为头部要用的两个图标在PS里量出来高是50像素，所以把height设置成50rpx

.hdcon navigator,.hdcon .kefu{
  height:50rpx;
}

下面也是继承父类的高：

.hdcon image{
  height:100%;
}

这里把kefu类设置为相对定位，用于他子类btn的绝对定位做参考。animation调用全局样式里的自定义动画，linear设置动画从头到尾速度相同，动画完成周期为1s，infinite动画无限循环播放，alternate先执行一遍动画，然后再反向执行一遍动画

.kefu{
  position: relative;
  animation: dh linear 1s infinite alternate;
}

btn类设置绝对定位，相对于父类kefu类。然后百分比宽高，离左上0px，设置成透明

.kefu .btn{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  opacity: 0;
}

app.wxss:

.container{
  padding:0 26rpx;
  box-sizing: border-box;
}
@keyframes dh{
  0%,50%,100%{
    opacity: 1;
  }
  25%{
    opacity: 0;
  }
}

container类设置内边距和box-sizing为border-box。因为所有页面都需要用到头部有内边距的容器，所以把他放在全局样式里

box-sizing参考第三篇文章

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。

如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

然后用@keyframes关键帧来做自定义动画0%、50%和100%时，opacity为1(不透明)，到25%时opacity为0透明

结果图：

当然右边那个消息图标会闪动，截图看不到效果

海报轮播模块布局

index.wxml新增：

<view class='banner'>
  <swiper indicator-dots autoplay circular>
    <swiper-item><image src='/images/banner1.jpg'></image></swiper-item>
    <swiper-item><image src='/images/banner2.jpg'></image></swiper-item>
    <swiper-item><image src='/images/banner3.jpg'></image></swiper-item>
  </swiper>
</view>

indicator-dots显示指示点，autoplay自动切换，circular无缝滑动

index.wxss新增：

.banner{
  width: 100%;
  height:295rpx;
  border: 1px solid green;
}
.banner swiper{
  height: 100%;
  width: 100%;
}
.banner image{
  width: 100%;
  height: 100%;
}

因为轮播的图片高295px，所以height设置成295rpx，border边框只是为了测试看用的。因为swiper组件有个150px默认高度，他会超出banner组件，所以把他设置成100%，当然宽也100%。banner模块里的image也设置宽高100%

结果图：

专业分类导航滑动模块

因为横向滚动有两种实现方式，一种注释了的实现，一种没注释的实现。这里顺便记一下快捷键Ctrl+/可以把选中内容注释，和Pycharm一样很方便

index.wxml新增：

<scroll-view class='major' scroll-x>
  <!-- <view class='majorcon'> -->
    <navigator class='box' url="">
      <image class='pic' src='/images/kecheng1.png'></image>
      <view class='txt'>平面设计</view>
    </navigator>
    <navigator class='box' url="">
      <image class='pic' src='/images/kecheng2.png'></image>
      <view class='txt'>室内设计</view>
    </navigator>
    <navigator class='box' url="">
      <image class='pic' src='/images/kecheng3.png'></image>
      <view class='txt'>UI设计</view>
    </navigator>
    <navigator class='box' url="">
      <image class='pic' src='/images/kecheng4.png'></image>
      <view class='txt'>影视后期</view>
    </navigator>
    <navigator class='box' url="">
      <image class='pic' src='/images/kecheng5.png'></image>
      <view class='txt'>WEB前端</view>
    </navigator>
  <!-- </view> -->
</scroll-view>

这里就是在可滚动视图组件里加了五个导航组件，每个导航组件里有图片和文字

index.wxss新增：

/* .majorcon{
  padding: 20rpx 0;
  display: flex;
  width: 825rpx;
}
.major .box{
  text-align: center;
  width: 165rpx;
}
.major .pic{
  width: 100rpx;
  height: 100rpx;
}
.major .txt{
  font-size: 26rpx;
} */
.major{
  white-space: nowrap;
  padding: 30rpx 0;
}
.major .box{
  text-align: center;
  width: 165rpx;
  display: inline-block;
}
.major .pic{
  width: 100rpx;
  height: 100rpx;
}
.major .txt{
  font-size: 26rpx;
  margin-top: 8rpx;
}

因为PS里量图标宽高是100px，所以pic里面宽高设置100rpx，字体大小同理

效果图：

下面一排可以横向滚动，截图看不出来

参考

https://www.bilibili.com/video/BV1WQ4y1T7D8?p=25

https://my.oschina.net/cc4zj/blog/1831241

https://note.wyzda.com/e8d3d4c02933292f62cce95760ee40dc

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://www.runoob.com/css/css-positioning.html