微信小程序第四章作业

深藏y

已于 2024-03-31 18:31:14 修改

阅读量119

点赞数 3

文章标签：微信小程序小程序

于 2024-03-31 18:26:03 首次发布

本文链接：https://blog.csdn.net/weixin_74842188/article/details/137195667

版权

1.使用canvas组件实现"奥运五环的绘制"。

代码如下

.wxml

<canvas canvas-id="olympic-rings" style="width: 800px; height: 500px;"></canvas>

.js

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('olympic-rings');
 
 
    const colors = ['#6495ed', '#000000', '#9acd32', '#ff0000', '#ffd700'];
 
 
    ctx.beginPath();
    ctx.arc(60, 60, 50, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[0]);
    ctx.stroke();
 
  
    ctx.beginPath();
    ctx.arc(165, 60, 50, 0, 2  * Math.PI);
    ctx.setStrokeStyle(colors[1]);
    ctx.stroke();
 
  
    ctx.beginPath();
    ctx.arc(270, 60, 50, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[2]);
    ctx.stroke();
 
 
    ctx.beginPath();
    ctx.arc(110,120, 50, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[3]);
    ctx.stroke();
 
  
    ctx.beginPath();
    ctx.arc(220, 120, 50, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[4]);
    ctx.stroke();
 
    ctx.draw();
  }
});

运行结果如下

2、使用相应组件，完成书单页面。

代码如下：

.wxml

<view class="head">← 书单</view>
<view class="p1">
  <view class="p2">书读百遍其义自见</view>
  <view class="p3">读书不是唯一的出路但是是最好的出路</view>
</view>
<view class="shu">
  <view class="imgone" style="display: flex;">
   <image class="img1" src="../images/07011034d91dea2ec810da1f6f4ca2d.jpg"/>
    <view class="textone">
      <view class="text1">骆驼祥子</view>
      <view class="text2">老舍</view>
      <view class="text3">《骆驼祥子》《骆驼祥子》讲述的是旧中国北平城里的一个年轻好强、充满生命活力的人力车夫祥子的悲惨经历。深刻揭露了动荡的旧社会对普通大众生存境况的压迫...</view>
    </view>
  </view>
  <view class="xian"></view>
  <view class="imgtwo" style="display: flex;">
   <image class="img2" src="../images/970818f75afc764eaf074d2d42152ad.jpg"/>
    <view class="texttwo">
      <view class="text1">活着</view>
      <view class="text2">余华</view>
      <view class="text3">活着》讲述了在大时代背景下，随着内战、 三反五反 、 大跃进 、“ 文化大革命 ”等社会变革， 徐福贵 的人生和家庭不断经受着苦难......
      </view>
    </view>
  </view>
</view>

.wxss

.head{
  font-size: 60rpx;
}
.p1{
  background-color: black;
}
.p2{
  color: aliceblue;
  text-align: center;
  font-size: 45rpx;
  padding: 30rpx;
}
.p3{
  color: aliceblue;
  padding: 20rpx;
}
.shu{
  margin: 50rpx;
}
.textone{
  margin-left: 50rpx;
}
.img1{
  width: 700rpx;
  height: 350rpx;
}
.img2{
  width: 700rpx;
  height: 350rpx;
}
.text1{
  font-size: 70rpx;
  font-weight: 700;
}
.text2{
  font-size: 40rpx;
  font-weight: 600;
}
.xian{
  margin-top: 50rpx;
  border-bottom: 4px solid #ccc;
}
.imgtwo{
  margin-top: 50rpx;
}
.texttwo{
  margin-left: 50rpx;
}

运行结果如下

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>

.js

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

运行结果如下

编程题

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

代码如下：

//about.js


var a = getApp(), e = require("../../4E683285C190288C280E5A82494C27D6.js");

