第四章作业

最新推荐文章于 2024-07-21 22:27:18 发布

z18172949434

最新推荐文章于 2024-07-21 22:27:18 发布

阅读量159

点赞数 3

文章标签： java 开发语言

本文链接：https://blog.csdn.net/z18172949434/article/details/139608996

版权

操作题

1.使用canvas组件实现


Page({
  onLoad: function (options) {
    const ctx = wx.createCanvasContext('jj');

    // 设置五环颜色
    const colors = ["blue", "black", "red", "yellow","green" ];

    // 绘制蓝色环
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[0]);
    ctx.stroke();

    // 绘制黑色环
    ctx.beginPath();
    ctx.arc(110, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[1]);
    ctx.stroke();

    // 绘制红色环
    ctx.beginPath();
    ctx.arc(170, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[2]);
    ctx.stroke();

    // 绘制黄色环
    ctx.beginPath();
    ctx.arc(80, 90, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[3]);
    ctx.stroke();

    // 绘制绿色环
    ctx.beginPath();
    ctx.arc(140, 90, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[4]);
    ctx.stroke();

    ctx.draw();
  }
})

wxml


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

wxss


canvas{
  margin-left: 200rpx;
  margin-top: 200rpx;
}

效果图

2.使用相印组件，完成 “书单”。

wxml

<view style="font-size: 20px;">   ⬅书单</view>
<view class="xx"><image src="/images/ee.jpg"/></view>
<view class="qq">
    <text>培养商业意识，走出生活、职场和事业的困扰。</text>
</view>
<view class="ww">
  <text>创新者是如何思考问题的？本书单包括了互联网、思维方式、商业、文案、市场、营销等方方面面，是在思维方式上的创新，略去传统商学院的教条</text>
</view>
<view class="ee"><image src="/images/ff.jpg"/>
<view class="ll">
<text class="tt">学有所成</text>
<text class="yy">  花花</text>
<text class="uu">少壮不努力，老大徒伤悲话就撒手后续手续问卷问卷设计文件是是五十千卡几块钱就开枪</text>
</view>
</view>
<view class="rr"><image src="/images/ww.jpg"/>
<view class="ll">
<text class="tt">     豪华型</text>
<text class="yy">   莎莎</text>
<text class="uu">和hi卡剪卡开始加快完善力挽狂澜文科理科三年级你今晚捐款五十开外忙完了什么名为闲来无事，了</text>
</view>
</view>

wxss

.hh{
  width: 100%;
  height: 170px;
}
.hh image{
  width: 100%;
  height: 160px;
}
.io{
 text-align: center;
  position: absolute;
  top:38px;
  color:black;
  font-size: 26px;
}
.ww{
  left:22px;
  position: absolute;
  top:120px;
  color:red;
  font-size: 13px;
}
.ti{
  width: 100%;
  height: 180px;
}
.ti image{
  width: 50%;
  height: 150px;
  float: left;
}
.rr{
  width: 100%;
  height: 180px;
}
.rr image{
  width: 50%;
  height: 150px;
  float: left;
}
.ll{
  width: 50%;
  height: 180;
  float: right;
}
.tt{
font-size: 20px;
margin-left: 20px;
}
.yy{
font-size: 12px;
margin-left: 45px;
}
.uu{
font-size: 10px;
margin-left:70px;
}

3.使用相应组件，完成 “西安找拼车”。

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

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>

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

二.编程题

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

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

