【微信小程序】第四章 作业

一、使用canvas组件实现“傲韵五圈”的绘制

代码示例：

//.js
Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.arc(70, 70, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('blue')
    ctx.setLineWidth(10)
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(175, 70, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('yellow')
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(280, 70, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('green')
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(120,130, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('red')
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(230, 130, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('black')
    ctx.stroke()

    ctx.draw()
  }
})

//.wxml
<view>
  <canvas canvas-id="myCanvas" style="width: 350px; height: 350px;"></canvas>
</view>

代码效果图：

二、使用相应组件，完成“书单”页面

代码示例：

//.wxml
<view class="banner">
<image class="top" src="/pages/images/IMG1.jpg"></image>
 
<view class="jianjie">
<view class="text1">培养商业意识，走出生活，职场和事业的困境</view>
<text class="text2">创新者是如何思考问题的？本书单包括了互联网，\n思维方式，商业，文案，市场，营销等方方面面，\n是在思维方式上的创新，略去传统学院的教条
</text>
</view>
</view>
 
<view class="boss">
<image mode="widthFix" class="boss-img" src="/pages/images/1711872142452.jpg"></image>
<view class="text3">金字塔原理</view>
<view class="text4">芭芭拉.明托(Barbara Minto）</view>
<view class="text5">金字塔原理是一种重点突破，逻辑清晰，主次分明的逻辑思路，表达方式和规范动作...</view>
</view>
 
<view class="boss2">
<image class="boss2-img" src="/pages/images/0b55b319ebc4b74543a9c7e250aa09178a82b801bfb3.webp"></image>
<view class="text3">基业长青</view>
<view class="text4">【美】吉姆.柯林斯,杰里.波勒斯</view>
<view class="text5">金字塔原理是一种重点突破，逻辑清晰，主次分明的逻辑思路，表达方式和规范动作...</view>
</view>

//.wxss
.banner{
  width: 100%;
  height: 250px;
  position: relative;
}
.top{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.jianjie{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.text1{
  color: #000000;
  text-align: center;
  font-size: 32px;
  margin-top: 70px;
}
.text2{
  color: #000000;
  display: flex;
  margin: 25px 0 0 40px;
}
 
.boss{
  width: 380px;
  height: 170px;
  margin: 0 auto;
  border-bottom: 1px solid grey;
}
.boss-img{
  float: left;
  width: 95px;
  padding: 20px 20px 20px 0;
}
.text3{
  font-size: 20px;
  font-weight: bolder;
  padding-top: 20px;
}
.text4{
  font-weight: bold;
  padding-top: 10px;
}
.text5{
  padding-top: 10px;
}
.boss2{
  float: left;
  width: 380px;
  margin: 0 auto;
}
.boss2-img{
  float: left;
  width: 95px;
  height: 140px;
  padding: 20px;
}

 代码效果图：

三、使用相应组件，完成“西安找拼车”页面

代码示例：

//.wxml
<view class="bar">X  西安找拼车</view>
<view class="bonner">
<text decode="{{true}}">&ensp;&ensp;联系方式（手机和微信至少填一项）</text>
</view>
 
<view class="boss">
<text class="name">称呼*</text>
<input class="biao" type="text" placeholder="请输入称呼" /> 
</view>
 
<view class="boss">
<text class="name">手机号</text>
<input class="biao" type="number" placeholder="请输入手机号" /> 
</view>
 
<view class="boss">
<text class="name">微信号</text>
<input class="biao" type="text" placeholder="请输入微信号" /> 
</view>
 
<view class="bonner">
<text decode="{{true}}">&ensp;&ensp;拼车信息</text></view>
 
<view class="boss">
<text class="name">出发地点*</text>
<input class="biao" type="text" maxlength="7" placeholder="限7个字" /> 
</view>
 
<view class="boss">
<text class="name">目的地*</text>
<input class="biao" type="text" maxlength="7" placeholder="限7个字" /> 
</view>
 
<view class="boss">
<text class="name">空座数*</text>
<input class="biao" type="number" placeholder="请输入空座数" /> 
</view>

//.wxss
.bar{
  padding: 30px 0 10px 10px;
}
.boss{
  width: 97%;
  height: 40px;
  margin-top: 20px;
  float: right;
  line-height: 40px;
  border-bottom: 1px solid rgb(116, 114, 114);
}
.biao{
  margin-top: 10px;
  margin-left: 140px;
}
.name{
  line-height: 20px;
  margin-left: 20px;
  font-weight: bold;
  float: left;
}
.bonner{
  width: 100%;
  height: 40px;
  float: right;
  background: rgb(207, 202, 202);
  line-height: 40px;
  color: rgb(59, 58, 58);
  border-bottom: 2px solid rgb(139, 138, 138);
}

  代码效果图：

四、编程题

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

代码示例：

//.wxml
<view class="header">
    <view class="note">中国现阶段人均寿命 900 个月</view>
    <view class="past">
        <view wx:if="{{birthday}}">{{birthday}}至今{{langMoreThan}} {{pastMonth}} 个月</view>
    </view>
    <view class="settings">
        <picker bindchange="bindDateChange" end="{{endMonth}}" fields="month" mode="date" start="1949-10" value="{{endMonth}}">
            <view class="btn-setting">
                <view wx:if="{{birthday}}">换一个日期</view>
                <view wx:else>点此设置出生年月，查看人生进度</view>
            </view>
        </picker>
        <view bindtap="clearHistory" class="btn-del" hoverClass="none" hoverStartTime="0" hoverStayTime="0" wx:if="{{birthday}}">清除记录</view>
    </view>
</view>
<view class="container">
    <canvas canvas-id="batteryCanvas" style="width: 100px; height: 200px;"></canvas>
</view>
<view class="footer" bindtap="changeMotto">
  任何业绩的质变都来自于量变的积累。
</view>

//.js
Page({
  data: {
    batteryValue: 0, // 默认电池值
    birthday: '', // 出生日期
    pastMonth: 0, // 已度过的月份
    langMoreThan: '已经', // 语言提示，默认为已经
    totalLife: 900, // 预期寿命，单位：个月
    mottoIndex: 0, // 句子索引
    mottoList: [ // 句子列表
      "让我们将事前的忧虑，换为事前的思考和计划吧！",
      "再长的路，一步步也能走完，再短的路，不迈开双脚也无法到达。",
      "任何业绩的质变都来自于量变的积累。",
      "成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。",
      "一个有信念者所开发出的力量，大于九十九个只有兴趣者。",
      "每一发奋努力的背后，必有加倍的赏赐。",
      "做对的事情比把事情做对重要。",
      "人格的完善是本，财富的确立是末。",
      "没有一种不通过蔑视、忍受和奋斗就可以征服的命运。",
      "行动是治愈恐惧的良药，而犹豫、拖延将不断滋养恐惧。"
    ],
  },

  // 页面加载时执行
  onLoad: function (options) {
    // 计算已经度过的月份
    const birthday = new Date(this.data.birthday);
    const currentDate = new Date();
    const pastMonth = (currentDate.getFullYear() - birthday.getFullYear()) * 12 + (currentDate.getMonth() - birthday.getMonth());

    // 更新已经度过的月份和剩余寿命百分比
    this.setData({
      pastMonth: pastMonth,
      batteryValue: 100 - (pastMonth / this.data.totalLife) * 100, // 将百分比反转
    });

    this.drawBattery(this.data.batteryValue);
  },

  // 绘制电池
  drawBattery: function (batteryValue) {
    const ctx = wx.createCanvasContext('batteryCanvas'); // 获取 canvas 上下文

    const width = 100; // 画布宽度
    const height = 200; // 画布高度
    const borderWidth = 10; // 电池外框宽度
    const batteryHeight = height - borderWidth * 2; // 电池实际填充高度

    // 绘制电池外框
    ctx.beginPath();
    ctx.rect(borderWidth, borderWidth, width - borderWidth * 2, batteryHeight);
    ctx.strokeStyle = '#000000';
    ctx.stroke();

    // 绘制电池内部填充
    const fillHeight = batteryHeight * (batteryValue / 100); // 填充的高度
    ctx.beginPath();
    ctx.rect(borderWidth, borderWidth + (batteryHeight - fillHeight), width - borderWidth * 2, fillHeight);
    ctx.fillStyle = '#00FF00'; // 绿色填充
    ctx.fill();

    // 绘制电池百分比文字
    ctx.font = '20px Arial';
    ctx.fillStyle = '#000000';
    ctx.textAlign = 'center';
    ctx.fillText(`${batteryValue.toFixed(2)}%`, width / 2, height - 10);

    ctx.draw(); // 绘制到 canvas 上
  },

  // 更改出生日期
  bindDateChange: function (e) {
    const birthday = e.detail.value;
    this.setData({
      birthday: birthday,
    });

    // 重新加载页面
    this.onLoad();
  },

  // 清除记录
  clearHistory: function () {
    // 清空已选择的出生日期
    this.setData({
      birthday: '',
    });
    // 重新加载页面
    this.onLoad();
  },

  // 点击底部文字切换下一句
  changeMotto: function () {
    let newIndex = this.data.mottoIndex + 1;
    if (newIndex >= this.data.mottoList.length) {
      newIndex = 0; // 循环显示
    }
    this.setData({
      mottoIndex: newIndex,
    });
  },

  // 获取当前显示的底部文字
  getCurrentMotto: function () {
    return this.data.mottoList[this.data.mottoIndex];
  },

  // 获取当前显示的底部文字
  get currentMotto() {
    return this.data.mottoList[this.data.mottoIndex];
  },
});

代码效果图：