第一题:使用canvas组件实现“奥运五圆”的绘制
js代码:
Page({
onLoad:function(options){
var ctx =wx.createCanvasContext('huan')
ctx.arc(70,60,40,0,2*Math.PI)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw(true)
ctx.arc(70,60,32,0,2*Math.PI)
ctx.setFillStyle('white')
ctx.fill()
ctx.draw(true)
ctx.arc(160,60,40,0,2*Math.PI)
ctx.setFillStyle('orange')
ctx.fill()
ctx.draw(true)
ctx.arc(160,60,32,0,2*Math.PI)
ctx.setFillStyle('white')
ctx.fill()
ctx.draw(true)
ctx.draw(true)
ctx.arc(250,60,40,0,2*Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
ctx.draw(true)
ctx.arc(250,60,32,0,2*Math.PI)
ctx.setFillStyle('white')
ctx.fill()
ctx.draw(true)
ctx.arc(115,110,40,0,2*Math.PI)
ctx.setFillStyle('yellow')
ctx.fill()
ctx.draw(true)
ctx.arc(115,110,32,0,2*Math.PI)
ctx.setFillStyle('white')
ctx.fill()
ctx.draw(true)
ctx.arc(205,110,40,0,2*Math.PI)
ctx.setFillStyle('green')
ctx.fill()
ctx.draw(true)
ctx.arc(205,110,32,0,2*Math.PI)
ctx.setFillStyle('white')
ctx.fill()
ctx.draw(true)
}
})
运行效果:
第二题:使用相应组件,完成书单页面
wxml代码:
<view class="a1">
<image src="../image/wp.png"class="image1"> </image>
<text class="text1">培养思维知识,走出生活、职场困境</text>
<text class="text2">创新者是如何思考问题的?本书单包括了互联网,思维方式。
</text>
</view>
<view>
<view class="a2">
<image src="../image/wa.png" class="image2"></image>
<text class="text3">老人与海</text>
<text class="text4">海明威</text>
<text class="text5">是现代美国小说作家海明威创作于
1952年的一
部中篇小说,也是作者生前发表的最后一部小说。
作为他最著名的作品之一,
它围绕一位老年古巴渔夫展开,
讲述他与一条巨大的马林鱼在离岸
很远的湾流中搏斗的历程。</text>
</view>
<view class="a3">
<image src="../image/wb.png" class="image3"></image>
<text class="text6">骆驼祥子</text>
<text class="text7">老舍</text>
<text class="text8">描写了20年代,老北京的一个人力
车夫的辛酸故事。此小说大量应用北京口语、
方言,还有一些老北京的风土人情的描写,
是现代白话文小说的经典作品。</text>
</view>
</view>
wxss代码:
.a1{
position: relative;
width: 100%;
height: 200px;
}
.image1{
width: 100%;
height: 100%;
}
.text1{
position: absolute;
top: 50px;
left: 35px;
color: #fff;
font-weight: bold;
font-size: 24px;
}
.text2{
position: absolute;
top: 90px;
left: 60px;
color:black;
font-size: 15px;
width: 250px;
text-align: center;
}
.a2{
position: relative;
width: 100%;
height: 150px;
}
.image2{
width: 100px;
height: 150px;
position: absolute;
left: 20px;
top: 20px;
}
.text3{
position: absolute;
left: 140px;
top: 25px;
font-size: 18px;
font-weight: bold;
}
.text4{
position: absolute;
left: 140px;
top: 60px;
font-size: 12px;
font-weight: bold;
}
.text5{
position: absolute;
left: 140px;
top: 85px;
font-size: 12px;
}
.a3{
position: relative;
width: 100%;
height: 150px;
}
.image3{
width: 100px;
height: 150px;
position: absolute;
left: 20px;
top: 40px;
}
.text6{
position: absolute;
left: 140px;
top: 65px;
font-size: 18px;
font-weight: bold;
}
.text7{
position: absolute;
left: 140px;
top: 100px;
font-size: 12px;
font-weight: bold;
}
.text8{
position: absolute;
left: 140px;
top: 125px;
font-size: 12px;
}
运行效果:
第三题:使用相应组件,完成“西安找拼车”小程序页面
wxml代码:
<input placeholder=" 联系方式(手机和微信至少填一项)" class="a"/>
<view style="display: flex;" class="ab1">
<view class="b">称呼*</view>
<input placeholder="请输入称呼" class="sch"/>
</view>
<view style="display: flex;" class="ab1">
<view class="b">手机号</view>
<input placeholder="请输入手机号" class="sch"/>
</view>
<view style="display: flex;" class="ab1">
<view class="b">微信号</view>
<input placeholder="请输入微信号" class="sch"/>
</view>
<input placeholder=" 评车信息" class="a"/>
<view style="display: flex;" class="box1">
<view class="b">出发地点*</view>
<input placeholder="限7个字" class="sch"/>
</view>
<view style="display: flex;" class="ab1">
<view class="b">目的地*</view>
<input placeholder="限7个字" class="sch"/>
</view>
<view style="display: flex;" class="ab1">
<view class="b">空座数*</view>
<input placeholder="请输入空座数" class="sch"/>
</view>
wxss代码:
.a{
border: 1px solid #000;
height: 40px;
background-color: darkgrey;
}
.ab1{
height: 40px;
position: relative;
}
.b{
height: 40px;
line-height: 40px;
width: 120px;
position: relative;
left: 10px;
border-bottom: 1px solid #000;
font-size: 18px;
}
.sch{
height: 40px;
line-height: 40px;
width: 300px;
position: relative;
left: 10px;
border-bottom: 1px solid #000;
}
运行截图: