#yyds干货盘点#【愚公系列】2022年11月 微信小程序-项目篇(祝福语)-01 首页页面设计

时间：2022-11-18 07:18:23

前言

祝福语是指对人们的美好祝福的语句。祝福语在社会发展中已经不是仅限于在节日和宴会上出现，常见的情侣互发手机信息祝福，天气冷暖变化问候祝福，朋友日常间的鼓励祝福，每天的清晨问候祝福等等。

1、在聚会、宴会、烛光餐等庆祝的场合，参与者对主角直接的祝福。这类祝福呈现直白、简短、精炼的特征。 2、网络祝福：网络祝福符合现时代特点，具有时尚感。网络在普适人群、传播领域、即时速度等方面都有书信、电话不可比拟的特点。将祝福通过互联网铭记、传播在网络世界，将祝福永恒记录，代表和体现了祝福的美好性、浪漫性、永恒性、时尚性和环保性。 3、短信祝福：通过手机短信、QQ短信等通讯工具对朋友发出的祝福语言。这类祝福非常突出浪漫性。 4、贺卡祝福：通过书信，贺卡等写下对朋友的祝福语言，用邮寄方式送到被祝福方。 5、送礼祝福：通过赠送礼物，在礼物上面印上或者礼物本身象征的意义来表达你对朋友的祝福。

一、首页页面设计

1.首先上图

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-项目篇(祝福语)-01 首页页面设计

2.全局样式设置

app.wxss

/**app.wxss**/
page{
  font-family: "PingFang SC", "PingFang-SC-Light", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 28rpx;
  color: #676767;
  height: 100%;
  -webkit-font-smoothing:antialiased;
}
input{
  font-family: "PingFang SC", "PingFang-SC-Light", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.flex-container{
  display:flex;
  flex-direction:column;
}

3.搜索框设计

3.1 页面效果

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-项目篇(祝福语)-01 首页页面设计

3.2 WXML

<view class="container">
  <view class="inner">
    <form bindsubmit="generate" >
      <!-- 称呼 -->
      <view class="named {{isMore ? 'more' : ''}}">
        <input bindinput="changeToName" name="toname" placeholder="怎么称呼TA?(不超过10个字)" input-placeholder="i-named"/>
      </view>
    </form>
  </view>
</view>

3.2 WXSS

/**index.wxss**/
.container{
  background-color: #f7f4ee;
  color: #424242;
}
.inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60rpx;
}
form{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.named input{
  text-align: center;
  height: 78rpx;
  border-radius: 10rpx;
  border: 2rpx solid #d9ba6a;
  background-color: #fff;
  line-height: 78rpx;
  font-size:32rpx;
}
.more input{
  border: 2rpx solid #e7404d;
  box-shadow: 0 0 5px #e7404d;
}

3.3 JS

changeToName(e) {
  let name = e.detail.value
  if (name.length > 10) {
    this.setData({
      isMore: true
    })
  } else {
    this.setData({
      isMore: false
    })
  }
}

4.类别设计

3.1 页面效果

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-项目篇(祝福语)-01 首页页面设计

3.2 WXML

<template name="realtionAvatar">
  <view class="item">
    <!-- tap_relation 的数据绑定之后可以考虑通过 radio[checked] 的 css 方式来实现-->
    <radio value="{{item.id}}" hidden checked="{{item.id == 1}}"id="{{'r'+item.id}}"/>
    <label class="labeled" for="{{'r'+item.id}}">
      <view class="head {{item.id == query.relationID ? 'select' : ''}}" data-id="{{item.id}}" bindtap="tap_relation">
         <image class="avatar" src="../../images/{{item.img}}.png"></image>
      </view>
      <text class="call">{{item.name}}</text>
    </label>
  </view>
</template>

<view class="container">
  <view class="inner">
    <form bindsubmit="generate" >
      <!-- 称呼 -->
      <view class="named {{isMore ? 'more' : ''}}">
        <input bindinput="changeToName" name="toname" placeholder="怎么称呼TA?(不超过10个字)" input-placeholder="i-named"/>
      </view>
       <!-- 类别 -->
      <view class="cate" >
        <div class="hd">
          <text>TA是你的</text>
        </div>
        <div class="bd">
          <radio-group name="relationID">
            <view class="row r1">
              <block wx:for="{{relation1}}">
                <template is="realtionAvatar" data="{{query,item}}"/>
              </block>
            </view>
            <view class="row r2" >
              <block wx:for="{{relation2}}">
                <template is="realtionAvatar" data="{{query,item}}"/>
              </block>
            </view>
          </radio-group>
        </div>
      </view>
    </form>
  </view>
</view>

3.2 WXSS

.hd{
  display: flex;
  justify-content: center;
  font-size: 36rpx;
  padding-top: 60rpx;
}

.row{
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
}

.item{
  width: 120rpx;
}

.item .labeled{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.head{
  display: block;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
  opacity: 0.6;
}
.select{
  background-color: #d9ba6a;
  opacity: 1;
}
.avatar{
  width: 120rpx;
  height: 120rpx;
}
.call{
  margin-top: 12rpx;
}
.cate .hd{
  padding: 60rpx 0 10rpx;
  font-size: 34rpx;
  color: #777;
}

3.3 JS

"tap_relation": function (e) {
  this.setData({
    "query.relationID": e.currentTarget.dataset.id
  });
},

4.性别设计

4.1 页面效果

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-项目篇(祝福语)-01 首页页面设计

4.2 WXML

<template name="genderAvatar">
  <view class="item">
    <radio value="{{item.id}}" hidden checked="{{item.id == 1}}" id="{{'g'+item.id}}"/>
    <label class="labeled" for="{{'g'+item.id}}">
      <view class="head {{item.id == query.genderID ? 'select' : ''}}" data-id="{{item.id}}" bindtap="tap_gender">
         <image class="avatar" src="../../images/{{item.img}}.png"></image>
      </view>
      <text class="call">{{item.name}}</text>
    </label>
  </view>
</template>

<!-- 性别 -->
<view class="sex">
  <div class="hd">
    <text>TA的性别</text>
  </div>
  <div class="bd">
    <radio-group name="genderID">
      <view class="row">
        <block wx:for="{{gender}}">
          <template is="genderAvatar" data="{{query,item,index}}"/>
        </block>
      </view>
    </radio-group>
  </div>
</view>

4.2 WXSS

.sex .hd{
  padding-top: 30rpx;
  font-size: 34rpx;
  color: #777;
}
.sex .row{
  padding: 20rpx 170rpx 0;
}

4.3 JS

"tap_gender": function (e) {
  this.setData({
    "query.genderID": e.currentTarget.dataset.id
  });
},

5.按钮设计

5.1 页面效果

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-项目篇(祝福语)-01 首页页面设计

5.2 WXML

<!-- 生成 -->
<view>
  <button form-type="submit" hover-class="navigator-hover" class="submit-btn" >捎句祝福话</button>
</view>

5.2 WXSS

.submit-btn{
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
  background-color: #d9ba6a;
  border-radius: 10rpx;
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  margin-top: 100rpx;
  text-align: center;
}
.submit-btn::after{
  display: none;
}

5.3 JS

//事件处理函数
generate: function (e) {
  app.clearWishes();
  let data = e.detail.value;
  if (data.toname) {
    app.setToName(data.toname);
  }
  wx.navigateTo({
    url: `/pages/preview/preview?state=0&relation=${data.relationID}&sex=${data.genderID}`
  })
},
标签：

相关文章