目录
一、使用canvas组件实现"五圈"的绘制。
代码如下：
//index.wxml
<view class="contain">
<canvas canvas-id="xl" style="width: 288px;height: 200px;"></canvas>
</view>
//index.js
Page({
onReady:function(){
const ctx=wx.createCanvasContext('xl');
ctx.beginPath();
ctx.arc(80,80,40,0,2*Math.PI);
ctx.moveTo(80,80)
ctx.lineWidth=3;
ctx.strokeStyle='#0099FF'
ctx.stroke();
ctx.beginPath();
ctx.arc(140,80,40,0,2*Math.PI);
ctx.moveTo(140,80)
ctx.lineWidth=4;
ctx.strokeStyle='#000000'
ctx.stroke();
ctx.beginPath();
ctx.arc(200,80,40,0,2*Math.PI);
ctx.moveTo(200,80)
ctx.lineWidth=4;
ctx.strokeStyle='#FF0000'
ctx.stroke();
ctx.beginPath();
ctx.arc(110,120,40,0,2*Math.PI);
ctx.moveTo(110,120)
ctx.lineWidth=4;
ctx.strokeStyle='#FFCC00'
ctx.stroke();
ctx.beginPath();
ctx.arc(170,120,40,0,2*Math.PI);
ctx.moveTo(170,120)
ctx.lineWidth=4;
ctx.strokeStyle='#00CC00'
ctx.stroke();
ctx.draw();
}
})
效果图如下：
二、使用相应组件，完成"书单"页面。
代码如下：
//index.wxml
<view class="container">← 书单</view>
<view>
<image src="../../image/aa.png" mode="" class="app"></image>
</view>
<view>
<image src="../../image/bb.png" mode="" class="app1"></image>
<view style="border-bottom: 1px solid black;width: 350px;margin-top: 20px;margin-left: 30px;"></view>
<view class="app2">金字塔原理</view>
<view class="app3">芭芭拉•明托(Barbara Minto)</view>
<view class="app4">金字塔原理是一种重点突出、逻辑清晰、主次分明的逻辑思路、表达方式和规范动作......</view>
</view>
<view class="hr">
<image src="../../image/cc.png" mode="" class="text"></image>
<view class="text1">基业长青</view>
<view class="text2">[美]吉姆•柯林斯，杰里•波勒斯</view>
<view class="text3">《基业长青(珍藏版)》打破了旧有神话，提供了新颖的见解，并为那些有志于建立经得......</view>
</view>
//index.wxss
.container{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.app{
width: 100%;
height: 200px;
}
.app1{
margin-top: 20px;
margin-left: 20px;
width: 90px;
height: 120px;
}
.app2,.app3,.app4{
padding-right: 20px;
width: 288px;
position: relative;
left: 120px;
bottom: 120px;
}
.app2{
font-weight: bolder;
font-size: 16px;
}
.app3{
margin-top: 5px;
}
.app4{
margin-top: 5px;
font-size: 14px;
font-weight: lighter;
}
.hr{
position:absolute;
top: 420px;
}
.text{
margin-top: 20px;
margin-left: 20px;
width: 90px;
height: 120px;
}
.text1,.text2,.text3{
width: 288px;
position: relative;
left: 120px;
bottom: 120px;
}
.text1{
font-weight: bolder;
font-size: 16px;
}
.text2{
margin-top: 5px;
}
.text3{
margin-top: 5px;
font-size: 14px;
font-weight: lighter;
}
效果图如下:
三、使用相应组件，完成如下小程序部分界面。
代码如下:
//index.wxml
<view class="banner">联系方式（手机和微信至少填一项）</view>
<view class="banner1">
<view class="ling2"><text>称呼*</text><input placeholder="请输入称呼" class="ling02"/></view>
<view class="ling1"><text>手机号</text><input placeholder="请输入手机号" class="ling01"/></view>
<view class="ling3"><text>微信号</text><input placeholder="请输入微信号" class="ling01"/></view>
</view>
<view class="banner">拼车信息</view>
<view class="banner2">
<view class="ling2"><text>出发地点*</text><input placeholder="限7个字" class="ling04"/></view>
<view class="ling1"><text>目的地*</text><input placeholder="限7个字" class="ling01"/></view>
<view class="ling3"><text>空座数*</text><input placeholder="请输入空座数" class="ling01"/></view>
</view>
//index.wxss
.banner{
padding: 10px;
background-color: darkgrey;
}
.banner1{
margin-top: 20px;
}
.ling1,.ling2,.ling3{
display: flex;
flex-direction: row;
margin-top: 30px;
margin-left: 20px;
}
.ling1,.ling3{
padding-left: 20px;
}
.ling2{
padding-left: 20px;
}
.ling02{
padding-left: 55px;
}
.ling01{
padding-left: 45px;
}
.ling1,.ling2{
border-bottom: 1px solid #ccc;
}
.ling04{
padding-left: 30px;
}
效果图如下：
四、编程题。
"人生进程"是一款极简的小程序，它只有一个功能:就是计算一个人从出生到现在已经度过了多少个月，请编写程序完成此功能。
代码如下:
//index.wxml
<view class="word">中国现阶段人均寿命900个月</view>
<form bindsubmit="bind">
<view style="display: flex;font-size: 20px;" >
<input type="text" name="time" placeholder="请输入日期" class="word1" />至今{{people}}个月
</view>
<view class="word2">
<button formType="submit">换一个日期</button>
<button formType="reset">清除记录</button>
</view>
</form>
<view class="complex">
<view data-charge="0" class="battery1"></view>
</view>
<view class="po">82.78%</view>
<view class="word3">能把在面前行走的机会抓住的人，十有八九都会成功。</view>
//index.js
Page({
data:{
people:new Date().toLocaleDateString()
},
bind:function(e){
var time = new Date().toLocaleDateString()
var year = time.substring(0,time.indexOf("/"))
var mo = time.substring(time.indexOf("/")+1,time.lastIndexOf("/"))
var value = e.detail.value.time
var year2 = value.substring(0,time.indexOf("/"))
var mo2 = value.substring(time.indexOf("/")+1,time.lastIndexOf("/"))
var m1 = (year - year2 -1)*12+12-(mo2-mo)
this.setData({
people : m1
})
}
})
//index.wxss
.word{
font-weight:500;
text-align: center;
line-height: 40px;
}
.word1{
width: 110px;
padding: 2px 0 0 30px;
}
.word2{
display: flex;
flex-direction: row;
margin-top: 20px;
}
.battery1{
color: #34495e;
border: 1px solid currentColor;
display: inline-block;
width:200px;
height: 100px;
position: relative;
top: 50px;
left: 40px;
border-radius: 2px;
display: border-box;
margin: 30px;
transform: rotate(-90deg);
}
.battery1::before,.battery1::after{
content: "";
position: absolute;
top: 200px;
}
.battery1::before{
top: 2px;
bottom: 2px;
right: -3px;
width: 1px;
display: border-box;
border: 1px solid currentColor;
border-left: 0;
}
.battery1::after{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 1px;
border-radius: 1px;
background-color: currentColor;
transition: right 500ms;
}
.battery1.low::after{
right: 80%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.battery.med{
color: #f39c12;
}
.battery1.med::after{
right: 40%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.battery1.full{
color: #27ae60;
}
.battery1[data-charge='0']{
color: #27ae60;
}
.battery1[data-charge='0']::after{
right: 17.22%;
}
.word3{
margin: 80px 20px;
}
.po{
position: absolute;
top: 250px;
left: 148px;
color: #fff;
}
效果图如下:
