第四章作业

1.奥运五环 

ht.js

Page({
    onReady:function (e){
const ctx = wx.createCanvasContext('myCanvas')
 
ctx.beginPath()
ctx.arc(90,50,40,0,2*Math.PI)
ctx.setStrokeStyle('#0000FF')
ctx.stroke()
 
ctx.beginPath()
ctx.arc(160,50,40,0,2*Math.PI)
ctx.setStrokeStyle('#000000')
ctx.stroke()
 
ctx.beginPath()
ctx.arc(230,50,40,0,2*Math.PI)
ctx.setStrokeStyle('#FF0000')
ctx.stroke()
 
ctx.beginPath()
ctx.arc(120,110,40,0,2*Math.PI)
ctx.setStrokeStyle('#FFFF00')
ctx.stroke()

ctx.beginPath()
ctx.arc(200,110,40,0,2*Math.PI)
ctx.setStrokeStyle('#00FF00')
ctx.stroke()
 
ctx.draw()
    }
})

ht.wxml

<canvas canvas-id="myCanvas"/>

 效果图：

2.书单 

sd.js

Page({  
  data: {  
    coverImage: '../image/ai.jpg', 
    books: [  
      {  
        cover: '../image/miao.jpg',  
        title: '人性的弱点',  
        author: '卡耐基',  
        description: '书实用人际关系名著帮你轻松获得成功 本书作为一本实用的人际关系著作...'  
      },  
      {  
        cover: '../image/ps.jpg',  
        title: '噪声',  
        author: '丹尼尔',  
        description: '想象一下，两名医生对相同的病人给出了不同的诊断；两名法官对犯了同罪的嫌疑人给出了不同的判决。...'  
      },  
    ]  
  },  
    
  goBack: function() {  
    wx.navigateBack({  
      delta: 1  
    });  
  }  
});

sd.wxml

<view class="head">← 书单</view>
<view class="one">
  <view class="yi">培养商业意识，走出生活，职场和事业的困境。</view>
  <view class="er">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条。</view>
</view>
<!-- 金字塔原理 -->
<view>
  <view class="shu"style="display: flex;">
    <image src="../image/jzt.jpg"/>
    <view class="right">
      <view class="title">金字塔原理</view>
      <view class="author">芭芭拉•明托(Barbara Minto)</view>
      <view class="mes">金字塔原理是一种重点突出、逻辑清晰、主次分明的逻辑思路、表达方式和规范动作…</view>
    </view>
  </view>
  <view class="xian"></view>
  <!-- 基业长青 -->
  <view class="shu" style="display: flex;">
    <image src="../image/jycq.jpg"/>
    <view class="right">
      <view class="title">基业长青</view>
      <view class="author">[美]吉姆•柯林斯，杰里•波勒斯</view>
      <view class="mes">《基业长青(珍藏版)》打破了旧有神话，提供了新颖的见解，并为那些有志于建立经得…</view>
    </view>
  </view>
</view>

sd.wxss

/* wxss文件 */
.head{
    font-size: 16px;
    margin: 30px 0 5px 10px;
  }
  .one{
    background-color: #000;
  }
  .yi{
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 50px 20px 20px 20px;
  }
  .er{
    font-size: 12px;
    color: #fff;
    padding: 0 25px 5px 25px;
  }
  .shu{
    margin: 30px 15px;
  }
  image{
    width: 105px;
    height: 80px;
  }
  .right{
    margin: 0 10px;
  }
  .title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .author{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .mes{
    font-size: 11px;
    margin-bottom: 5px;
  }
  .xian{
    margin: 0 15px;
    border-bottom: 2px solid #ccc;
  }

 效果图：

 3.拼车 

pc.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F2F2F2",
  "backgroundTextStyle": "light",
  "disableScroll":true,
  "navigationStyle": "custom"
}

pc.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="o" 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="o" 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="o" 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="o" style="border-bottom: 1px solid darkgrey;padding: 23px;"></view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
拼车信息</view>
<view class="o" 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="o" 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="o" 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="o" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>

 效果图：

 4.人生进程

创建新项目

在app.json内输入“：

{
  "pages": [
    "pages/index/index",
    "pages/yy/yy",
    "pages/ww/ww",
    "pages/qq/qq"
  ],
  "window": {
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "./aa.png",
      "selectedIconPath": "./aa.png",
      "text": "首页"
    },
    {
      "pagePath": "pages/yy/yy",
      "iconPath": "./aa.png",
      "selectedIconPath": "./aa.png",
      "text": "年月日"
    },
    {
      "pagePath": "pages/ww/ww",
      "iconPath": "./aa.png",
      "selectedIconPath": "./aa.png",
      "text": "静思"
    },
    {
      "pagePath": "pages/qq/qq",
      "iconPath": "./aa.png",
      "selectedIconPath": "./aa.png",
      "text": "关于"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

index.json:

{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}

index.wxml:

<view class="container">  
  <view class="title">中国现阶段人均寿命900个月</view>  
  <view class="highlight">2005年8月至今155个月</view>  
  <view class="date-picker-container">  
    <picker mode="date" value="{{birthDate}}" bindchange="onBirthDateChange">  
      <view class="picker">  
        当前选择：{{birthDate}}  
      </view>  
    </picker>  
    <button bindtap="clearRecord">删除记录</button>  
  </view>  
  <image class="motivational-image" src="./b63068c4ca23c53d38eb12728c507fc.jpg" mode="aspectFit" />  
  <view class="motivational-quote">能把在面前行走的机会抓住的人，十有八九都会成功。</view>   
</view>

index.wxss

.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 20rpx;  
}  
  
.title {  
  font-size: 20px;  
  font-weight: bold;  
  margin-bottom: 20rpx;  
}  
  
.highlight {  
  font-size: 24px;  
  font-weight: bold;  
  color: #333;  
  margin-bottom: 20rpx;  
}  
  
.date-picker-container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-bottom: 20rpx;  
}  
  
.picker {  
  border: 1px solid #ccc;  
  padding: 10rpx;  
  background-color: #fff;  
}  
  
.motivational-image {  
  width: 100%;  
  height: 200px; /* 根据实际图片大小调整 */  
  margin-bottom: 20rpx;  
}  
  
.motivational-quote {  
  font-style: italic;  
  text-align: center;  
  margin-bottom: 20rpx;  
}  
  
.footer {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
  
.footer text {  
  margin: 0 10rpx;  
}

效果图如下：