第四章 作业

1.使用canvas组件实现“五圈”的绘制

代码如下：

//index.wxml
<canvas canvas-id="olympicRings" style="width: 300px; height: 150px;"></canvas>

//index.js
Page({
  onReady() {
    this.drawOlympicRings();
  },

  drawOlympicRings() {
    const ctx = wx.createCanvasContext('olympicRings');


    const rings = [
      { x: 50, y: 50, color: '#0085C7' }, 
      { x: 120, y: 50, color: '#F4C300' }, 
      { x: 190, y: 50, color: '#000000' },
      { x: 85, y: 100, color: '#009F3D' }, 
      { x: 155, y: 100, color: '#DF0024' }, 
    ];

    // 绘制环
    rings.forEach(ring => {
      ctx.beginPath();
      ctx.arc(ring.x, ring.y, 40, 0, 2 * Math.PI);
      ctx.setStrokeStyle(ring.color);
      ctx.setLineWidth(10);
      ctx.stroke();
    });

    ctx.draw();
  }
});

运行结果如下：

2.使用相应组件完成“书单页面”

代码如下：

//index.wxml
<view class="head">← 书单</view>
<view class="p1">
  <view class="p2">培养商业意识，走出生活，职场和事业的困境</view>
  <view class="p3">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条.</view>
</view>
<view class="shu">
  <view class="imgone" style="display: flex;">
   <image class="img1" src="/images/img_01.jpg"/>
    <view class="textone">
      <view class="text1">金字塔</view>
      <view class="text2">芭芭拉</view>
      <view class="text3">金字塔原理是一种重点突出、逻辑清洗，主次分明的逻辑思路。</view>
    </view>
  </view>
  <view class="xian"></view>
  <view class="imgtwo" style="display: flex;">
    <image class="img2" src="/images/img_02.jpg"/>
    <view class="texttwo">
      <view class="text1">基业长青</view>
      <view class="text2">吉姆</view>
      <view class="text3">《基业长青》打破了旧有神话，提供了新的见解。</view>
    </view>
  </view>
</view>

//index.wxss

.head{
  font-size: 60rpx;
}
.p1{
  background-color: black;
}
.p2{
  color: aliceblue;
  text-align: center;
  font-size: 45rpx;
  padding: 30rpx;
}
.p3{
  color: aliceblue;
  padding: 20rpx;
}
.shu{
  margin: 20rpx;
}
.textone{
  margin-left: 50rpx;
}
.img1{
  width: 700rpx;
  height: 300rpx;
}
.img2{
  width: 600rpx;
  height: 300rpx;
}
.text1{
  font-size: 70rpx;
  font-weight: 700;
}
.text2{
  font-size: 40rpx;
  font-weight: 600;
}
.xian{
  margin-top: 20rpx;
  border-bottom: 4px solid #ccc;
}
.imgtwo{
  margin-top: 50rpx;
}
.texttwo{
  margin-left: 50rpx;
}

运行结果如下：

3.使用相应组件完成“西安找拼车”小程序部分界面

代码如下：

<view style="background-color: black;height: 60px;"><view style="color: white;padding-top: 20px;">西安找拼车</view>
</view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
联系方式（手机号和微信至少填一项）</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 115px;">称呼*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:115px">请输入称呼</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top:150px">手机号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:150px">请输入手机号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 195px;">微信号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:195px">请输入微信号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 23px;"></view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
拼车信息</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;">
</view>
<view>
  <view style="font-size: 20px;position: absolute;top: 290px;">出发地点*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:290px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 340px;">目的地*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:340px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 390px;">空座位*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:390px">请输入空座位</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>

运行结果如下：

4.编写一个“人生进程”的小程序，它只有一个功能：就是计算一个人从出生到现在已经度过了多少个月。

代码如下：

//index.wxml
<view style="text-align: center;">中国现阶段人均900个月</view>
<view class="container">
  <view class="section">
    <picker mode="date" value="{{birthDate}}"  end="{{today}}" bindchange="onDateChange">
      <view class="picker">{{birthDate}}至今{{monthsPassed}}个月</view>
    </picker>
  </view>
</view>
<view class="button-container">
  <button bindtap="changeDate">换个日期</button>
  <button bindtap="clearDate">清除记录</button>
</view>
<view class="container">
  <image src="/images/img_09.jpg" class="center-image"></image>
</view>
<view>能把在前面行走的机会抓住的人，十有八九都会成功。</view>

//index.js
Page({
  data: {
    birthDate: '2005年8月', 
    today: '', 
    monthsPassed: 0, 
  },
  onLoad: function () {
    const today = new Date().toISOString().slice(0, 10); 
    const formattedToday = this.formatDate(today);
    this.setData({ today: formattedToday });
    this.calculateMonthsPassed();
  },
  onDateChange: function(e) {
    const formattedDate = this.formatDate(e.detail.value); 
    this.setData({
      birthDate: formattedDate
    });
    this.calculateMonthsPassed();
  },
  calculateMonthsPassed: function() {
    const birthDate = this.data.birthDate.replace(/年|月/g, '-').replace('日', ''); 
    const today = new Date().toISOString().slice(0, 10);
    const birth = new Date(birthDate);
    const current = new Date(today);
    const months = (current.getFullYear() - birth.getFullYear()) * 12 + current.getMonth() - birth.getMonth();
    this.setData({ monthsPassed: months });
  },
  formatDate: function(dateString) {
    const [year, month, day] = dateString.split('-');
    return `${year}年${parseInt(month)}月${parseInt(day)}日`; 
  }
});


//index.wxss
.container {
  padding: 15px;
}
.section {
  margin-bottom: 20px;
}
.picker {
  padding: 10px;
  background-color: #f0f0f0;
}
.button-container {
  display: flex;
  margin-top: -30px;
}
.center-image {
  width: 50%; 
}

//app.json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/lz/lz",
    "pages/hh/hh"   
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "selectedIconPath": "images/logo.jpg"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "年月日",
        "iconPath": "images/微信图片_20231114170634.jpg"
      },
      {
        "pagePath": "pages/lz/lz",
        "text": "静思",
        "iconPath": "images/pic01.jpg",
        "selectedIconPath": "images/pic02.jpg"
      },
      {
        "pagePath": "pages/hh/hh",
        "text": "关于",
        "iconPath": "images/pic02.jpg",
        "selectedIconPath": "images/pic01.jpg"
      }
    ]
  }
}

运行结果如下：