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

微信小程序
Word count: 5.1k   |   Reading time≈ 24 min

续一，完成项目实例剩下内容

学员作品模块布局

index.wxml新增：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<view class='works'>
  <view class='container'>
    <view class='pubTitle'>
      <view class='txt'>学员作品</view>
      <navigator class='more'>更多></navigator>
    </view>
    <view class='wkMain'>
      <navigator class='box'>
        <image class='pic' src="/images/xszp1.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>UI设计作品</view>
          <view class='line'></view>
          <view class='des'>UI Design Works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
      <navigator class='box'>
        <image class='pic' src="/images/xszp2.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>室内设计作品</view>
          <view class='line'></view>
          <view class='des'>Interior Design Works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
      <navigator class='box'>
        <image class='pic' src="/images/xszp3.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>平面设计作品</view>
          <view class='line'></view>
          <view class='des'>Graphic Design Works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
      <navigator class='box'>
        <image class='pic' src="/images/xszp4.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>网页设计作品</view>
          <view class='line'></view>
          <view class='des'>Web design works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
      <navigator class='box'>
        <image class='pic' src="/images/xszp5.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>电商设计作品</view>
          <view class='line'></view>
          <view class='des'>E-business design works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
      <navigator class='box'>
        <image class='pic' src="/images/xszp6.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>影视后期作品</view>
          <view class='line'></view>
          <view class='des'>Late Film and Television Works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
      <navigator class='box'>
        <image class='pic' src="/images/xszp7.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>建筑景观作品</view>
          <view class='line'></view>
          <view class='des'>Architectural landscape works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
      <navigator class='box'>
        <image class='pic' src="/images/xszp8.jpg"></image>
        <!-- 蒙版遮罩层 -->
        <view class='ceng'>
          <view class='tit'>三维仿真作品</view>
          <view class='line'></view>
          <view class='des'>3D simulation works</view>
        </view>
        <!-- 蒙版遮罩层 -->
      </navigator>
    </view>
</view>
</view>

最外层有一个works类，然后里面再套一个之前写在全局样式里的container类增加左右内边距，pubTitle类里有一个文字类txt和导航类more，与pubTitle同级的类wkMain存放作品主要内容，一共八个作品，每一个作品展示是一个导航box类，里面包括图像和覆盖在图片上的蒙版遮罩层ceng类，遮罩层里包括标题tit类、一条横线line类和描述des类

