2022年夏季《移动软件开发》实验报告

个人项目：情话小屋           

 Github仓库地址 ： GitHub - caocongyu/Individual-project-Love-talk-cabin

一、项目简介

 

1、小程序页面展示，划分为三个部分：

（1）用户自己选择“相恋日”，精确到秒。

（2）用户选择所在地，调出当地天气情况；并且根

据模块一选择的“相恋日”计算出距离当下时间两人

在一起的时间。

（3）“我想对你说”，这一模块设计初衷是，考虑到情

侣之间不仅有甜甜蜜蜜，还有争吵和互相的不理解，

这一模块发挥的作用有两个，在情侣间甜蜜的时候，

就可以调用天行数据的API，倾诉情话；在两人之间

有矛盾的时候，这就是一座桥梁，可以说出不愿面对

面说出的话。

2、典型用户：情侣

二、控件和技术

1、时间选择器（精确到秒）

在utils文件夹下面新建DataTimePicker.js文件

function withData(param) {

  return param < 10 ? '0' + param : '' + param;

}

function getLoopArray(start, end) {

  var start = start || 0;

  var end = end || 1;

  var array = [];

  for (var i = start; i <= end; i++) {

    array.push(withData(i));

  }

  return array;

}

function getMonthDay(year, month) {

  var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;

 

  switch (month) {

    case '01':

    case '03':

    case '05':

    case '07':

    case '08':

    case '10':

    case '12':

      array = getLoopArray(1, 31)

      break;

    case '04':

    case '06':

    case '09':

    case '11':

      array = getLoopArray(1, 30)

      break;

    case '02':

      array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)

      break;

    default:

      array = '月份格式不正确，请重新输入！'

  }

  return array;

}

function getNewDateArry() {

  // 当前时间的处理

  var newDate = new Date();

  var year = withData(newDate.getFullYear()),

    mont = withData(newDate.getMonth() + 1),

    date = withData(newDate.getDate()),

    hour = withData(newDate.getHours()),

    minu = withData(newDate.getMinutes()),

    seco = withData(newDate.getSeconds());

 

  return [year, mont, date, hour, minu, seco];

}

function dateTimePicker(startYear, endYear, date) {

  // 返回默认显示的数组和联动数组的声明

  var dateTime = [], dateTimeArray = [[], [], [], [], [], []];

  var start = startYear || 1978;

  var end = endYear || 2100;

  // 默认开始显示数据

  var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();

  // 处理联动列表数据

  /*年月日 时分秒*/

  dateTimeArray[0] = getLoopArray(start, end);

  dateTimeArray[1] = getLoopArray(1, 12);

  dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);

  dateTimeArray[3] = getLoopArray(0, 23);

  dateTimeArray[4] = getLoopArray(0, 59);

  dateTimeArray[5] = getLoopArray(0, 59);

 

  dateTimeArray.forEach((current, index) => {

    dateTime.push(current.indexOf(defaultDate[index]));

  });

 

  return {

    dateTimeArray: dateTimeArray,

    dateTime: dateTime

  }

}

module.exports = {

  dateTimePicker: dateTimePicker,

  getMonthDay: getMonthDay

}

在index.wxml文件中

<!--区域1：日期选择器-->

<view class="Love">

  <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">

    <view class="tui-picker-detail">

      相恋日: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}

    </view>

  </picker>

</view>

在index.js文件中

changeDate(e) {

  this.setData({ date: e.detail.value });

},

changeTime(e) {

  this.setData({ time: e.detail.value });

},

changeDateTime(e) {

 const that=this;

  console.log("打印时间~~~~~~~~~~~~~~~~~~~~~", this.data.dateTimeArray);

  

  this.setData({ dateTime: e.detail.value });



  console.log("打印时间", this.data.dateTime);



  var aaa1 = that.data.dateTime[0];

  var aaa2 = that.data.dateTime[1];

  var aaa3 = that.data.dateTime[2];

  var aaa4 = that.data.dateTime[3];

  var aaa5 = that.data.dateTime[4];

  var aaa6 = that.data.dateTime[5];



  var time1 = that.data.dateTimeArray[0][aaa1];

  var time2 = that.data.dateTimeArray[1][aaa2];

  var time3 = that.data.dateTimeArray[2][aaa3];

  var time4 = that.data.dateTimeArray[3][aaa4];

  var time5 = that.data.dateTimeArray[4][aaa5];

  var time6 = that.data.dateTimeArray[5][aaa6];

  var time = time1 + '-' + time2 + '-' + time3 + ' ' + time4 + ':' + time5 + ':' + time6;

  console.log("时间88888888888888888888888888888:", time);

  return time;

},



changeDateTimeColumn(e) {

  var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;



  arr[e.detail.column] = e.detail.value;

  dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);



  this.setData({

    dateTimeArray: dateArr,

    dateTime: arr,

  });

},

2、时间差计算

