第四章作业——页面组件

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

.wxml

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

.js

Page({
  onLoad:function(options){
    var ct=wx.createCanvasContext('wu')
    ct.beginPath()
    ct.arc(60,50,40,0,2*Math.PI)
    ct.setStrokeStyle('#3282F6')
    ct.stroke()
 
    ct.beginPath()
    ct.arc(120,50,40,0,2*Math.PI)
    ct.setStrokeStyle('#000000')
    ct.stroke()
 
    ct.beginPath()
    ct.arc(180,50,40,0,2*Math.PI)
    ct.setStrokeStyle('#EB3324')
    ct.stroke()
 
    ct.beginPath()
    ct.arc(100,100,40,0,2*Math.PI)
    ct.setStrokeStyle('#FFFC12')
    ct.stroke()
 
    ct.beginPath()
    ct.arc(160,100,40,0,2*Math.PI)
    ct.setStrokeStyle('#75F94D')
    ct.stroke()
 
    ct.draw()
  }
})

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

.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;
}

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

.wxml

<view class="a">联系方式（手机和微信至少填一项）</view>
<view class="box">
<view class="text1">称号*</view>
<input placeholder="请输入称呼"class="text2"/>
</view>
<view class="box">
<view class="text1">手机号</view>
<input placeholder="请输入手机号"class="text2"/>
</view>
<view class="box">
<view class="text1">微信号</view>
<input placeholder="请输入微信号"class="text2"/>
</view>
<view class="a">拼车信息</view>
<view class="box">
<view class="text1">出发地点*</view>
<input placeholder="限7个字"class="text2"/>
</view>
<view class="box">
<view class="text1">目的地*</view>
<input placeholder="限7个字"class="text2"/>
</view>
<view class="box">
<view class="text1">空座数*</view>
<input placeholder="请输入空座数"class="text2"/>
</view>

.wxss

.a{
  width:100%;
  height:50px;
  border:1px solid #292929;
  background-color: #7F7F7F;
  font-size: 22px;
  line-height: 50px;
}
.box{
  height:60px;
  display: flex;
  position: relative;
}
.text1{
  height:60px;
  width:800px;
  line-height: 50px;
  left:40px;
  font-size: 30px;
  position: absolute;
  border-bottom: 1px solid #808080;
}
.text2{
   height:50px;
   line-height:50px;
   position: absolute;
   left:200px;
   font-size: 23px;
}

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

.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;
}