index.wxss新增：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.pubTitle{
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  align-items: center;
  margin-bottom: 40rpx;
}
.pubTitle .txt{
  font-size: 40rpx;
  height: 100%;
  position: relative;
  padding-left: 20rpx;
}
.pubTitle .txt::before{
  display: block;
  width: 8rpx;
  height: 34rpx;
  background: #d80b07;
  content: "";
  position: absolute;
  left: 0;
  top: 13rpx;
}
.pubTitle .more{
  font-size: 34rpx;
  color: #666;
}
.works{
  background-color: #f0f3f8;
  padding: 90rpx 0 70rpx;
}
.wkMain{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wkMain .box{
  width: 344rpx;
  height: 214rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.wkMain .pic{
  width: 100%;
  height: 100%;
}
.wkMain .ceng{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 内填充 */
  padding: 0 20rpx;
  box-sizing: border-box;
  /* 内填充 */
  text-align: center;
}
.wkMain .ceng .tit{
  font-size: 34rpx;
}
.wkMain .ceng .des{
  opacity: 0.6;
  text-transform: uppercase;
  font-size: 24rpx;
  letter-spacing: 5rpx;
}
.wkMain .ceng .line{
  width: 50rpx;
  height: 2rpx;
  background: #fff;
  margin: 10rpx 0 20rpx;
}

pubTitle类：用弹性布局，justify-content: space-between;和align-items: center;让txt类和more类两端对齐并且垂直对齐，用PS量设计图尺寸，高度60rpx，底部外边距40rpx。因为这个布局其他地方要用到所以可以写到全局样式里

pubTitle类里的txt类：加了一个左部内边距，为一条小红块腾出空间，然后设置了相对定位也是为了小红块的定位做参考

pubTitle类里的txt类的:before选择器：在元素前插入内容(小红块)，用PS量设计图尺寸，宽8rpx高34rpx，用PS吸颜色设置背景色，因为只是一个小红块没有具体内容所以设置content: ""，使用绝对定位，然后用left: 0;top: 13rpx;调整位置让他位于txt文字类左边，因为整个pubTitle类高60rpx，而小红块自己有34rpx，算一下为了让他垂直居中，就要距离顶部13rpx((60-34)/2)

pubTitle类里的more类：PS量字体大小34rpx，吸颜色#666

works类：因为整个学员作品模块有个灰色背景色，所以在在外层works类设置背景色，并且内容上下有留空，所以设置内边距，距离顶部90rpx距离底部70rpx

wkMain类：这是存放8个作品的外层容器，设置弹性布局，两端对齐，并且有换行

wkMain类里的box类：这是每个具体作品的容器，PS量高，设置214rpx，宽因为要考虑整个宽750rpx，并且两边有26rpx的内边距，剩下698rpx，因为想让每行显示两个作品并且两作品之间留有空白，所以设置宽为344rpx，然后每行也要有空间，所以设置底部外边距10rpx，设置相对定位是为了之后要用的蒙版的绝对定位做准备

wkMain类里的pic类：设置图片宽高100%

wkMain类里的ceng类：这是蒙版遮罩层，设置宽高100%，背景颜色使用rgba(0,0,0,0.5)设置为黑色并且一半的透明度，然后设置绝对定位，相对box类左0顶0正好完全覆盖整个作品，设置字体颜色白色(PS吸的)，因为ceng类里面还有三个类，想让他们上下排列所以使用弹性布局，flex-direction: column设置主轴为垂直方向，起点在上沿，justify-content: center设置项目在主轴上居中对齐，align-items: center设置项目在交叉轴上居中对齐，设置这两个为了让那三个类水平垂直都居中，为了不让字体超出边框，设置padding: 0 20rpx;box-sizing: border-box来增加内填充，最后是字体居中

xkMain类里的ceng类里的tit类：作品小标题，PS量后设置字体大小34rpx

xkMain类里的ceng类里的des类：作品描述，设置不透明度0.6，text-transform: uppercase全部大写，PS量设置字体大小24rpx，letter-spacing: 5rpx设置字符间距5rpx

xkMain类里的ceng类里的line类：这个就是一条白线，PS量宽50rpx高2rpx，背景为白色，然后设置外边距，距离顶部10rpx，距离底部20rpx

效果图：

image-20210522162234228

行业动态及底部模块

index.wxml新增：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<view class='dynamic'>
  <view class='container'>
    <view class='pubTitle'>
      <view class='txt'>行业动态</view>
      <navigator class='more'>更多></navigator>
    </view>  
    <view class='dyMain'>
      <navigator class='dyItem' wx:for="{{5}}">
        <view class='pic'>
          <image src='/images/xszp1.jpg'></image>
        </view>
        <view class='txt'>
          <view class='title'>标题内容</view>
          <view class='info'>
            <text space="ensp">作者 ：王进  -  时间：2021-05-22</text>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>
<view class='footer'>
  <image class='pic' mode="widthFix" src='/images/logo.png'></image>
  <view class='text'>- 高端实训品牌- </view>
</view>

上面最外层有一个dynamic类，因为顶部内容和上一个模块一样，所以复制过来container类，下面是主体内容dyMain类，里面是五个导航dyItem类，每个导航里有一个图片pic类和一个文本txt类，文本txt类里又有一个标题title类和信息info类。

下面的页脚是footer类，里面有一个图片pic类和一个放文字的text类

index.wxss新增:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.dynamic{
  padding: 90rpx 0 70rpx;
}
.dyItem{
  display: flex;
  padding: 15rpx 0;
  border: 1px dashed #eee;
  justify-content: space-between;
}
.dyItem .pic{
  width: 230rpx;
  height: 150rpx;
}
.dyItem .pic image{
  width: 100%;
  height: 100%;
}
.dyItem .txt{
  width: 440rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dyItem .title{
  font-size: 34rpx;
}
.dyItem .info{
  font-size: 26rpx;
  color: #888;
}
.footer{
  padding: 30rpx 0;
  background-color: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}
.footer .text{
  font-size: 25rpx;
  color: #666;
}

dynamic类：设置内边距，距离顶部90rpx，距离底部70rpx

dyItem类：设置弹性布局，然后两端对齐(图片在左，txt类在右)，然后加个内边距上下15rpx左右0rpx，再加个虚线边框

dyItem类里的pic类：PS量尺寸，设置宽230rpx高150rpx

dyItem类里pic类里的image组件：宽高100%，继承父级pic类的宽高

dyItem类里的txt类：宽度考虑内边距和要留空所以设置440rpx，使用弹性布局，设置主轴为垂直方向并且两端对齐，这样就可以让里面的title类和info类上下分布了

dyItem类里的title类：设置字体大小34rpx

dyItem类里的info类：设置字体大小26rpx，颜色#888

footer类：设置内边距上下30rpx左右0rpx，背景颜色为灰色，设置文本居中，让图片和文字都居中

footer类里的pic类：根据图片宽度设置180rpx

footer类里的text类：设置字体大小25rpx，颜色#666

效果图：

image-20210522172052923

因为里面的图片素材没有所以懒得改了直接就for5个出来。到这里，整个首页就做完了，跟着老师把首页写完，主要是想学习小程序页面怎么写顺便复习一下前端的html和css。由于时间问题想快速进入下一阶段(逻辑层)，所以其他页面不写了，后面用的是老师给的完整版实例

tabBar栏目导航配置

全局配置里的pages新建两个新页面，如下：

1
2
3
4
5
6
"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/works/works",
    "pages/dynamic/dynamic"
  ],

index和logs页面是项目初始化就有的，下面两个是新建的页面

然后在全局配置里新建一个tabBar对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"tabBar": {
    "color": "#B6B6B6",
    "selectedColor": "#fe9132",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home-h.png"
      },{
        "pagePath": "pages/works/works",
        "text": "作品",
        "iconPath": "/images/user.png",
        "selectedIconPath": "/images/user-h.png"
      },{
        "pagePath": "pages/dynamic/dynamic",
        "text": "动态",
        "iconPath": "/images/list.png",
        "selectedIconPath": "/images/list-h.png"
      }
    ]
  },

