微信小程序第四章作业

1.使用canvas组件实现五个圆圈的绘制

代码如下：

// js文件
Page({
    onLoad: function (options) {
      const YS = wx.createCanvasContext('circle');
      // 设置五环颜色
      const colors = ["yellow", "black", "red", "darkviolet","blue" ];
   
      // 绘制黄色环
      YS.beginPath();
      YS.arc(50, 50, 40, 0, 2 * Math.PI);
      YS.setStrokeStyle(colors[0]);
      YS.stroke();
   
      // 绘制黑色环
      YS.beginPath();
      YS.arc(110, 50, 40, 0, 2 * Math.PI);
      YS.setStrokeStyle(colors[1]);
      YS.stroke();
   
      // 绘制红色环
      YS.beginPath();
      YS.arc(170, 50, 40, 0, 2 * Math.PI);
      YS.setStrokeStyle(colors[2]);
      YS.stroke();
   
      // 绘制紫色环
      YS.beginPath();
      YS.arc(80, 90, 40, 0, 2 * Math.PI);
      YS.setStrokeStyle(colors[3]);
      YS.stroke();
   
      // 绘制蓝色环
      YS.beginPath();
      YS.arc(140, 90, 40, 0, 2 * Math.PI);
      YS.setStrokeStyle(colors[4]);
      YS.stroke();
   
      YS.draw();
    }
  })

 

<!-- wxml文件 -->
<canvas canvas-id="circle"></canvas>

 

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

<!-- wxml文件 -->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"/>
<view class="head">← 书单</view>
<view class="box1">
  <view class="text">培养商业意识，走出生活，职场和事业的困境</view>
  <view class="text1">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条</view>
</view>
 
<view class="box2">
  <view class="imgone" style="display: flex;">
   <image class="img1" src="/pages/index/img/R-C.jpg"/>
    <view class="textone">
      <view class="text2">金字塔原理</view>
      <view class="text3">芭芭拉•明托 
      (Barbara Minto)</view>
      <view class="text4">金字塔原理是一种重点突出、逻辑清晰、主次分明的逻辑思路、表达方式和规范动作……</view>
    </view>
  </view>
  <view class="xian"></view>
  
  <view class="box3" style="display: flex;">
    <image class="img1" src="/pages/index/img/OIP-C.jpg"/>
    <view class="textone">
      <view class="text2">基业长青</view>
      <view class="text3">[美]吉姆•柯林斯，杰里•波勒斯</view>
      <view class="text4">《基业长青(珍藏版)》打破了旧有神话，提供了新颖的见解，并为那些有志于建立经得……</view>
    </view>
  </view>
</view>

/* pages/shudan/index.wxss */
.head{
  font-weight: bold; 
  font-size: 25px;
}
.box1{
   background-color: #000;
   color:#fff;
}
.text{
   margin: auto;
   width: 85%;
   text-align: center;
   font-size: 23px;
   padding-top: 10px;
   padding-bottom: 20px;
}
.text1{
   font-size: 14px;
   padding:0px 10px 10px 10px ;
   line-height: 20px;
}
.text2{
   font-weight: bolder;
   font-size: 35px;
}
.text3{
   font-size: 20px;
   font-weight: 550;
}
.box2{
   margin: auto;
   width: 85%;
}
.xian{
   margin: 20px 0;
   border: rgb(179, 172, 172) 2px solid;
}
.textone{
   width: 380px;
   height: 100%;
   margin: 20px;
}
.img1{
   padding-top: 10px;
   width: 250px;
   height: 150px;
}

 

3、使用相应组件完成西安找拼车的小程序部分页面 

wxss 
.tou {
    font-size: 70rpx;
    line-height: 70px;
    color: #ffffff;
    background-color: black;
}
 
.one {
    padding: 45rpx 0 0 40rpx;
    border-bottom: 4px solid #c0c0c0;
    border-top: 4px solid #c0c0c0;
    background-color: #ccc;
}
 
.txw {
    width: auto;
    height: 100rpx;
    font-size: 35rpx;
}
 
.two1 {
    margin: auto;
    width: 85%;
    height: 100%;
    padding: 20px 0 20px 0;
}
 
.two2 {
    font-size: 55rpx;
    float: left;
    font-weight: bold;
}
 
.two3 {
    flex: 1;
    /* 使空间平局分配 */
    padding-left: 150px;
    font-size: 55rpx;
}
 
.box2 {
    margin: auto;
    width: 85%;
    height: 100%;
    padding: 20px 0 20px 0;
    border-bottom: 4px solid #c0c0c0;
}

 wxml
<view class="tou">✕ 西安找拼车</view>
 
 <!-- 联系方式 -->
 <view class="one">
   <view class="txw">联系方式（手机和微信至少填一项）</view>
 </view>
  
 <view class="box2">
   <view class="two2">称呼*</view>
   <view class="two3">请输入称呼</view>
 </view>
  
 <view class="box2">
   <view class="two2">手机号</view>
   <view class="two3">请输入手机号</view>
 </view>
  
 <view class="two1">
   <view class="two2">微信号</view>
   <view class="two3">请输入微信号</view>
 </view>
  
 <!-- 拼车信息 -->
 <view class="one">
   <view class="txw">拼车信息</view>
 </view>
  
 <view class="box2">
   <view class="two2">出发地点*</view>
   <view class="two3">限7个字</view>
 </view>
  
 <view class="box2">
   <view class="two2">目的地*</view>
   <view class="two3">限7个字</view>
 </view>
  
 <view class="box2">
   <view class="two2">空座数*</view>
   <view class="two3">请输入空座数</view>
 </view>

 

 4"人生进程"是一款极简的小程序，他只有一个功能：就是计算一个人出生到现在已经度过了多少个月，请使用编程写程序完成此功能

// JS代码
const date=new Date()
const years=[]
const months=[]
//定义年份
for(let i=1900;i<=2050;i++){
  years.push(i)
}
//定义月份
for(let i=1;i<=12;i++){
  months.push(i)
}
Page({
  data:{
    years:years,
    months:months,
    year:date.getFullYear(),
    month:date.getMonth()+1,
    yue:date.getMonth()+1+((2024-2002)*12),
    value:[102,1],//初始化年月日
  },
  bindChange:function(e){
    const val=e.detail.value
    console.log(val);
    this.setData({
      year:this.data.years[val[0]],
      month:this.data.months[val[1]]
    })
  }
})

<view class="one">中国现阶段人均寿命900个月</view>
<view class="two">{{year}}年{{month}}月至今{{yue}}个月</view>
<view class="button">
  <button class="but">换一个日期</button>
  <button>清除记录</button>
</view>
<picker-view 
  indicator-style="height:50px;"
  style="width:100%;height:300px;"
  value="{{value}}"
  bindchange="bindChange">
    <picker-view-column>
      <view 
        wx:for="{{years}}"
        style="line-height:50px;">
        {{item}}年
      </view>
    </picker-view-column>
    <picker-view-column>
      <view 
        wx:for="{{months}}"
        style="line-height:50px">
        {{item}}月
      </view>
    </picker-view-column>
</picker-view> 
<view class="three">能把在面前行走的机会抓住的人，十有八九都会成功。</view>

 

 

wsxx
.one{
    font-size: 20px;
    margin-top: 90px;
    text-align: center;
  }
  .two{
    font-size: 35px;
    text-align: center;
  }
  .button{
    padding: 20px 0 20px 0;
  }
  .but{
    float: left;
    left: 29rpx;
  }
  .three{
    font-size: 28px;
    margin-top: 50px;
    text-align: center;
  }