第四章作业

伍叁的小恐龙

已于 2024-03-31 18:32:56 修改

阅读量170

点赞数 3

文章标签：前端 javascript html

于 2024-03-31 14:54:36 首次发布

本文链接：https://blog.csdn.net/weixin_74842051/article/details/137200590

版权

二、操作题

1.使用canvas组件实现“五环”的绘制。

wxml文件代码：


<canvas canvas-id="myCanvas" style="width: 330px; height: 300px;"></canvas>

js文件代码：

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.arc(55, 55, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('blue')
    ctx.setLineWidth(10)
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(160, 55, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('black')
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(265, 55, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('red')
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(105,115, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('yellow')
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(215, 115, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('green')
    ctx.stroke()

    ctx.draw()
  }
})

运行结果如下：

2.使用相应组件，完成如图 4-29 所示的 “书单”页面。

wxml文件代码：

 
<view style="font-size: 20px;position: absolute;top: 50px;top: 25px;"> ⬅书单</view>
 
 <view>
 <view class="tou1">
 <image src="./images/shou.jpg" mode="t1" class="shou"style="position:absolute;top:60px"/>
 </view></view>
 <view>
   <view style="position: absolute;top:90px;color: rgb(#808080);left: 30px;font-size: 20px;">培养商业意识，走出生活，职场和事业的困境。</view>
   <view style="position: absolute;top: 85px;color: rgb(#808080);left: 15px;top: 170px;font-size: 15px;">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条</view>
 </view>
 <view class="yi">
 <view class="di1">叫魂</view>
 <view class="di2">孔力飞</view>
 <view class="di3">《叫魂：1768年中国妖术大恐慌》（Soulstealers：The Chinese Sorcery Scare of 1768）是美国汉学家孔飞力创作的历史学著作，成书于1990年。</view>
 </view>
 <view class="tou2">
 <view class="tou2"><image src="./images/j.jpg" mode=""class="tu1"/></view></view>
 <view class="xian" style="border-bottom: 1px solid rgb(119, 47, 47);padding: 10px;"></view>
 <view class="tou3">
 <view ><image src="./images/y.jpg" mode=""class="tu2"/></view></view>
 <view class="er">
 <view class="er1">一战小人物口述史</view>
 <view class="er2">彼得·哈特</view>
 <view class="er3">2009年，随着仅存一位一战退伍军人的谢世，英国口述史专家彼得·哈特对英国的一战老兵进行的183次口述历史访谈，成为了罕见的战争记录。</view>
 </view>

wxss文件代码：

 
 .shou{
  float: left;
  margin-top: 10px;
  width: 450px; 
  height: 180px;
}
.tu1{
  margin: 0 auto;
  float: left;
  display: block;
  width: 170px; 
  height: 180px;
  margin-top: 10px;
}
  /* .xian{
  height: 450px;
}     */
.yi{
  margin-top: 10px;
}
.tou1{
  margin-top: 5px;
}
.tou2 {
  position: absolute; 
}
.tou2 image{
  position: relative;
  top: 250px;
  left: 2px;
}
 
.tou3{
  margin-top: 400px;
  position: absolute;
}
.tou3 image{
  position: relative;
  width: 173px;
  height: 180px;
  top: 20px;
}
.yi{
  margin-top: 5px;
  float: right;
}
.er{
  margin-top: 5px;
  float: right;
}
.tu2{
  margin: 0 auto;
  float: left;
  display: block;
  width: 180px; 
  height: 160px;
  margin-top: 60px;
}
.di1{
  margin: 0 auto;
  display: block;
  font-size: 25px;
  float: none;
  display: block;
  margin-left: 200px;
  margin-top: 250px; 
}
.er1{
  position: absolute;
  left: 195px;
  top: 500px;
  font-size: 25px;
}
.er2{
  color: black;
  position: absolute;
  left: 200px;
  top:540px;
  font-size: 15px;
 
}
.er3{
  position: absolute;
  left: 200px;
  top:570px;
  font-size: 14px;
color: gray;
}
.di2{
  display: block;
  font-size: 15px;
  float: none;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
}
.di3{
  display: block;
  font-size: 14px;
  float: right;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
  color: grey;
}

运行结果如下：

3.使用相应组件，完成如图 4-30 所示的“西安找拼车” 小程序部分界面。

wxml文件代码：


<view class="a1"><view style="color: white;padding-top: 20px;">X 西安找拼车</view>
</view>
<view class="a2">联系方式（手机号和微信至少填一项）</view>
<view style="border-bottom: 1px solid darkgrey;padding: 0px;"></view>
<view>
  <view class="a3">称呼*</view>
  <view class="z1">请输入称呼</view>
</view>
<view class="tongyang"></view>
<view>
  <view class="a4">手机号</view>
  <view class="z2">请输入手机号</view>
</view>
<view  class="tongyang"></view>
<view>
  <view class="a5">微信号</view>
  <view class="z3">请输入微信号</view>
</view>
<view class="tongyang"></view>
<view class="a6">拼车信息</view>
<view style="border-bottom: 1px solid darkgrey;padding: 0px;">
</view>
<view>
  <view class="a7">出发地点*</view>
  <view class="z4">限7个字</view>
</view>
<view class="tongyang2"></view>
<view>
  <view class="a8">目的地*</view>
  <view class="z5">限7个字</view>
</view>
<view class="tongyang2"></view>
<view>
  <view class="a9">空座位*</view>
  <view class="z6">请输入空座位</view>
</view>
<view class="tongyang2"></view>

js文件代码：

Page({
  "navigationBarBackgroundColor": "#808080",
  "backgroundTextStyle": "dark",
  "disableScroll":true,
  "navigationStyle": "custom"
})

wxss文件代码：

.a1{
  background-color: black;
  height: 55px;
}
.a2{
  color: gray;
  background-color: rgba(2, 2, 10, 0.295);
  margin-top: 10px;
  height: 35px;
}
.a3{
  font-size: 20px;
  position: absolute;
  top: 110px;
  padding-left: 10px;
}
.a4{
  font-size: 20px;
  position: absolute;
  top:150px;
  padding-left: 10px;
}
.a5{
  font-size: 20px;
  position: absolute;
  top: 195px;
  padding-left: 10px;
}
.a6{
  color:grey;
  padding-top: 10px;
  background-color: darkgray;
  height: 35px; 
  padding-left: 10px;
}
.a7{
  font-size: 20px;
  position: absolute;
  top: 290px;
  padding-left: 10px;
}
.a8{
  font-size: 20px;
  position: absolute;
  top: 340px;
  padding-left: 10px;
}
.a9{
  font-size: 20px;
  position: absolute;
  top: 390px;
  padding-left: 10px;
}
.z1{
  font-size: 20px;
  color: rgba(0, 0, 0, 0.719);
  position: absolute;
  left: 140px;
  top:115px
}
.z2{
  font-size: 20px;
  color: rgba(0, 0, 0, 0.719);
  position: absolute;
  left: 140px;
  top:150px
}
.z3{
  font-size: 20px;
  color: rgba(0, 0, 0, 0.719);
  position: absolute;
  left: 140px;
  top:195px
}
.z4{
  font-size: 20px;
  color: rgba(0, 0, 0, 0.719);
  position: absolute;
  left: 140px;
  top:290px
}
.z5{
  font-size: 20px;
  color: rgba(0, 0, 0, 0.719);
  position: absolute;
  left: 140px;
  top:340px
}
.z6{
  font-size: 20px;
  color: rgba(0, 0, 0, 0.719);
  position: absolute;
  left: 140px;
  top:390px
}
.tongyang{
  border-bottom: 1px solid darkgrey;
  padding: 20px;
}
.tongyang2{
  border-bottom: 1px solid darkgrey;
  padding: 25px;
}

运行结果如下：

三、编程题

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

wxml代码：

wxml

<template name="nav">
    <view class="nav">
        <navigator class="item" hoverClass="none" openType="switchTab" url="/pages/index/index">
            <image mode="scaleToFill" src="../../images/ico_home{{pagename=='home'?'_selected':''}}.png"></image>
            <view>首页</view>
        </navigator>
        <navigator class="item" hoverClass="none" openType="switchTab" url="/pages/countdown/countdown">
            <image mode="scaleToFill" src="../../images/ico_countdown{{pagename=='countdown'?'_selected':''}}.png"></image>
            <view>年月日</view>
        </navigator>
        <navigator class="item" hoverClass="none" openType="switchTab" url="/pages/meditation/meditation">
            <image mode="scaleToFill" src="../../images/ico_meditation{{pagename=='meditation'?'_selected':''}}.png"></image>
            <view>静思</view>
        </navigator>
        <navigator class="item" hoverClass="none" openType="switchTab" url="/pages/about/about">
            <image mode="scaleToFill" src="../../images/ico_about{{pagename=='about'?'_selected':''}}.png"></image>
            <view>关于</view>
        </navigator>
    </view>
</template>


//

.past {
    margin: 100rpx auto -105rpx;
    padding: 0 10rpx;
    font-size: 160%;
    font-weight: 300;
}

.main {
    position: relative;
    display: flex;
    flex: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    opacity: .9;
}

<view class="doodle" wx:if="{{!bgsrc.length}}">
    <image mode="aspectFill" src="{{doodle}}"></image>
</view>
<view class="theme{{canHideNavigation?' customtopnav':''}} {{platform}}">
    <view class="btn-changetheme" style="top: {{navigationTopValue}}px;">
        <view wx:if="{{canHideNavigation}}">
            <button class="topshare" hoverClass="none" openType="share" plain="true">
                <image mode="scaleToFill" src="../../images/ico_share_customtopnav.png"></image>
            </button>
        </view>
        <image bindtap="choseBackground" mode="scaleToFill" src="../../images/ico_theme{{canHideNavigation?'_customtopnav':''}}.png"></image>
    </view>
    <view class="bg-theme">
        <image mode="aspectFill" src="{{bgsrc}}"></image>
    </view>
</view>
<view class="container{{bgsrc?' zoomout':''}}{{isiPhoneX?' ct-iphonex':''}}">
    <view class="header">
        <view class="past">
            <view>{{today}}</view>
        </view>
    </view>
    <view bindtap="viewHistory" class="main">
        <view class="cell"></view>
        <view class="months">
            <view class="remaining">
                <view class="remaining-before" style="top: {{100-remaining}}px;"></view>
                <view class="remaining-after" style="top: {{100-remaining}}px;"></view>
                <view class="remaining-txt" style="height: {{remaining-3}}px;" wx:if="{{remaining>=6}}">{{remaining}}%</view>
            </view>
        </view>
        <view class="indicator-block indicator-{{activeIndex}}">
            <view class="indicator" wx:for="{{history}}" wx:key="indicator"></view>
        </view>
    </view>
</view>
<block wx:if="{{canHideTabBar}}">
    <import src="../../templates/nav.wxml"></import>
    <view class="{{platform}}{{isiPhoneX?' nav-iphonex':''}}">
        <template is="nav" data="{{pagename:'countdown'}}"></template>
    </view>
</block>
<ad class="ad{{isiPhoneX?' ad-iphonex':''}}" unitId="adunit-338e6be140a1d835"></ad>

wxml文件：

<view class="theme{{canHideNavigation?' customtopnav':''}} {{platform}}"></view>
<view class="container page{{isiPhoneX?' ct-iphonex':''}}">
    <view class="page__bd">
        <view class="weui-panel" wx:if="{{!!backupEventsView}}">
            <view class="weui-panel__bd">
                <view class="weui-media-box weui-media-box_text">
                    <view class="weui-media-box__title weui-media-box__title_in-text">
                        重要说明
                    </view>
                    <view class="weui-media-box__desc">
                        <view class="p">因个人主体小程序不允许提供备忘录、日记、记事服务，故删除“日子”相关功能，抱歉给大家带来不便。</view>
                        <view class="p">之前在您本机存储的“日子”数据已展示在以下输入框中，您可以复制导出。</view>
                        <view class="p">当您清除本机原有“日子”数据后，该“重要说明”将不再出现。</view>
                        <textarea class="txtarea" maxlength="-1" value="{{backupEventsView}}"></textarea>
                        <view class="p btn-share">
                            <button bindtap="delDaysEvent" class="js-btn-deldays" type="warn">清除本机原有“日子”数据</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="weui-panel">
            <view class="weui-panel__bd">
                <view class="weui-media-box weui-media-box_text">
                    <view class="weui-media-box__title weui-media-box__title_in-text">
                        历程
                    </view>
                    <view class="weui-media-box__desc">
                        <view class="p">2017 年 4 月，上线</view>
                        <view class="p">2017 年 5 月，知晓程序推荐</view>
                        <view class="p">2017 年 12 月，少数派推荐</view>
                        <view class="p">2018 年 2 月，荣登阿拉丁指数 TOP200 小程序榜</view>
                        <view class="p">2018 年 11 月，用户突破 90 万</view>
                        <view class="p" style="margin-top: 10rpx">合作、建议、问题反馈等，请联系客服（非即时）</view>
                        <view class="p btn-share">
                            <button class="feedback" openType="contact" type="default">在线客服</button>
                            <button bindtap="shareEvent" class="js-btn-share" openType="share" type="default">推荐「人生进度」给好友 😃</button>
                        </view>
                        <view class="ad-block">
                            <ad class="ad" unitId="adunit-0a20011fbd126e5c"></ad>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="weui-panel{{canHideTabBar?' large-bottom':''}}">
            <view class="weui-panel__bd">
                <view class="weui-media-box weui-media-box_text">
                    <view class="weui-media-box__title weui-media-box__title_in-text">
                        彩蛋
                    </view>
                    <view class="weui-media-box__desc">
                        <view class="p">1. 点击“首页”格言可以换一条</view>
                        <view class="p">2. 默认风格下，当前月份和生日月份相同时，“首页”会有生日祝福</view>
                        <view class="p">3. 默认风格下，某些节日当天，“年月日”页面会有节日图片出现</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>
<block wx:if="{{canHideTabBar}}">
    <import src="../../templates/nav.wxml"></import>
    <view class="{{platform}}{{isiPhoneX?' nav-iphonex':''}}">
        <template is="nav" data="{{pagename:'about'}}"></template>
    </view>
</block>

运行结果如下：