当前位置:   article > 正文

微信小程序--札记与贺卡前端UI及页面实现_微信贺卡小程序是怎么开发的

微信贺卡小程序是怎么开发的

UI设计

本来和小组负责人讨论后是想先实现简单的DIY海报效果的,用户自己上传图片,然后写文字,选择样式和大小等等,之后再进行完善,例如各种情况的海报分类,下图就是之前设计想要用来配合完善功能使用的UI分类界面(只是设计效果,banner还未换为本项目相关文字),之后经过和负责人的讨论,因为国庆中秋正好一块了,就想做一种现成海报,然后用户改文字,比较方便用户。
在这里插入图片描述

··············································
经讨论之后,就开始着手设计需要新增加的页面,为一个选择海报界面,以及海报更多界面。
选择海报界面,因为是做中秋国庆的,就没有像上面的设计一样分类那么多,一个banner加上下面的提示配上团团的形象以及海报展示就可以。为了避免单调在图片下方加了点装饰。如下图。
在这里插入图片描述
海报更多界面为点击右方更多按钮后跳转的界面,为了展示全部的相关海报而设计。为了搭配之后海报制作界面的背景色,背景以及上方的提示,均采用了相关黄色。
在这里插入图片描述
以上为新增的UI设计界面,海报图片均为网上截图,只是进行效果展示,因为图片版权问题一直没能积极地去寻找符合该项目的海报模板,希望之后可以解决并且快速完成。

U前端页面实现

主要实现上面UI设计的后面两个界面,并且对之前同学的页面进行了一些修改。
因为之前同学用的是云开发,将图片上传到云端再使用,而我这边添加需要需要麻烦她又比较不方便,就还是选择了直接在文件夹里放然后调用。
之前同学直接采用按钮以及设计边框样式实现我的 UI按钮,后经修改,改为按钮添加背景图片,直接将图片显示在按钮上。
修改了图片被压缩的问题,设置banner的自适应高度。
··································
图片被压缩问题解决

WXML

<view class="outerList">
 <image bindtap="line1"  class="img1 btn" src="cloud://createyoung-40a8b.6372-createyoung-40a8b-1303021949/photos1/效果-19.png"></image>
</view>
  • 1
  • 2
  • 3

WXSS

.outerList{
  display:flex;                    
    justify-content: center;       
    align-items:center; 
    margin-top: 50rpx;
}
.outerList image{
  width: 605rpx;
  height: 686rpx;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

··································
banner自适应高度
·········
WXML

 <image style="width:100%;height:{{imgheight}}rpx " src="cloud://createyoung-40a8b.6372-createyoung-40a8b-1303021949/photos1/效果-21.png" mode=""></image>
  • 1

·········
JS
首先得获取原来图片的长宽,修改以下imgwidth,imgheight的数值。

data: {
    imgheight:0
  },
  onLoad:function(){
    var imgwidth = 1082,
    imgheight = 476,
    //宽高比
    ratio = imgwidth / imgheight;
  console.log(imgwidth, imgheight)
  //计算的高度值
  var viewHeight = 750 / ratio;
  var imgheight = viewHeight
  this.setData({
    imgheight: imgheight,
  })
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

··································
按钮展示图片

 <button class="btn-go" bindtap="make">
    <image src="../../images/18.png"></image>
    </button>
  • 1
  • 2
  • 3
.btn-go{
  background: rgba(0,0,0,0);
  width: 384rpx;
  height: 98rpx;
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
}
.btn-go image{
  width: 384rpx;
  height: 98rpx;
}
.btn-go::after{
  border: 0;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

最终效果如下图
在这里插入图片描述
选择图片界面主要也是解决了图片的压缩问题,然后给按钮加图片,和上面雷同,就不再放代码了。

··································
页面实现其实用到的只是和前面总结中的差不多

海报分类界面

banner也是使用了高度自适应,可以根据不同的手机像素进行比例缩放上面已经放过代码。
··································
组件居中

.img_view{
  display:flex;                    
    justify-content: center;       
    align-items:center; 
    margin-top: 30rpx;     //上方离上一个组件的距离
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

··································
下图右侧红框部分,运用flex布局,设置其右侧距离,设置按钮图片的大小
·········
WXML

<view class="right_view">
<image  class="img_right" src="../../images/26.png"></image>
</view>
  • 1
  • 2
  • 3

·········
WXSS

.right_view{
  display: flex;
  flex-direction: row-reverse;
  margin-right: 45rpx;
}
.img_right{
  width:62rpx;
  height:24rpx;
  margin-top: -50rpx;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述
··································
下方海报装饰部分
·········
WXML

<view class="img_view">
<image class="bg" style="width:687rpx;height:568rpx;" src="../../images/24.png"></image>
 </view>
  • 1
  • 2
  • 3

·········
WXSS
设置其置于下层,不会遮挡到上面的东西

.bg{
  position:absolute;
  z-index:-1;
  margin-top: 325rpx;
}
  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述
··································
海报布局
·········
WXML

<view class="content">
 <image style="width:179rpx;height:316rpx;margin-left:50rpx" src="../../images/25.png"></image>
  <image style="width:179rpx;height:316rpx" src="../../images/25.png"></image>
   <image style="width:179rpx;height:316rpx;margin-right:50rpx" src="../../images/25.png"></image>
 </view>
 <view class="content2">
 <image style="width:179rpx;height:316rpx;margin-left:50rpx" src="../../images/25.png"></image>
  <image style="width:179rpx;height:316rpx" src="../../images/25.png"></image>
   <image style="width:179rpx;height:316rpx;margin-right:50rpx" src="../../images/25.png"></image>
 </view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

·········
WXSS
使用flex布局,横向平均划分三张海报,并且调节距离等数值

.content{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: -10rpx;
}
.content2{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 40rpx;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

··································

海报更多界面

背景图片的设置,主要设置图片的平铺,以及渲染顺序,因为图片问题还调节了上方距离,使距离合适
·········
WXML

<image class="background" src="../../images/27.png" mode="WidthFix"></image>
  • 1

·········
WXSS

.background {
  width: 100%;
  height: 100%;
  position:absolute; 
  background-size:100% 100%;
  z-index: -1;
  margin-top: -60rpx;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

··································
剩下的主要就是图片的显示以及居中的问题了,注意调节好位置和距离,以及下方海报的展示和分类界面实现方法一致,所以就不再放代码了。
在这里插入图片描述
主要就是等版权问题了,这个项目也需要很多的海报图片等支持才能做下去。
其他内容等讨论过再继续完善。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/90922
推荐阅读
相关标签
  

闽ICP备14008679号