Page({
    data: {
        motto: a.randomMotto(),
        endMonth: a.formatTime(new Date()),
        birthday: wx.getStorageSync("__birth") || "",
        history: wx.getStorageSync("__history") || function() {
            var t = [], a = [], e = wx.getStorageSync("__birth");
            return e && (a = e.split(" "), t.push(a[0] + "-" + a[2])), t;
        }() || [],
        activeIndex: wx.getStorageSync("__activeIndex") || 0,
        pastMonth: wx.getStorageSync("__pastMonth") || 1,
        remaining: a.fixedDecimal("" === wx.getStorageSync("__remaining") ? 100 : 1 * wx.getStorageSync("__remaining"), 2),
        langMoreThan: wx.getStorageSync("__langMoreThan") || "",
        doodle: "",
        bgsrc_index: wx.getStorageSync("__bgsrc_index") || "",
        canHideTabBar: t.globalData.canHideTabBar,
        canHideNavigation: t.globalData.canHideNavigation,
        navigationTopValue: t.globalData.statusBarHeight ? "ios" == t.globalData.res.platform ? t.globalData.statusBarHeight + 4 : t.globalData.statusBarHeight + 8 : 0,
        isiPhoneX: t.globalData.isiPhoneX,
        platform: t.globalData.res.platform,
        adAppid: "",
        adPagePath: ""
    },
    calProgress: function(t, e, i) {
        var n = t.split("-"), o = this.data.endMonth.split("-"), s = n[0] + " 年 " + (n[1] - 0) + " 月", r = this.data.history, g = 12 * (o[0] - n[0]) + (o[1] - n[1]) + 1, c = "";
        r.push(t), (r = a.arrayUnique(r)).length > 5 && r.shift(), e && (i = r.length - 1, 
        this.setData({
            motto: a.randomMotto()
        })), g > 900 && (g = 900, c = "超过");
        var h = a.fixedDecimal(100 - 100 * g / 900, 2);
        this.setData({
            birthday: s,
            history: r,
            pastMonth: g,
            remaining: h,
            langMoreThan: c,
            doodle: n[1] == o[1] ? "../../images/holiday/shengri.png" : ""
        }), wx.setStorageSync("__birth", s), wx.setStorageSync("__history", r), wx.setStorageSync("__pastMonth", g), 
        wx.setStorageSync("__remaining", h), wx.setStorageSync("__langMoreThan", c), "undefined" !== i && (this.setData({
            activeIndex: i
        }), wx.setStorageSync("__activeIndex", i));
    },
    bindDateChange: function(t) {
        this.calProgress(t.detail.value, !0);
    },
    viewHistory: function() {
        var t = this.data.history, e = this.data.activeIndex ? this.data.activeIndex - 1 : t.length - 1, i = a.formatDay();
        t.length && (this.calProgress(t[e], !1, e), this.setData({
            doodle: t[e].split("-")[1] == i.month ? "../../images/holiday/shengri.png" : ""
        }));
    },
    clearHistory: function() {
        var t = this;
        wx.showModal({
            title: "注意",
            content: "即将清除「人生进度」历史记录",
            success: function(a) {
                a.confirm && (t.setData({
                    birthday: "",
                    history: [],
                    activeIndex: 0,
                    pastMonth: 1,
                    remaining: 100,
                    langMoreThan: "",
                    doodle: ""
                }), wx.setStorageSync("__birth", ""), wx.setStorageSync("__history", []), wx.setStorageSync("__pastMonth", 1), 
                wx.setStorageSync("__remaining", 100), wx.setStorageSync("__langMoreThan", ""));
            }
        });
    },
    changeMotto: function() {
        this.setData({
            motto: a.randomMotto()
        });
    },
    clearSavedFile: function() {
        wx.removeSavedFile({
            filePath: this.data.bgsrc_index,
            complete: function(t) {
                console.log(t);
            }
        }), this.setData({
            bgsrc_index: ""
        }), wx.setStorageSync("__bgsrc_index", "");
    },
    choseBackground: function() {
        var t = this;
        wx.showActionSheet({
            itemList: [ "更换背景", "恢复初始样式" ],
            success: function(a) {
                switch (a.tapIndex) {
                  case 0:
                    wx.chooseImage({
                        count: 1,
                        sizeType: [ "compressed" ],
                        sourceType: [ "album" ],
                        success: function(a) {
                            var e = a.tempFilePaths;
                            t.clearSavedFile(), wx.saveFile({
                                tempFilePath: e[0],
                                success: function(a) {
                                    var e = a.savedFilePath;
                                    t.setData({
                                        bgsrc_index: e
                                    }), wx.setStorageSync("__bgsrc_index", e);
                                }
                            });
                        }
                    });
                    break;

                  case 1:
                    t.clearSavedFile();
                }
            },
            fail: function(t) {
                console.log(t.errMsg);
            }
        });
    },
    clickCustomAd: function() {
        var e = t.globalData.res.SDKVersion;
        a.compareVersion(e, "1.3.0") >= 0 && a.compareVersion(e, "2.0.7") <= 0 && wx.navigateToMiniProgram({
            appId: this.data.adAppid,
            path: this.data.adPagePath,
            envVersion: "release"
        });
    },
    onShareAppMessage: function() {
        wx.showShareMenu({
            withShareTicket: !0
        });
        (this.data.birthday || "7777 年 7 月").split(" ")[0];
        return {
            title: "奋斗没有终点，任何时候都是一个起点",
            desc: "",
            path: "pages/index/index",
            imageUrl: "../../images/share.png",
            success: function(t) {}
        };
    },
    onLoad: function() {
        var t = wx.getStorageSync("__history") || [], e = wx.getStorageSync("__activeIndex") || 0, i = a.formatDay(), n = wx.getStorageSync("__visiter") || "new";
        try {
            t.length && (this.calProgress(t[e], !1, e), t[e].split("-")[1] == i.month && this.setData({
                doodle: "../../images/holiday/shengri.png"
            })), "new" == n && (a.showAd(), wx.setStorageSync("__visiter", "old"));
        } catch (t) {}
    }
});

