探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置:首页>小程序资讯
女朋友生日or情人节表白,如果感到腼腆,可以制作一份唯一的属于她的微信小程序礼物
来源:南京小程序开发 发布时间:2023-12-08点击:112

首先写好小程序的标题

  "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"
    }
  ]
  },

第一个页面可以写个轮播


    
       
          
       
    

图片地址写在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%;
}

效果图:

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



宝贝的成果

2020-07-09



坚持不懈的宝贝~

是最漂亮的!


 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: "楷体";
    }

效果图如下:

背景图设置:


  .background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
  }


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

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

  • 上一篇:草料二维码怎么用、微信草料二维码信息可信么,有安全风险吗
  • 下一篇:微信校园表白墙在哪里 表白墙怎么找自己学校?
  • 版权备注
    最新资讯
    2023-12-08
    微信小程序开发常见问题解答
    (2)选择模板的方式去开发微信小程序,它的开发流程就比较简化,这种开发方式的流程相对简单,当然整个流···
    2023-12-08
    《课题中期报告》PPT模板下载
    《课题中期报告》PPT模板 43页1MB 本文档由 “ 格嫒 ” 提供并上传2021-09-01 ···
    2023-12-08
    蛋糕商家如何为小程序疯狂吸粉,成为人气店铺,诀窍都在这了!
    互联网时代很多蛋糕甜品商家都将视线转向了小程序,临漳县的王先生也是其中之一,他在搭建小程序后,运用五···
    2023-12-08
    微信小程序申请注册会员
    微信小程序是指在微信内部运行的小型应用程序,用户可以通过微信扫描二维码或者搜索小程序名称进入应用程序···
    2023-12-08
    🍉小程序优惠券引流实操
    🍉小程序运营推广引流-优惠券实战篇之前讲了很多小程序推广引流的方法这些方法都只是方向,没经验实操教难···
    随机资讯
    2023-08-30
    百货超市小程序开发制作
    如何快速搭建一个百货超市的微信小程序,吾爱上云平台,提供技术和服务,用户可以在平台中套用同行业的小程···
    2023-08-26
    小程序怎么在电脑上打开文件夹
    电脑里文件夹一直删不了,总显示正在被另一个程序打开无法删除电脑里文件夹一直删不了,总显示正在被另一个···
    2023-09-21
    小程序开发报价及图片欣赏
    微信小程序小游戏开发多少钱微信小程序小游戏开发的价格因人而异,取决于多个因素,例如游戏类型、游戏玩法···
    2023-08-28
    微信上怎么卖货开店?微信卖货小程序、商城搭建的方法来了
    如何在VX上开一家网店?在VX上,能开一家像淘宝那样的店吗?怎么开?怎么操作?如何搭建VX商城?如何···
    2023-10-11
    智星云服务器之云主机使用教程简记
    个人电脑性能不太高以至于难以满足一些模型的训练,上半年就一直在考虑租个服务器,但是太懒惰了~最近使用···
    友情链接: 南京网站建设 南京小程序开发 北京网站建设 网站仿制 深圳小程序开发