Page({
    data: {
        backupEvents: wx.getStorageSync("__events") || [],
        backupEventsView: "",
        imglist: [],
        canHideTabBar: a.globalData.canHideTabBar,
        canHideNavigation: a.globalData.canHideNavigation,
        navigationTopValue: a.globalData.statusBarHeight ? "ios" == a.globalData.res.platform ? a.globalData.statusBarHeight + 4 : a.globalData.statusBarHeight + 8 : 0,
        isiPhoneX: a.globalData.isiPhoneX,
        platform: a.globalData.res.platform,
        canFeedback: e.compareVersion(wx.getSystemInfoSync().SDKVersion, "2.1.0") >= 0
    },
    onLoad: function() {
        this.handleBackupEvents();
    },
    handleBackupEvents: function() {
        var a = "", e = this.data.backupEvents;
        for (var t in e) a += e[t].viewDate + "，" + e[t].day + "，" + e[t].name + "\r\n";
        this.setData({
            backupEventsView: a
        });
    },
    delDaysEvent: function() {
        var a = this;
        wx.showModal({
            title: "注意",
            content: "即将清除本机原有“日子”数据",
            success: function(e) {
                e.confirm && wx.removeStorage({
                    key: "__events",
                    success: function(e) {
                        a.setData({
                            backupEventsView: ""
                        });
                    }
                });
            }
        });
    },
    previewImage: function(a) {
        wx.previewImage({
            current: this.data.imglist[0],
            urls: this.data.imglist
        });
        wx.getSystemInfoSync();
    },
    shareEvent: function(a) {},
    clickCustomAd: function(t) {
        var n = a.globalData.res.SDKVersion;
        e.compareVersion(n, "1.3.0") >= 0 && e.compareVersion(n, "2.0.7") <= 0 && wx.navigateToMiniProgram({
            appId: t.currentTarget.dataset.appid,
            path: t.currentTarget.dataset.path,
            envVersion: "release"
        });
    },
    onShareAppMessage: function() {
        return wx.showShareMenu({
            withShareTicket: !0
        }), {
            title: "奋斗没有终点，任何时候都是一个起点",
            desc: "",
            path: "pages/index/index",
            imageUrl: "../../images/share.png",
            success: function(a) {}
        };
    }
});


//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>


//.wxss



.page {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkZFN0NGMUIzMjM5MTFFOEFEM0VCNUQ1NTNGODlGODkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkZFN0NGMUMzMjM5MTFFOEFEM0VCNUQ1NTNGODlGODkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRkU3Q0YxOTMyMzkxMUU4QUQzRUI1RDU1M0Y4OUY4OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGRkU3Q0YxQTMyMzkxMUU4QUQzRUI1RDU1M0Y4OUY4OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp24Yj4AAAJ6SURBVHjaNJQNjuQ4CIX5tatm5oZ7f2lP0JXYBvaRmpUQbVXn4z0MCZ9//6FNtJlu/Rs/gy6v603XL7p/0/qDqPhDhfyb6EX0q9iJhpESFYIpv1lrCqV3hFcOylk1m8GBcMAvXgLYrQyQNJ9MJRRMoZXWT8Sgms232qA9irxqkFofyAzP/y/eyuUKuMnjdCDyqnhVzm+V+sqSVWmRGGw21jzcIh6y4HlUvqEDmIABtvEVrDIA2Qb4ObRzLnt6Tqv8wggIzqwX1cinaMPoq0uIhSSVUpsH/5D1YPHufGbaQFQ4YKgRLqk0g9t2Z/zyVVYl9Iz/5chWfuWYfe7wBB8Qg4AkaxXbge3uF3+kr0EG2StzhjcTMZ/seTzcMvV0X62cUN4NS0mTfQXtylNH+jzRnlFlb0+3HRpHQ/gbrfzAOGmKUWO4HjAzch5H9h1+mrQTuo5k6E7Ow0FkCyQjMCvM3INGydwoochj21jmZ9g6uhQhR2iLhHIE2+LnkhlLM4JnImQekDY2ZNOX2x16uazDa8utspUOw3krY2hOjC0df8maG55lLB23+GV2q16ml+rHeR++g4/SPmQbbrlnm608gubhR7nGnX65Xak/Lp/gy/k6fCkvZYgjGgZW/Ep6Bb2xTLvFx82QtUv0R/Rj+lH5cf5s/jjdh5bRibaNjZ3fCHodRomxeCyxpXanLpMrwMjn8I8T8r1pKS1hi8ZeiOR3tDgMzy1+ynbqFl2CG5J+GoYNnvGloOvQhnI0Ob8lEg1/Oy+srWHy2VN5BqPc7+jp1xRXtZ8qdvrj8C769fSMUYF0fGWwvSG9wySc0i8cFiONw6jDaR36T4ABAFt+8aT06NZLAAAAAElFTkSuQmCC) no-repeat 50% 50%;
    background-size: cover;
}

