第四章作业

操作题

1.使用canva组件画圈

index.js

Page({
  onReady:function (e){
const ctx = wx.createCanvasContext('myCanvas')
 
ctx.beginPath();
    ctx.arc(80, 80, 50, 0, 2 * Math.PI);
    ctx.strokeStyle = "blue"
    ctx.stroke();
 
 
    ctx.beginPath();
    ctx.arc(190, 80, 50, 0, 2 * Math.PI);
    ctx.strokeStyle = "black"
    ctx.stroke();
 
 
    ctx.beginPath();
    ctx.arc(300, 80, 50, 0, 2 * Math.PI);
    ctx.strokeStyle = "red"
    ctx.stroke();
 
 
    ctx.beginPath();
    ctx.arc(135, 140, 50, 0, 2 * Math.PI);
    ctx.strokeStyle = "yellow"
    ctx.stroke();
 
 
    ctx.beginPath();
    ctx.arc(245, 140, 50, 0, 2 * Math.PI);
    ctx.strokeStyle = "green"
    ctx.stroke();
 
ctx.draw()
  }
})

index.wxml

<canvas canvas-id="myCanvas"></canvas>

index.wxss

canvas{
  height: 400px;
  width: 400px;
}

运行结果

2.使用相应组件实现“书单”页面

.wxml

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

.wxss

.a{
  height:200px;
  width:100%;
  position: relative;
}
.a1{
  width: 100%;
  height: 200px;
}
.a2{
  position: absolute;
  top:30px;
  color:#C0C0C0;
  font-size: 25px;
  font-weight: bold;
  left: 20px;
  right: 20px;
  text-align: center;
}
.a3{
  position: absolute;
  top:110px;
  color:#C0C0C0;
  font-size: 15px;
  left: 15px;
}
.b{
  width:100%;
  height: 200px;
  position: relative;
  top:20px;
}
.img1{
  width:150px;
  height:200px;
  left:20px;
  position: absolute;
}
.text1{
  position: absolute;
  left:180px;
  font-size: 70rpx;
  font-family: "微软雅黑";
}
.text2{
  position: absolute;
  left:180px;
  top:50px;
  font-size: 30rpx;
  font-weight: bold;
}
.text3{
  position: absolute;
  left:180px;
  top:75px;
  font-size: 35rpx;
}
.c{
  top:230px;
  position: relative;
  border: 2px dotted #C0C0C0 ;
}
.d{
  width:100%;
  height: 200px;
  position: relative;
  top:280px;
}
.img2{
  width:150px;
  height:200px;
  left:20px;
  position: absolute;
}
.text4{
  position: absolute;
  left:180px;
  font-size: 70rpx;
  font-family: "微软雅黑";
}
.text5{
  position: absolute;
  left:180px;
  top:50px;
  font-size: 30rpx;
  font-weight: bold;
}
.text6{
  position: absolute;
  left:180px;
  top:75px;
  font-size: 35rpx;
}

运行结果

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

.wxml

<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.“人生进程”是一款极简的小程序，它只有一个功能：就是计算一个人从出生到现在已经度过了多少个月，请编写程序完成此功能。

.wxml

<view class="head">中国现阶段人均寿命900个月</view>
<view class="ny">{{year}}年{{month}}月至今{{yue}}个月</view>
<view class="content">
<button class="one">换一个日期</button>
<button class="two">清除记录</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> 
<image src="/images/2.jpg" class="img"></image>
<view class="end">能把在面前行走的机会抓住的人，十有八九都会成功。</view>

app.json

{
  "pages": [
    "pages/dsz/dsz",
    "pages/logs/logs",
    "pages/new/new",
    "pages/button/button"
  ],
  "window": {
   
  },
  "tabBar": {
    "color": "pink",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/dsz/dsz",
        "iconPath": "images/xx.jpg",
        "selectedIconPath": "images/xx.jpg",
        "text":"首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/hh.jpg",
        "selectedIconPath": "images/hh.jpg",
        "text":"年月日"
      },
      {
        "pagePath": "pages/new/new",
        "iconPath": "images/xx.jpg",
        "selectedIconPath": "images/xx.jpg",
        "text":"静思"
      },
      {
        "pagePath": "pages/button/button",
        "iconPath": "images/hh.jpg",
        "selectedIconPath": "images/hh.jpg",
        "text":"关于"
      }
    ]
  },
 
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

.wxss

.head{
  width:100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 22px;
}
.ny{
  width:100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.content{
  width:100%;
  height: 50px;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  display: flex;
}
.c1{
  height:30px;
}
.img{
  height:400px;
  position: absolute;
  left:50px;
}
.end{
  position: absolute;
  bottom: 50px;
  height:60px;
  line-height: 30px;
  font-size:18px;
  left:30px;
  right:30px;
  text-align: left;
}

运行结果