第四章作业

列车柒号

已于 2024-03-31 20:29:01 修改

阅读量156

点赞数 5

文章标签： java 服务器前端微信小程序小程序

于 2024-03-30 17:11:39 首次发布

本文链接：https://blog.csdn.net/MYL415/article/details/137177210

版权

操作题

1，使用canvas组件画五个圈

wxml:

<canvas canvas-id="yuan"/>

zuo4.js:

Page({
  onLoad:function(options){
    var ctx =wx.createCanvasContext('yuan')
    ctx.arc(70,60,40,0,2*Math.PI)
    ctx.setFillStyle('blue')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(70,60,32,0,2*Math.PI)
    ctx.setFillStyle('white')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(160,60,40,0,2*Math.PI)
    ctx.setFillStyle('black')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(160,60,32,0,2*Math.PI)
    ctx.setFillStyle('white')
    ctx.fill()
    ctx.draw(true)
    ctx.draw(true)
    ctx.arc(250,60,40,0,2*Math.PI)
    ctx.setFillStyle('red')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(250,60,32,0,2*Math.PI)
    ctx.setFillStyle('white')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(115,110,40,0,2*Math.PI)
    ctx.setFillStyle('yellow')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(115,110,32,0,2*Math.PI)
    ctx.setFillStyle('white')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(205,110,40,0,2*Math.PI)
    ctx.setFillStyle('green')
    ctx.fill()
    ctx.draw(true)
    ctx.arc(205,110,32,0,2*Math.PI)
    ctx.setFillStyle('white')
    ctx.fill()
    ctx.draw(true)
  }
})

运行结果：

2，完成“书单”页面的设置

zuo4.json:

{
  "usingComponents": {},
  "navigationBarTitleText": "←书单",
  "navigationBarTextStyle": "black",
  "navigationBarBackgroundColor": "#fff"
}

zuo4.wxml:

<view class="box1">
<image src="/image/shu2.png" class="image1"> </image>
<text class="text1">培养阅读知识，丰富精彩人生</text>
<text class="text2">幻想的世界总是美好，本书单以小说的形式展示作者眼中美好的世界展现人世间美好情怀</text> 
</view>
<view>
<view class="box2">
<image src="/image/shu3.png" class="image2"></image>
<text class="text3">云边有个小卖部</text>
<text class="text4">张嘉佳</text>
<text class="text5">该书主要讲述了云边镇中自幼与开小卖部的外婆相依为命的少年刘十三努力读书为了离开小镇，追寻远方与梦想，但在城市里碰壁受挫后回到小镇，小镇的生活表面平静却暗潮汹涌的故事</text>
</view>
<view class="box3">
<image src="/image/shu1.png" class="image3"></image>
<text class="text6">人间告白</text>
<text class="text7">金鱼酱</text>
<text class="text8">该书讲述了金鱼酱和小忽的爱情从校服到婚纱，从一见钟情到相伴相守，直到命运打破了他们原本平凡幸福的生活的故事</text>
</view>
</view>

zuo4.wxss:

.box1{
position: relative;
width: 100%;
height: 200px;
}
.image1{
  width: 100%;
  height: 100%;
}
.text1{
  position: absolute;
  top: 50px;
  left: 35px;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
}
.text2{
  position: absolute;
  top: 90px;
  left: 60px;
  color: #fff;
  font-size: 15px;
  width: 250px;
  text-align: center;
}
.box2{
  position: relative;
  width: 100%;
  height: 150px;
}
.image2{
  width: 100px;
  height: 150px;
  position: absolute;
  left: 20px;
  top: 20px;
}
.text3{
  position: absolute;
  left: 140px;
  top: 25px;
  font-size: 18px;
  font-weight: bold;
}
.text4{
  position: absolute;
  left: 140px;
  top: 60px;
  font-size: 12px;
  font-weight: bold;
}
.text5{
  position: absolute;
  left: 140px;
  top: 85px;
  font-size: 12px;
}
.box3{
  position: relative;
  width: 100%;
  height: 150px;
}
.image3{
  width: 100px;
  height: 150px;
  position: absolute;
  left: 20px;
  top: 40px;
}
.text6{
  position: absolute;
  left: 140px;
  top: 65px;
  font-size: 18px;
  font-weight: bold;
}
.text7{
  position: absolute;
  left: 140px;
  top: 100px;
  font-size: 12px;
  font-weight: bold;
}
.text8{
  position: absolute;
  left: 140px;
  top: 125px;
  font-size: 12px;
}