.reward {
    margin-top: 30rpx;
    width: 100%;
}

.weui-media-box__desc {
    overflow: visible;
}

.ad-block {
    margin: 40rpx -16px -16px;
}

.ad {
    padding-bottom: 0;
    border-radius: 0 0 30rpx 30rpx;
}

.btn-share {
    margin-top: 40rpx;
}

.btn-share button {
    font-size: 28rpx;
}

.btn-share .feedback {
    margin-bottom: 20rpx;
}

.large-bottom {
    margin-bottom: 125rpx!important;
}

.miniprogram-list__item {
    overflow: hidden;
    position: relative;
    margin-top: 20rpx;
    padding-left: 112rpx;
    min-height: 112rpx;
}

.miniprogram-list__cover {
    position: absolute;
    margin-left: -112rpx;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
}

.miniprogram-list__title {
    font-size: 32rpx;
    color: #444;
}

.miniprogram-list__desc {
    color: #999;
}

.txtarea {
    box-sizing: border-box;
    margin-top: 20rpx;
    padding: 20rpx;
    width: 100%;
    height: 440rpx;
    line-height: 1.5;
    border: 1px solid #f0f0f0;
    background-color: #f6f6f6;
    box-shadow: inset 6rpx 6rpx 10rpx rgba(0,0,0,.1);
}

@media (prefers-color-scheme:dark) {
    .page {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACG0lEQVQ4jVVUUbIdKxACNRt4e8pf9r+ZHJtXDe2pmw9LZ0YRaHr45/d/ggAWgVpAEez5s/3Me4DK+K51APyCtAEsADNr44ACQIgEl/xBIth7tIC1MjNDKxcFaIa/0+OA6JPAEtSMOPv6wyLUs/JSaMZzSQVED8wsidN7jTkYOT+M9/qyZMvjRjES2SADJrPkA6y8QC7SygeaUYP2gR0bmoWWlYjLe9o3q+AA4stOc1uQzZB7PNtmqefXzDWSKM4aOLUEFkzZrN9tKze3VO2ZbfxOgZr5HY+6qGGC05lRV1cB1hTD8eFCtX/YqL2/zLzndsUXMKB6DDWKLecBKSxcALOaw0qkUihCxXje6u4w9AVt+MwBmuzYw+VocECr1+2ZOGmI/Q3cssOQ8gZ7g4TXnlneCTv7xFw2+XygjpqcZpw7aU90Ji4DXBPg4rNgm0lNATvbKvwDesoOvtTnYJgF+AH095r1XekQfd8Nw/VlOK3FCWoz6TAjnrXk63Uk+z9iMBisbiAqHr4+3W4pg4wNt5+ZAN9h8+n1k8x+72Dgtfy5bpZt8z3zQDqRO6ANcPlGvPsAuEoM/fNRgM1Q73827DSMy4B0Hu+w/PRYYXkHuKVacv++cvAny7C73avubRoskQmLTzcKgb9tufLsiqfKZyLzopMCPC/j8YD9KMqlhrG78BslM/zJLgWZX9IABqxTEHmvQ14WXemWLeB/qypVEgBNXqYAAAAASUVORK5CYII=);
    }

    .weui-panel {
        background-color: #111;
    }
}

运行结果如下

深藏y

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
微信小程序第四章作业

人生进程”是一款极简的小程序，它只有一个功能：就是计算一个人从出生到现在已经度过了多少个月。3.使用相应组件，完成西安找拼车小程序部分界面。1.使用canvas组件实现"奥运五环的绘制"。2、使用相应组件，完成书单页面。
复制链接

扫一扫