第四章作业

最新推荐文章于 2024-07-24 10:40:52 发布

库卡哇啊

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量288

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2201_75575971/article/details/137200679

版权

操作题

1．使用canvas组件实现绘制。

代码展示：

index.wxml:

<canvas class="li" canvas-id="hua" style="width: 300px; height: 300px;"  >
</canvas>

index.js:

Page({
  onReady:function(){
    var li = wx.createCanvasContext('hua');
    li.beginPath();
    li.arc(50, 140, 50,0, 2 * Math.PI);
    li.setStrokeStyle('blue');
    li.setLineWidth(1);
    li.stroke();
    li.beginPath();
    li.arc(100, 140, 50, 2 * Math.PI);
    li.setStrokeStyle('black');
    li.stroke();
    li.beginPath();
    li.arc(150, 140, 50, 2 * Math.PI);
    li.setStrokeStyle('red');
    li.stroke();
    li.beginPath();
    li.arc(60, 200, 50, 2 * Math.PI);
    li.setStrokeStyle('yellow');
    li.stroke();
    li.beginPath();
    li.arc(120, 200, 50, 2 * Math.PI);
    li.setStrokeStyle('green');
    li.stroke();
    li.draw();
  }
})

运行结果展示：

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

代码展示：

index.wxxml:

<view class="da">
<image class="img" src="../img/OIP-C.jpg" mode="aspectFill"></image>
<view class="p0">
<h3 style="font-size: 60rpx">培养商业意识，走出生活，职场和事业的困境</h3>
<view style="font-size: 35rpx">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条</view>
</view>
</view>

  <view class="imgone">
   <image class="img1" src="/pages/img/OIP-C (2).jpg"/>
      <view style="font-size: 60rpx">活着</view>
      <view style="font-size: 40rpx">余华</view>
      <view style="font-size: 30rpx">《活着》是中国当代作家余华创作的长篇虚构小说，首次发表于《收获》1992年第6期。
《活着》讲述了在大时代背景下，随着内战、三反五反、大跃进、“文化大革命”</view>
  </view>
  <view class="daw">  
    <image class="img2" src="/pages/img/OIP-C (1).jpg"/>
      <view style="font-size: 60rpx">平凡的世界</view>
      <view style="font-size: 40rpx">路遥</view>
      <view style="font-size: 30rpx">《平凡的世界》是中国作家路遥创作的一部全景式地表现中国当代城乡社会生活的百万字长篇小说。全书共三部。1986年12月首次出版。</view>
    </view>

index.wxss:

.da{
  width: 100%;
  height: 20px;
  position: relative;
}
.img{
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.p0{
  position: absolute;
  top: 0;
  left: 0;
}
.img1{
  width: 250rpx;
  height: 280rpx;
  float: left;
  padding: 10px;
}
.img2{
  width: 250rpx;
  height: 280rpx;
  float: left;
  padding: 10px;
}

.imgone{
  height: 1px;
  width: 100%;
  margin: 200px auto;

}
.daw{
  height: 180px;
  width: 100%;
  padding: 10px auto;
  border-top: 3px solid #000000;
}

运行结果展示：

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

代码展示：

index.wxml:

<view style="background-color: rgb(34, 27, 27);height: 60px;"><view style="color: white;padding-top: 20px;">西安找拼车</view>
</view>
<view style="color:rgb(235, 225, 225);padding-top: 10px;background-color: darkgray;height: 35px;">
联系方式（ 手机号和微信至少填一项）</view>
<view style="border-bottom: 1px solid rgb(199, 194, 194);padding: 0px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 115px;">称呼*</view>
  <view style="font-size: 20px;color: rgb(211, 206, 206);position: absolute;left: 140px;top:115px">请输入称呼</view>
</view>
<view style="border-bottom: 1px solid rgb(211, 208, 208);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 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 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 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 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 style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>

运行结果展示：

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

代码展示：

index.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({
            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) {}
    }
});

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

new.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>

代码运行展示：

库卡哇啊

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第四章作业

编程题：“人生进程”是一款极简的小程序，它只有一个功能：就是计算一个人从出生到现在已经度过了多少个月。3.使用相应组件，完成类似如图4-30所示的“西安找拼车”小程序部分界面。1．使用canvas组件实现绘制。2. 使用相应组件，完成书单页面。
复制链接

扫一扫