zuo4.js:

Page({
  
})

运行结果：

3，完成“西安找评车”小程序部分界面

代码如下：

zuo4.json:

{
  "usingComponents": {},
  "navigationBarTitleText": "西安找拼车",
  "navigationBarTextStyle": "white",
  "navigationBarBackgroundColor": "#000"
}

zuo4.wxml:

<input placeholder="  联系方式(手机和微信至少填一项)" class="box"/>
<view style="display: flex;" class="box1">
  <view class="ch">称呼*</view>
  <input placeholder="请输入称呼" class="sch"/>
</view>
<view style="display: flex;" class="box1">
  <view class="ch">手机号</view>
  <input placeholder="请输入手机号" class="sch"/>
</view>
<view style="display: flex;" class="box1">
  <view class="ch">微信号</view>
  <input placeholder="请输入微信号" class="sch"/>
</view>
<input placeholder="  评车信息" class="box"/>
<view style="display: flex;" class="box1">
  <view class="ch">出发地点*</view>
  <input placeholder="限7个字" class="sch"/>
</view>
<view style="display: flex;" class="box1">
  <view class="ch">目的地*</view>
  <input placeholder="限7个字" class="sch"/>
</view>
<view style="display: flex;" class="box1">
  <view class="ch">空座数*</view>
  <input placeholder="请输入空座数" class="sch"/>
</view>

zuo4.js:

Page({
  
})

zuo4.wxss:

.box{
  border: 1px solid #000;
  height: 40px;
  background-color: darkgrey;
}
.box1{

  height: 40px;
  position: relative;
}
.ch{
  height: 40px;
  line-height: 40px;
  width: 120px;
  position: relative;
  left: 10px;
  border-bottom: 1px solid #000;
 
  font-size: 18px;
}
.sch{
  height: 40px;
  line-height: 40px;
  width: 300px;
  position: relative;
  left: 10px;
  border-bottom: 1px solid #000;
}

运行结果：

“人生进程"简易小程序

app.json

{
  "pages": [
    "pages/zuo4/zuo4",
    "pages/meiti/meiti",
    "pages/qt/qt",
    "pages/biaodan/biaodan",
    "pages/swiper/swiper",
    "pages/view/view",
    "pages/qushi/qushi",
    "pages/jyjsj/jyjsj",
    "pages/kuai/kuai",
    "pages/si/si",
    "pages/hua/hua",
    "pages/new/new",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#EDCD2D",
    "BackgroundColor": "#64ED77",
    "enablePullDownRefresh": true,
    "backgroundtextstyle": "light"
  },
  "tabBar":{
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list":[{
      "pagePath":"pages/zuo4/zuo4",
      "iconPath":"/image/biao1.png",
      "selectedIconPath": "image/biao1.png",
      "text": "首页"
    },
    {
      "pagePath":"pages/si/si",
      "iconPath":"/image/biao2.png",
      "selectedIconPath": "image/biao2.png",
      "text": "年月日"
    },
    {
      "pagePath":"pages/qt/qt",
      "iconPath":"/image/biao3.png",
      "selectedIconPath": "image/biao3.png",
      "text": "静思"
    },
    {
      "pagePath":"pages/hua/hua",
      "iconPath":"/image/biao4.png",
      "selectedIconPath": "image/biao4.png",
      "text": "关于"
    }
  ]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

zuo4.wxml:

<view style="text-align: center;">中国现阶段人均寿命900个月</view>
<view class="h2">2005年8月至今155个月</view>
<!-- <view class="h2" style="display: flex;"><input type="text" name="time" placeholder="输时间" class="ed"/>至今：{{num}}个月</view> -->
<view style="display: flex;"class="box">
<button formType="submit" class="bt" style="width: 140px;">换一个日期</button>
<button formType="reset" class="bt" style="width: 120px;">清除记录</button>
</view>
<image src="/image/jindu.jpg" class="image1"></image>
<view class="h3">{{text1}}能把在面前行走的机会抓住的人，十有八九都会成功。</view>

zuo4.wxss

.h2{
  font-size: 24px;
  margin:15px 0 15px 60px;
  font-weight: bolder;
}
.image1{
  width: 200px;
  height: 300px;
  margin-left: 90px;
}
.bt{
  width:50px;
  border: 1px solid rgb(179, 179, 178);
}
.box{
  margin: 0 45px 20px 55px;
}
.h3{
  width: 350px;
  margin: 20px auto;
}

运行结果：