加了color和selectedColor，因为图片选中时颜色是黄色未选中时是灰色，所以给文字也设置选中时颜色为黄色未选中时灰色，用PS吸一下颜色就可以了，然后再加个list数组存放跳转的地址、文字、图标路径、选中时图标路径

效果图：

image-20210522184045814

内页的页面架构布局

内页指的应该是二级页面，二级页面就是左上角有返回键的页面(如下图)，需要按返回键返回的都叫上一界面的二级界面。一级页面应该就是tab页面(底部三个页面)

image-20210522221311665

image-20210522221359380

这里做的内页就是点击首页的横向滚动区的导航跳转的页面，如下图

image-20210522221532509

首先在全局配置里新建一个页面(我这里叫ps页面)，然后把首页里写的导航里的url改成ps这个页面实现跳转，下面是内页具体代码

ps.wxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<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>

<view class='banner'>
  <image src='/images/psbanner.jpg1 (1).jpg'></image>
</view>
<view class='psBox'>
  <view class='psBoxTit'>
    专业软件技能
  </view>
  <view class='psBoxConOne'>  
    <view class='item'>
      <image src='/images/photoshop.png1.png'></image>
      <view>photoshop</view>
    </view>
    <view class='item'>
      <image src='/images/ai.png2.png'></image>
      <view>Ai</view>
    </view>
    <view class='item'>
      <image src='/images/id.png3.png'></image>
      <view>Id</view>
    </view>
    <view class='item'>
      <image src='/images/CDR.png4.png'></image>
      <view>CDR</view>
    </view>
    <view class='item'>
      <image src='/images/acrobat.png6.png'></image>
      <view>Acrobat</view>
    </view>
  </view> 
</view>
<view class='psBox' wx:for="{{5}}"><!-- wx:for测试用 -->
  <view class='psBoxTit'>
    专业软件技能
  </view>
  <view class='psBoxCon'>
    <image class='pic' src='/images/psmajor02.jpg2.jpg' mode="widthFix"></image>
    <view class='text'>
      <view>人像精修</view>
      <view>商业广告片调色</view>
      <view>商业海报级视觉精修</view>
      <view>卡通人物制作</view>
      <view>2.5D插画制作</view>
      <view>3D文字视觉特效制作</view>
      <view>平面广告创意</view>
      <view>合成特效制作</view>
    </view>
  </view> 
