小程序制作宋词欣赏海报

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

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

![海报图][20190529202624637.gif]

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

## 1.页面结构实现 ##

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

代码如下：

<view>
      
      
      <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 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 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;
    }

2、诗歌的标签设置class为title，设置字体即距离上方下方的间距。  
3、诗歌的间距，使用view标签将诗歌内容包裹起来，使用line-height属性设置行间距即可。如

line-height: 1.5;

样式调好以后，海报就算完成了，还有页面头部的标题WeChat需要修改。

## 3.页面头部标题 ##

页面头部标题默认显示的事WeChat，这个可以在全局配置文件app.json中修改，如下：

![页面顶部标题修改][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

至此，海报页面为：

![海报页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]

## 4.真机调试，提交审核 ##

在完成一个小程序后一定不要着急提交审核、发布上线。要先经过真机调试，方法是点击微信开发者工具上方导航栏中的真机调试图标，点击后会编译这个项目，生成一个体验的二维码，如下：

![真机调试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]  
如果调试没有问题，就可以提交审核了，然后等待审核通过。

## 每天进步一点点、充实一点点、加油！！！ ##

[20190529202624637.gif]: /images/20220126/ec7d8e73ac5b45b19e28b215c93abe3e.png
[Link 1]: https://blog.csdn.net/w1418899532/article/details/90647459
[Link 2]: https://blog.csdn.net/w1418899532/article/details/90666894
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220126/cecd415fd346449f90c95d5d9b0de11e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20220126/869c71af756a43f5b87468289ec18d6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: /images/20220126/35b9c395151244748d8718ab5b7a4ee0.png