小程序制作宋词欣赏海报-蒲公英云

小程序制作宋词欣赏海报

清疚 2022-01-27 19:49 402阅读 0赞

海报就是单纯的一张页面，可以用来练习WXML和WXSS。进一步入门微信小程序。海报效果如下：

海报图

在经过小程序的预热一和预热二后，新建一个小程序项目已经不成问题了。海报的制作过程：

1.页面结构实现

页面结构主要是通过WXML模板组成。使用小程序官方封装好的view标签和image标签。view标签类似于div，可以显示文字，也单独占据一行。封装的标签也可以使用css的class选择器。

代码如下：

<!--index.wxml-->
<view>
  <!-- 小程序载入图片是使用封装好的image标签，如果图片变形，可以设置图片模式widthFix -->
  <!-- ../表示当前文件的上级目录index文件夹，再次../到index的上级目录pages -->
  <image mode='widthFix' src='../../img/img2.jpg'></image>
  <view class='title'>如梦令·昨夜雨疏风骤</view>
  <view class='poem'>
    <view>昨夜雨疏风骤，浓睡不消残酒。</view>
    <view>试问卷帘人，却道海棠依旧。</view>
    <view class='last'>知否，知否？影视绿肥红瘦。</view>
  </view>
</view>
<view>
  <!-- 小程序载入图片是使用封装好的image标签，如果图片变形，可以设置图片模式widthFix -->
  <image mode='widthFix' src='../../img/img1.jpg'></image>
  <view class='title'>如梦令·谁伴明窗独坐</view>
  <view class='poem'>
    <view>谁伴明窗独坐，我共影儿两个。</view>
    <view>灯烬欲眠时，影也把人抛躲。</view>
    <view class='last'>无那，无那，好个凄凉的我。</view>
  </view>
</view>
<view>
  <!-- 小程序载入图片是使用封装好的image标签，如果图片变形，可以设置图片模式widthFix -->
  <image mode='widthFix' src='../../img/img3.jpg'></image>
  <view class='title'>一剪梅·红藕香残玉簟秋</view>
  <view class='poem'>
    <view>红藕香残玉簟秋，轻解罗裳，独上兰舟。</view>
    <view>云中谁寄锦书来？雁字回头，月满西楼。</view>
    <view>花自飘零水自流。一种相思，两处闲愁。</view>
    <view class='last'>此情无计可消除。</view>
  </view>
</view>

上面程序可以把图片和文字都显示出来，只是堆在一起，没有样式。然后通过WXSS样式设置样式。

2.页面样式实现

1、小程序页面的样式设置是在WXSS样式文件中，大多数的css样式都可以使用，但是 Page属性中设置的样式是针对整个页面的，如下方代码，在Page中设置text-align: center;就会使整个页面内容居中，设置背景颜色整个页面都会起作用，这个就相当于html中的body标签。

/* Page，使整个页面居中 */
Page{ 
  text-align: center;
  background-color: skyblue;
  color: #999;
}
image{ 
  width: 100%;
}
.title { 
  margin-top: 15px;
  font-size: 18px;
  margin-bottom: 10px;
}
.last { 
  margin-bottom: 20px;
}
.poem { 
  line-height: 1.5;
}