</view>

<view class='footer'>
  <image class='pic' mode="widthFix" src='/images/logo.png'></image>
  <view class='text'>- 高端实训品牌 -</view>
</view>

最上面的header容器和最下面的footer容器都是从首页里复制过来的，banner容器放的是一张大图，psBox容器是主题，一共有6个psBox容器，因为第一个和后面五个内容稍有差别所以单独写出来了，后面五个内容几乎一样，只是里面的字要改，为了测试直接用wx:for五个相同的，内容不改了，达到预期效果就好。每个psBox里有一个标题psBoxTit类和内容psBoxCon类(第一个为了区别叫psBoxConOne)，第一个内容类里有5个item类，每个item类里包括图片和文字，后面5个内容类里直接是是图片和文字

ps.wxss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
.header{
  width:100%; /*或者750rpx*/
  height:90rpx;
}
.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;
}

.banner{
  /* width: 750rpx; */
  width: 100%;
}
.banner image{
  display: block;/*图像是行内元素，行元素和下面会有个间隔，把他转成块元素就好了*/
  width: 100%;
  height: 1080rpx; /* 或者在image组件里写mode='widthFix' 宽度不变高度自适应 */
}
.psBox{
  padding: 80rpx 0;
  background-color: #1c356e;/*QQ截图Ctrl+C可以吸取十六进制颜色*/
}
.psBox:nth-child(2n){
  background-color: #fff;
}
.psBoxTit{
  width: 490rpx;
  height: 70rpx;
  background-color: #de2e05;
  border-radius: 70rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
  font-size: 40rpx;
  margin: 0 auto;
  position: relative;
  margin-bottom: 40rpx;
}
.psBoxTit::before{
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border: 2px dotted #de2e05;
  border-radius: 70rpx;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform: scale(1.03,1.2);
}
.psBoxCon image{
  width: 100%;
}
.psBoxCon .text{
  padding: 40rpx 26rpx 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.psBoxCon .text view{
  width: 50%;
  font-size: 30rpx;
  line-height: 1.8em;
  position: relative;
  padding-left: 18rpx;
  box-sizing: border-box;
}
.psBoxCon .text view::before{
  content: "";
  display: block;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5rpx;
}
.psBox:nth-child(2n-1) .psBoxCon .text{
  color: #fff;
}
.psBox:nth-child(2n-1) .text view::before{
  background-color: #fff;
}
.psBoxConOne{
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.psBoxConOne .item{
  text-align: center;
  padding: 30rpx;
}
.psBoxConOne image{
  width: 150rpx;
  height: 150rpx;
}
.psBoxConOne .item view{
  text-transform: uppercase;
}

.footer{
  padding: 30rpx 0;
  background-color: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}
.footer .text{
  font-size: 25rpx;
  color: #666;
}

头部的header样式和底部的footer样式是从首页样式拿过来的，我用空格分开了，中间部分是这个新页面需要的样式。另外，样式太多为了省时就记录一下自己觉得重点的和难的地方。

banner类里image：为什么要用块级展示在注释里写了，这是之前我不知道的

psBox类：主要记录一下QQ截图的时候可以用Ctrl+C吸取十六进制颜色，这样就不用打开PS了，是个小trick

psBox的nth-child选择器：这个选择器之前学CSS的时候没见过，记录一下，该选择器匹配同类型中的第 n 个同级兄弟元素，因为想要做的效果是奇数的psBox背景色是蓝色，偶数背景色是白色，所以用到这个选择器，可以用关键字(odd代表奇数、even代表偶数)或者公式(an+b)，a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量

psBoxTit类的before选择器：用点线边框围住标题，和之前的小红块类似，内容设为空，然后用绝对定位来参考父级的相对定位，设置top和left为0，有border加box-sizing: border-box，但是仅仅这样的话就完全贴住背景颜色看不出边框线了，所以用transform: scale(1.03,1.2)来进行放大，这个属性之前用的也很少，这里记录一下， Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

psBoxCon类里text类里view里的before选择器：和之前小红块类似，也是在每个文本前面加一个小圆圈图标

psBoxConOne类里的item类里的view：text-transform: uppercase转换为大写字母

参考

https://www.runoob.com/

  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2020-2021 Blog of Tianze

请我喝杯咖啡吧~

支付宝
微信