利用时间戳计算

  timedifference: function (faultDate, completeTime) {

    var that=this;

    console.log('bbbbbbbbbbbbbbb',completeTime)



    var stime = Date.parse(new Date(faultDate));//获得开始时间的毫秒数

    var etime = Date.parse(new Date(completeTime));//获得结束时间的毫秒数

    var usedTime = etime - stime; //两个时间戳相差的毫秒数

    //计算出天数

    var days = Math.floor(usedTime / (24 * 3600 * 1000));

    

    //计算出小时数

    var leave1 = usedTime % (24 * 3600 * 1000); //计算天数后剩余的毫秒数

    var hours = Math.floor(leave1 / (3600 * 1000));//将剩余的毫秒数转化成小时数

    //计算相差分钟数

    var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数

    var minutes = Math.floor(leave2 / (60 * 1000));//将剩余的毫秒数转化成分钟

    //计算相差秒数

    var leave3 = leave2 % (60 * 1000);//计算分钟数后剩余的毫秒数

    var seconds = Math.floor(leave3/1000);//将剩余的毫秒数转化成秒数

    var t = [days,hours,minutes,seconds]

    that.setData({period : t})

    },

      

3、天行数据的彩虹屁API、和风天气API

  getCaiHongPi:function(){

    var that=this;

    wx.request({

      url: 'https://api.tianapi.com/caihongpi/index', 

      method: 'POST', 

      data: {

        key:'************************'

      }, 

      header: {

        'Content-Type':'application/x-www-form-urlencoded'

      }, 

      success: function (res) {

        if(res.data.code == 200){

          console.log(res.data);

          that.setData({

            caihongpi : res.data.newslist

          })

        }

      },

      fail: function (err) {

          console.log(err)

      }

    })

  },

4、定时器每秒启动时间差计算函数，实现相恋时间的实时更新

/**

   * 启动定时器

   */

  startInter : function(){

    var that = this;

    that.data.inter= setInterval(

        function () {

            // TODO 你需要无限循环执行的任务

            var date = util.formatTime(new Date());   // 调用函数时，传入new Date()参数，返回值是日期和时间   

            that.setData({now: date});                // 再通过setData更改Page()里面的data，动态更新页面的数据

            that.setData({FullInLove: that.data.FullInLove});              



            that.timedifference(that.data.FullInLove,that.data.now);

            console.log('setInterval 每过1000毫秒执行一次任务');

        }, 1000);    

  },

  /**

   * 结束定时器

   */

  endInter: function(){

    var that = this;

    that.clearInterval(that.data.inter)

  },

 /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

    this.endInter()

  }

5、渐变字体和动态字体

 

 

左右渐变

.mycaihongpi{

  margin: 20rpx;

  padding: 20rpx;

  border: 2rpx solid #FFB6C1;

  border-radius: 5%;

  display: flex;

  justify-content: center;

  align-items:center;      /*垂直*/



  font-size: 20px;

  font-weight: bold;/*加粗*/

  background: linear-gradient(to right, #FFB6C1, #FF69B4,#DC143C);/*左右渐变*/

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}

动态变化

.caihongpi{

  margin: 20rpx;

  padding: 20rpx;

  border: 2rpx solid #FFB6C1;

  border-radius: 5%;

  display: flex;

  justify-content: center;

  align-items:center;      /*垂直*/



  font-size: 20px;

  font-weight:bolder;

  color: #DB7093;

  -webkit-animation: discoloration 5s infinite; 

  animation: discoloration 5s infinite;

}

@keyframes discoloration {

    30% {color: #6edc14;}

    60%{color: #FF69B4;}

    80%{color: #b6d0ff;}

}

三、问题与解决

1、放置背景图片。在之前的学习中，要么以纯色为背景，要么直接放图片，当我想要将图片作为背景图片时，我遇到了知识盲区。

.Love {

  background-image: url('https://636c-cloud1-6gz5m5ji92c9c980-1311933969.tcb.qcloud.la/txrpic-10635507.png');

  background-size: 100% 170%;

}

解决：通过自学，我学会了将图片放置在“云开发”-“存储”，然后生成下载地址，放在view组件里面使用。

2、时间选择器（精确到秒）

微信小程序提供的picker只能选择年月日，但我还想要时分秒，，所以就要更加困难。

解决：在CSDN上面找解决方案并进行学习，原理：还是要使用picker，但采用“multiSelector”模式，并自定义时分秒的选择列。

 

四、心得体会

1.个人项目，就意味着设计师和工程师是一个人。其实设计是最难的部分。但是在本次项目中，当我有一个初步想法我就开始动手，实现了边做边设计，边修改边做，从设计和实现两方面完善项目，如果这个项目还有二期工程的话，我可以一直完善，不断更新，在制作的过程中新的灵感会不断的迸发。

2.提到“浪漫”，身边的同学们第一反应就是情侣之间有浪漫，然后嫌这个层次上的立意不够宏大，不够“高大上”。但看到大家很多的项目的中心立意，实在有一些勉强。浪漫是可以有很多不同的解读，但不是所有的项目都能以“浪漫”为立意。当然我自己根本不能算得上是立意立的好，只是在此交代一下心中的想法，或许有些颇为放肆，但仅此而已。