1. 使用 canvas 组件实现“奥运五环”的绘制。
如下
wxml
<view class="container">
<canvas canvas-id="olympic-rings" style="width: 300px; height: 200px;"></canvas>
</view>
js
Page({
onReady: function () {
const ctx = wx.createCanvasContext('olympic-rings');
ctx.beginPath();
ctx.arc(60, 100, 30, 0, 2 * Math.PI);
ctx.setStrokeStyle('#0074D9');
ctx.setLineWidth(5);
ctx.stroke();
ctx.beginPath();
ctx.arc(110, 100, 30, 0, 2 * Math.PI);
ctx.setStrokeStyle('#FFDC00');
ctx.setLineWidth(5);
ctx.stroke();
ctx.beginPath();
ctx.arc(160, 100, 30, 0, 2 * Math.PI);
ctx.setStrokeStyle('#111111');
ctx.setLineWidth(5);
ctx.stroke();
ctx.beginPath();
ctx.arc(85, 135, 30, 0, 2 * Math.PI);
ctx.setStrokeStyle('#2ECC40');
ctx.setLineWidth(5);
ctx.stroke();
ctx.beginPath();
ctx.arc(135, 135, 30, 0, 2 * Math.PI);
ctx.setStrokeStyle('#FF4136');
ctx.setLineWidth(5);
ctx.stroke();
ctx.draw();
}
})
运行结果如下
2.使用相应组件,完成如图4-29 所示的“书单”页面。
wxml
<view style="font-size: 20px;"> ⬅书单</view>
<view class="xx"><image src="/pages/images/2.jpg"/></view>
<view class="qq">
<text>培养商业意识,走出生活、职场和事业的困扰。</text>
</view>
<view class="ww">
<text>创新者是如何思考问题的?本书单包括了互联网、思维方式、商业、文案、市场、营销等方方面面,是在思维方式上的创新,略去传统商学院的教条</text>
</view>
<view class="ee"><image src="/pages/images/6.jpg"/>
<view class="ll">
<text class="tt">如何让富婆爱你</text>
<text class="yy">不知名作者</text>
<text class="uu">人生就是这样努力的人不一定成功,一旦富婆爱上了你,你就离成功不远了</text>
</view>
</view>
<view class="rr"><image src="/pages/images/7.jpg"/>
<view class="ll">
<text class="tt"> 滑稽学</text>
<text class="yy"> 滑小稽</text>
<text class="uu">沉迷滑稽,无法自拔,茶饭不思,日渐消瘦。懂事的人已经在看滑稽学了</text>
</view>
</view>
wxss
.xx{
width: 100%;
height: 170px;
}
.xx image{
width: 100%;
height: 160px;
}
.qq{
text-align: center;
position: absolute;
top:38px;
color:black;
font-size: 26px;
}
.ww{
left:22px;
position: absolute;
top:120px;
color:red;
font-size: 13px;
}
.ee{
width: 100%;
height: 180px;
}
.ee 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.使用相应组件,完成如图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
<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;
}
js
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) {}
}
});
运行结果如下