1.使用canvas组件实现五个圆圈的绘制
代码如下:
Page({
onLoad: function (options) {
const YS = wx.createCanvasContext('circle');
// 设置五环颜色
const colors = ["yellow", "black", "red", "darkviolet","blue" ];
// 绘制黄色环
YS.beginPath();
YS.arc(50, 50, 40, 0, 2 * Math.PI);
YS.setStrokeStyle(colors[0]);
YS.stroke();
// 绘制黑色环
YS.beginPath();
YS.arc(110, 50, 40, 0, 2 * Math.PI);
YS.setStrokeStyle(colors[1]);
YS.stroke();
// 绘制红色环
YS.beginPath();
YS.arc(170, 50, 40, 0, 2 * Math.PI);
YS.setStrokeStyle(colors[2]);
YS.stroke();
// 绘制紫色环
YS.beginPath();
YS.arc(80, 90, 40, 0, 2 * Math.PI);
YS.setStrokeStyle(colors[3]);
YS.stroke();
// 绘制蓝色环
YS.beginPath();
YS.arc(140, 90, 40, 0, 2 * Math.PI);
YS.setStrokeStyle(colors[4]);
YS.stroke();
YS.draw();
}
})
<!-- wxml文件 -->
<canvas canvas-id="circle"></canvas>
2、 使用相应组件,完成“书单”页面
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"/>
<view class="head">← 书单</view>
<view class="box1">
<view class="text">培养商业意识,走出生活,职场和事业的困境</view>
<view class="text1">创新者是如何思考问题的?本书单包括了互联网,思维方式,商业,文案,市场,营销等方方面面,是在思维方式上的创新,略去传统商学院的教条</view>
</view>
<view class="box2">
<view class="imgone" style="display: flex;">
<image class="img1" src="/pages/index/img/R-C.jpg"/>
<view class="textone">
<view class="text2">金字塔原理</view>
<view class="text3">芭芭拉•明托
(Barbara Minto)</view>
<view class="text4">金字塔原理是一种重点突出、逻辑清晰、主次分明的逻辑思路、表达方式和规范动作……</view>
</view>
</view>
<view class="xian"></view>
<view class="box3" style="display: flex;">
<image class="img1" src="/pages/index/img/OIP-C.jpg"/>
<view class="textone">
<view class="text2">基业长青</view>
<view class="text3">[美]吉姆•柯林斯,杰里•波勒斯</view>
<view class="text4">《基业长青(珍藏版)》打破了旧有神话,提供了新颖的见解,并为那些有志于建立经得……</view>
</view>
</view>
</view>
/* pages/shudan/index.wxss */
.head{
font-weight: bold;
font-size: 25px;
}
.box1{
background-color: #000;
color:#fff;
}
.text{
margin: auto;
width: 85%;
text-align: center;
font-size: 23px;
padding-top: 10px;
padding-bottom: 20px;
}
.text1{
font-size: 14px;
padding:0px 10px 10px 10px ;
line-height: 20px;
}
.text2{
font-weight: bolder;
font-size: 35px;
}
.text3{
font-size: 20px;
font-weight: 550;
}
.box2{
margin: auto;
width: 85%;
}
.xian{
margin: 20px 0;
border: rgb(179, 172, 172) 2px solid;
}
.textone{
width: 380px;
height: 100%;
margin: 20px;
}
.img1{
padding-top: 10px;
width: 250px;
height: 150px;
}
3、使用相应组件完成西安找拼车的小程序部分页面
wxss
.tou {
font-size: 70rpx;
line-height: 70px;
color: #ffffff;
background-color: black;
}
.one {
padding: 45rpx 0 0 40rpx;
border-bottom: 4px solid #c0c0c0;
border-top: 4px solid #c0c0c0;
background-color: #ccc;
}
.txw {
width: auto;
height: 100rpx;
font-size: 35rpx;
}
.two1 {
margin: auto;
width: 85%;
height: 100%;
padding: 20px 0 20px 0;
}
.two2 {
font-size: 55rpx;
float: left;
font-weight: bold;
}
.two3 {
flex: 1;
/* 使空间平局分配 */
padding-left: 150px;
font-size: 55rpx;
}
.box2 {
margin: auto;
width: 85%;
height: 100%;
padding: 20px 0 20px 0;
border-bottom: 4px solid #c0c0c0;
}
wxml
<view class="tou">✕ 西安找拼车</view>
<!-- 联系方式 -->
<view class="one">
<view class="txw">联系方式(手机和微信至少填一项)</view>
</view>
<view class="box2">
<view class="two2">称呼*</view>
<view class="two3">请输入称呼</view>
</view>
<view class="box2">
<view class="two2">手机号</view>
<view class="two3">请输入手机号</view>
</view>
<view class="two1">
<view class="two2">微信号</view>
<view class="two3">请输入微信号</view>
</view>
<!-- 拼车信息 -->
<view class="one">
<view class="txw">拼车信息</view>
</view>
<view class="box2">
<view class="two2">出发地点*</view>
<view class="two3">限7个字</view>
</view>
<view class="box2">
<view class="two2">目的地*</view>
<view class="two3">限7个字</view>
</view>
<view class="box2">
<view class="two2">空座数*</view>
<view class="two3">请输入空座数</view>
</view>
4。人生进程"是一款极简的小程序,他只有一个功能:就是计算一个人出生到现在已经度过了多少个月,请使用编程写程序完成此功能
// JS代码
const date=new Date()
const years=[]
const months=[]
//定义年份
for(let i=1900;i<=2050;i++){
years.push(i)
}
//定义月份
for(let i=1;i<=12;i++){
months.push(i)
}
Page({
data:{
years:years,
months:months,
year:date.getFullYear(),
month:date.getMonth()+1,
yue:date.getMonth()+1+((2024-2002)*12),
value:[102,1],//初始化年月日
},
bindChange:function(e){
const val=e.detail.value
console.log(val);
this.setData({
year:this.data.years[val[0]],
month:this.data.months[val[1]]
})
}
})
<view class="one">中国现阶段人均寿命900个月</view>
<view class="two">{{year}}年{{month}}月至今{{yue}}个月</view>
<view class="button">
<button class="but">换一个日期</button>
<button>清除记录</button>
</view>
<picker-view
indicator-style="height:50px;"
style="width:100%;height:300px;"
value="{{value}}"
bindchange="bindChange">
<picker-view-column>
<view
wx:for="{{years}}"
style="line-height:50px;">
{{item}}年
</view>
</picker-view-column>
<picker-view-column>
<view
wx:for="{{months}}"
style="line-height:50px">
{{item}}月
</view>
</picker-view-column>
</picker-view>
<view class="three">能把在面前行走的机会抓住的人,十有八九都会成功。</view>
wsxx
.one{
font-size: 20px;
margin-top: 90px;
text-align: center;
}
.two{
font-size: 35px;
text-align: center;
}
.button{
padding: 20px 0 20px 0;
}
.but{
float: left;
left: 29rpx;
}
.three{
font-size: 28px;
margin-top: 50px;
text-align: center;
}