女朋友生日or情人节表白,如果感到腼腆,可以制作一份唯一的属于她的微信小程序礼物

微信小程序写表白 专栏收录该内容
1 篇文章 2 订阅

首先写好小程序的标题

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor":"#ff6600",
    "navigationBarTitleText": "大司马and马化腾",//标题
    "navigationBarTextStyle": "white"
  },

然后定义几个页面

 "tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "one",
      "iconPath": "/pages/static/home.png",
      "selectedIconPath": "/pages/static/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "two",
      "iconPath": "/pages/static/message.png",
      "selectedIconPath": "/pages/static/message-active.png"
    },
    {
      "pagePath": "pages/pro/pro",
      "text": "three",
      "iconPath": "/pages/static/profile.png",
      "selectedIconPath": "/pages/static/profile-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "four",
      "iconPath": "/pages/static/contact.png",
      "selectedIconPath": "/pages/static/contact-active.png"
    }
  ]
  },

第一个页面可以写个轮播

<view class="slider">
    <swiper style='height:{{Hei}}' autoplay="{{autoplay}}" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}" >
       <swiper-item wx:for="{{list1}}" wx:for-item="t" wx:key="id">
          <image src="{{t.imageurl}}" mode="widthFix" bindload="imgH"></image>
       </swiper-item>
    </swiper>
</view>

图片地址写在js里面
在这里插入图片描述
图片可以上传到路过图床上然后再把url写到js上(这里以三生三世图片为例)

  data: {
     list1:[
       {id:1,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:2,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:3,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:4,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:5,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:6,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:7,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:8,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"},
       {id:9,imageurl:"https://s1.ax1x.com/2020/09/10/wJqq4P.jpg"}
      ],
      indicatorDots:true,
      autoplay:true,
      interval:5000,
      duration:1300,
      bg:'#C79C77',
      Hei:""
  },
  imgH:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth;
    var imgh=e.detail.height;
    var imgw=e.detail.width;
    var swiperH = winWid*imgh/imgw+"px"
    this.setData({
      Hei:swiperH  // 设置高度
    })
  },
.slider,.slider swiper,image{
    width: 100%;
    
}

效果图:
在这里插入图片描述

第二个页面可以写个小明信片

<view>
<view class="first-view">
<text class="text1">宝贝的成果\n</text>
<text class="text2">2020-07-09</text>
<view class="divLine"></view>
<image src="https://s1.ax1x.com/2020/08/26/dfQN28.jpg">\n</image>
<text class="text3">坚持不懈的宝贝~</text>
<view class="divLine"></view>
<text class="text4">是最漂亮的!</text>
</view>
</view>
 page{ height: 100%; background-color:#F5F5F5; }

.first-view,.first-view-3{
  background: white;
  margin: 60rpx 20rpx 10rpx 20rpx;
  border-color: gray;
  border-spacing: 5rpx;
  border-style: groove;
  border-width: 2rpx;
  padding: 25rpx;
}
.first-view image{
  width: 100%;
  height: 430rpx;
}
.first-view-3 image{
  width: 100%;
  height: 460rpx;
}
.divLine{
  background: #E0E3DA;
  width: 100%;
  height: 5rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  justify-content: center;/**水平居中**/
}
.text2{
  margin-top: 20rpx;
  font-size: 20rpx;
  font-weight: 100;
}
.text3{
  margin-top: 20rpx;
  font-size: 30rpx;
  font-weight: 100;
}
.text4{
  margin-top: 20rpx;
  font-size: 25rpx;
  font-weight: 100;
}

效果图:
在这里插入图片描述

第三个页面可以添加一些彼此之间的回忆和第一个页面一样制作成轮播,也可以添加一些其它好的想法

第四个页面可以写一个自己的告白对话,下面是记录恋爱时间的js实现代码和css炫彩字体的样式:

  data: {
      dates:[],
      h:[],
      m:[],
      s:[],
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    setInterval(function () {
      var t1 = new Date("2018/11/03 00:00:00")
      var t2 = new Date()
      var t = new Date(t2 - t1 + 16 * 3600 * 1000)
      that.setData({
        dates: parseInt(t.getTime() / 1000 / 3600 / 24),
        h: t.getHours(),
        m: t.getMinutes(),
        s: t.getSeconds()
      })
    }, 1000)

  },
page{
  height:100%;
  }
  .background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
  }
  .logo {
    font-weight: 600;
    font-size: 20px;
    font-family: "楷体";
    color: #8c888b;
    background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
     /* -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);  */
    color: transparent;
    /*设置字体颜色透明*/
    -webkit-background-clip: text; 
    background-clip: text;
    /*背景裁剪为文本形式*/
    animation: ran 10s linear infinite;
    /*动态10s展示*/
}
@keyframes move {
  0% {background-position: 0 0;}
  100% {
  /*宽度固定,如果为百分比背景不会滚动*/
  background-position: -300px 0;
  }
}
.wrap {
  /*设置背景渐变色*/
  background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange,yellow, green, yellow, orange, red);
  /*chrome私有样式,加前缀,文字显示背景图片*/
  -webkit-background-clip: text;
  background-clip: text;
  animation: move 10s infinite;
  /*文字颜色设为透明*/
  color: transparent;
  /*宽度固定*/
  width: 300px;
  font-size: 20px;
  font-family: "楷体";
  }
  .wrap1 {
    /*设置背景渐变色*/
    background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange,yellow, green, yellow, orange, red);
    /*chrome私有样式,加前缀,文字显示背景图片*/
    -webkit-background-clip: text;
    background-clip: text;
    animation: move 10s infinite;
    /*文字颜色设为透明*/
    color: transparent;
    /*宽度固定*/
    width: 300px;
    font-size: 22px;
    font-family: "楷体";
    }

效果图如下:
在这里插入图片描述
背景图设置:

<image class='background' src="https://s1.ax1x.com/2020/08/27/d4xOjf.jpg" mode="aspectFill"></image>
  .background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
  }


《注:没有发布可以通过预览分享二维码给你的那个她用手机观看,但是需要添加她为项目成员》

如果有其它好的建议欢迎评论区call我,谢谢

  • 3
    点赞
  • 9
    评论
  • 20
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 9 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

lp151397

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值