第四章作业

最新推荐文章于 2024-07-23 12:36:06 发布

2301_78041961

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量176

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_78041961/article/details/137128237

版权

文章详细介绍了如何在微信小程序中使用canvas组件绘制五圈图形，以及如何构建书单页面和西安找拼车页面，还展示了编程题中人生进程小程序的基本功能。

摘要由CSDN通过智能技术生成

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

wxml代码

<canvas style="width: 375px; height: 812px;" canvas-id="myCanvas"></canvas>

js代码

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('myCanvas')
    context.setLineWidth(2)//圆的宽度
    context.lineWidth = 7;
    context.strokeStyle = '#0180C3';
    context.beginPath();
    context.arc(80, 70, 40, 0, 2*Math.PI, false);
    context.stroke();
    context.strokeStyle = '#000';
    context.beginPath();
    context.arc(170, 70, 40, 0, 2*Math.PI, false);
    context.stroke();
    context.strokeStyle = '#BF0628';
    context.beginPath();
    context.arc(260, 70, 40, 0, 2*Math.PI, false);
    context.stroke();
    context.strokeStyle = '#EBC41F';
    context.beginPath();
    context.arc(125, 110, 40, 0, 2*Math.PI, false);
    context.stroke();
    context.strokeStyle = '#198E4A';
    context.beginPath();
    context.arc(215, 110, 40, 0, 2*Math.PI, false);
    context.stroke();//环环相扣，画弧（实现相关圆弧的覆盖）context.strokeStyle = '#0180C3';
    context.beginPath();
    context.arc(80, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false);
    context.stroke();
    context.strokeStyle = '#000';
    context.beginPath();
    context.arc(170, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false);
    context.stroke();
    context.beginPath();
    context.arc(170, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false);
    context.stroke();
    context.strokeStyle = '#BF0628';
    context.beginPath();
    context.arc(260, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false);
    context.stroke();
    context.stroke()
    context.draw()
  }
})

效果图

2.使用相应的组件完成"书单"页面

wxml代码

<view class="banner">
<image class="jpg" src="/pages/images/1.jpg"></image>
<view class="sm">
<view class="text1">培养商业意识，走出生活，职场和事业的困境</view>
<text class="text2">创新者是如何思考问题的？本书单包括了互联网，\n思维方式，商业，文案，市场，营销等方方面面，\n是在思维方式上的创新，略去传统学院的教条.
</text>
</view>
</view>
<view class="boss">
<image mode="widthFix" class="img1" src="/pages/images/3.jpg"></image>
<view class="text3">金字塔原理</view>
<view class="text4">芭芭拉.明托(Barbara Minto）</view>
<view class="text5">金字塔原理是一种重点突破，逻辑清晰，主次分明的逻辑思路，表达方式和规范动作...</view>
</view>
<view class="boss2">
<image class="img2" src="/pages/images/2.jpg"></image>
<view class="text3">基业长青</view>
<view class="text4">【美】吉姆.柯林斯,杰里.波勒斯</view>
<view class="text5">《基业长青（珍藏版）》打破了旧有神话，提供了新颖的见解，并为那些有志于建立经得...</view>
</view>

wxss代码

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

效果图

3.使用相应的组件完成"西安找拼车"页面

wxml代码

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

wxss代码

.bar{
  padding: 30px 0 10px 10px;
}
.AA{
  width: 97%;
  height: 40px;
  margin-top: 20px;
  float: right;
  line-height: 40px;
  border-bottom: 1px solid rgb(116, 114, 114);
}
.biao{
  margin-top: -5px;
  margin-left: 140px;
}
.name{
  line-height: 10px;
  margin-left: 35px;
  font-weight: bold;
  float: left;
}
.bt{
  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);
}

效果图

4."编程题"

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

wxml代码

<view class="word">中国现阶段人均寿命900个月</view>
<form bindsubmit="bind">
<view style="display: flex;font-size: 20px;" >
  <input type="text" name="time" placeholder="请输入日期" class="word1" />至今{{people}}个月
</view>
<view class="word2">
<button formType="submit">换一个日期</button>
<button formType="reset">清除记录</button>
</view>
</form>
<view class="complex">
  <view data-charge="0" class="battery1"></view>
</view>
<view class="po">82.78%</view>
<view class="word3">能把在面前行走的机会抓住的人，十有八九都会成功。</view>

wxss代码

.word{
  font-weight:500;
  text-align: center;
  line-height: 40px;
}
.word1{
  width: 110px;
  padding: 2px 0 0 30px;
}
.word2{
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}
.battery1{
  color: #34495e;
  border: 1px solid currentColor;
  display: inline-block;
  width:200px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 40px;
  border-radius: 2px;
  display: border-box;
  margin: 30px;
  transform: rotate(-90deg);
}
.battery1::before,.battery1::after{
  content: "";
  position: absolute;
  top: 200px;
}
.battery1::before{
  top: 2px;
  bottom: 2px;
  right: -3px;
  width: 1px;
  display: border-box;
  border: 1px solid currentColor;
  border-left: 0;
}
.battery1::after{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 1px;
  border-radius: 1px;
  background-color: currentColor;
  transition: right 500ms;
}
 
.battery1.low::after{
  right: 80%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.battery.med{
  color: #f39c12;
}
.battery1.med::after{
  right: 40%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.battery1.full{
  color: #27ae60;
}
.battery1[data-charge='0']{
  color: #27ae60;
}
.battery1[data-charge='0']::after{
  right: 17.22%;
}
.word3{
 margin: 80px 20px;
}
.po{
  position: absolute;
  top: 250px;
  left: 148px;
  color: #fff;
}

js代码

Page({
  data:{
      startdate:2000,
      enddate:2050,
      date:'2004',
      n:"2004",
      y:"10",
      r:"24",
      e:"233",
    people:new Date().toLocaleDateString()
  },
  bind:function(e){
    var time = new Date().toLocaleDateString()
    var year = time.substring(0,time.indexOf("/"))
    var mo = time.substring(time.indexOf("/")+1,time.lastIndexOf("/")) 
    
    var value = e.detail.value.time
    var year2 = value.substring(0,time.indexOf("/"))
    var mo2 = value.substring(time.indexOf("/")+1,time.lastIndexOf("/"))

    var m1 = (year - year2 -1)*12+12-(mo2-mo)
    this.setData({
      people : m1
    })
  }
})

app.json代码

{
  "pages":[
      "pages/user/user",
      "pages/index/index",
      "pages/spring/spring",
      "pages/summer/summer"
 
   ],
  "tabBar": {
    "color": "#000000", 
    "selectedColor": "#00BFFF", 
    "borderStyle": "black",  
    "position": "bottom", 
    "custom": false,  
    "list": [  
      {
        "pagePath": "pages/index/index", 
        "text": "首页", 
        "iconPath": "pages/images/1.png"
      },
      {
        "pagePath": "pages/user/user", 
        "text": "年月日", 
        "iconPath": "pages/images/3.png"
      },
      {
        "pagePath": "pages/spring/spring", 
        "text": "关于", 
        "iconPath": "pages/images/3.png"
      },
      {
        "pagePath": "pages/summer/summer", 
        "text": "静思", 
        "iconPath": "pages/images/4.png"
      }
    ]
  },
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "书单",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}