json

{
    "disableScroll": false,
    "usingComponents": {}
}

wxml

<view class="doodle" wx:if="{{!bgsrc_index.length}}">
    <image mode="aspectFit" 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_index}}"></image>
    </view>
</view>
<view class="container{{bgsrc_index?' zoomout':''}}{{isiPhoneX?' ct-iphonex':''}}">
    <view class="header">
        <view class="note">中国现阶段人均寿命 900 个月</view>
        <view class="past">
            <view wx:if="{{birthday}}">{{birthday}}至今{{langMoreThan}} {{pastMonth}} 个月</view>
        </view>
        <view class="settings">
            <picker bindchange="bindDateChange" end="{{endMonth}}" fields="month" mode="date" start="1949-10" value="{{endMonth}}">
                <view class="btn-setting">
                    <view wx:if="{{birthday}}">换一个日期</view>
                    <view wx:else>点此设置出生年月，查看人生进度</view>
                </view>
            </picker>
            <view bindtap="clearHistory" class="btn-del" hoverClass="none" hoverStartTime="0" hoverStayTime="0" wx:if="{{birthday}}">清除记录</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}}%;"></view>
                <view class="remaining-after" style="top: {{100-remaining}}%;"></view>
                <view class="remaining-txt" style="height: {{remaining-3}}%;" 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 class="footer">
        <text bindtap="changeMotto" class="motto">{{motto}}</text>
    </view>
</view>
<block wx:if="{{canHideTabBar}}">
    <import src="../../templates/nav.wxml"></import>
    <view class="{{platform}}{{isiPhoneX?' nav-iphonex':''}}">
        <template is="nav" data="{{pagename:'home'}}"></template>
    </view>
</block>
<navigator appId="{{adAppid}}" bindtap="clickCustomAd" class="ad-index-float{{canHideNavigation?' custom-ad':''}}{{isiPhoneX?' custom-ad-iphonex':''}} {{platform}}" hoverClass="none" openType="navigate" path="{{adPagePath}}" target="miniProgram" version="release" wx:if="{{adAppid}}">
    <image mode="scaleToFill" src="../../images/ad_acadsoc.png"></image>
</navigator>
<ad class="ad{{isiPhoneX?' ad-iphonex':''}}" unitId="adunit-9033ae8aa80f0225"></ad>

wxss

.note {
    margin: 40rpx 0 10rpx;
    color: #666;
    font-size: 120%;
    font-weight: 200;
}

.past {
    margin-bottom: 30rpx;
    font-size: 160%;
    font-weight: 300;
}

.settings {
    flex-direction: row;
}

.main,.settings {
    display: flex;
}

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

.motto {
    display: block;
    min-height: 84rpx;
    line-height: 1.5;
    font-size: 26rpx;
}

.zoomout .btn-del,.zoomout .btn-setting,.zoomout .motto,.zoomout .note {
    color: #333;
}

.ad-index-float {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 80rpx;
    height: 80rpx;
    z-index: 31;
}

.custom-ad.ad-index-float {
    bottom: 94rpx;
}

.custom-ad.custom-ad-iphonex {
    bottom: 124rpx!important;
}

.custom-ad-iphonex {
    bottom: 0!important;
}

.ad-index-float image {
    width: 80rpx;
    height: 80rpx;
}