第一题实现canvas画图
运行效果如下
实现步骤如下所示
先在.wxml中写下如下代码
<view class="whole">
<view class="hg">
<canvas canvas-id="myCanvas" class="hgh"></canvas>
</view>
<view class="hg2">
<canvas canvas-id="mywh" class="hgk"></canvas>
</view>
<view class="hg3">
<canvas canvas-id="myhs" class="hgd"></canvas>
</view>
<view class="hg4">
<canvas canvas-id="myys" class="hgs"></canvas>
</view>
<view class="hg5">
<canvas canvas-id="myls" class="hgq"></canvas>
</view>
</view>
在.js中代码如下
Page({
onReady: function () {
const ctx = wx.createCanvasContext('myCanvas');
const centerX = 100; // 圆心x坐标
const centerY = 100; // 圆心y坐标
const radius = 45; // 圆的半径
const lineWidth = 2; // 线条宽度
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); // 绘制圆形路径
ctx.setLineWidth(lineWidth); // 设置线条宽度
ctx.setStrokeStyle('red'); // 设置线条颜色
ctx.stroke(); // 绘制空心圆形
ctx.draw(); // 将绘制内容显示到Canvas上
const ctx2 = wx.createCanvasContext('mywh');
const X = 100; // 圆心x坐标
const Y = 100; // 圆心y坐标
const r = 45; // 圆的半径
const l = 2; // 线条宽度
ctx2.beginPath();
ctx2.arc(X, Y, r, 0, 2 * Math.PI); // 绘制圆形路径
ctx2.setLineWidth(l); // 设置线条宽度
ctx2.setStrokeStyle('#22B14C'); // 设置线条颜色
ctx2.stroke(); // 绘制空心圆形
ctx2.draw(); // 将绘制内容显示到Canvas上
const ctx3 = wx.createCanvasContext('myhs');
const X1 = 100; // 圆心x坐标
const Y1 = 100; // 圆心y坐标
const r1 = 45; // 圆的半径
const l1 = 2; // 线条宽度
ctx3.beginPath();
ctx3.arc(X1, Y1, r1, 0, 2 * Math.PI); // 绘制圆形路径
ctx3.setLineWidth(l1); // 设置线条宽度
ctx3.setStrokeStyle('#000000'); // 设置线条颜色
ctx3.stroke(); // 绘制空心圆形
ctx3.draw(); // 将绘制内容显示到Canvas上
const ctx4 = wx.createCanvasContext('myys');
const X2 = 100; // 圆心x坐标
const Y2 = 100; // 圆心y坐标
const r2 = 45; // 圆的半径
const l2 = 2; // 线条宽度
ctx4.beginPath();
ctx4.arc(X2, Y2, r2, 0, 2 * Math.PI); // 绘制圆形路径
ctx4.setLineWidth(l2); // 设置线条宽度
ctx4.setStrokeStyle('#FFF200'); // 设置线条颜色
ctx4.stroke(); // 绘制空心圆形
ctx4.draw(); // 将绘制内容显示到Canvas上
const ctx5 = wx.createCanvasContext('myls');
const X3 = 100; // 圆心x坐标
const Y3 = 100; // 圆心y坐标
const r3 = 45; // 圆的半径
const l3 = 2; // 线条宽度
ctx5.beginPath();
ctx5.arc(X3, Y3, r3, 0, 2 * Math.PI); // 绘制圆形路径
ctx5.setLineWidth(l3); // 设置线条宽度
ctx5.setStrokeStyle('#1422FF'); // 设置线条颜色
ctx5.stroke(); // 绘制空心圆形
ctx5.draw(); // 将绘制内容显示到Canvas上
}
})
在.wxss中代码:
.whole{
position:absolute;
}
.hgh{
position: relative;
top:30px;
left: -30px;
}
.hgk{
position: relative;
top:-50px;
left: 10px;
}
.hgd{
position: relative;
top:-260px;
left: 40px;
}
.hgs{
position: relative;
top:-350px;
left: 70px;
}
.hgq{
position: relative;
top:-560px;
left: 80px;
}
在.json中代码如下:
{
"navigationBarTitleText": "五个圆圈",
"usingComponents": {
}
}
第二题书单
实现书单效果如下
在img中目录如下
在.wxml中代码如下
<view>
<view>
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<swiper-item>
<image src="/img/bjz.png" style="width: 100%;height: 150px;"></image>
</swiper-item>
<swiper-item>
<image src="/img/ja.webp" style="width: 100%;height: 150px;"></image>
</swiper-item>
<swiper-item>
<image src="/img/zhxs2.jpg" style="width: 100%;height: 150px;"></image>
</swiper-item>
</swiper>
</view>
<view style="border-bottom: 3px solid black;" class="ja">
<image src="/img/ja.webp" style="height: 170px;width: 170px;"/>
<view style="width: 140px;" class="jas">
<view style="font-weight: bolder;">简爱</view>
<view style="font-weight: bold;">夏洛蒂·勃朗特</view>
<view style="font-size: 13px;">该小说讲述孤女简·爱自幼父母双亡,寄养于舅母家,备受虐待,后被舅母打发到洛伍德义塾(洛伍德学校)去......</view>
</view>
</view>
<view class="zt">
<image src="/img/zhxs2.jpg" style="height: 170px;width: 170px;"/>
<view style="width: 140px;" class="zhxs">
<view style="font-weight: bolder;">朝花夕拾 </view>
<view style="font-weight: bold;">鲁迅</view>
<view style="font-size: 13px;">
此文集作为“回忆的记事”,多侧面地反映了作者鲁迅青少年时期的生活,形象地反映了他的性格和志趣的形成经过......</view>
</view>
</view>
</view>
在.json中代码如下
{
"navigationBarTitleText": "书单",
"usingComponents": {
}
}
在.wxss中代码如下
.ja ,.zt{
clear:right;
height: 170px;
}
.jas,.zhxs{
float:right;
font-size: 20px;
width: 100px;
}
第三西安找拼车(input)
实现效果如下:
在.wxml中代码如下:
<view style="background-color: wheat;height:700px;">
<view >
<view style="border-bottom: 1px solid black;">联系方式(手机和微信至少填一项)</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
<view>称呼*</view>
<input model:value="{{inputValue}}" />
</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
<view>手机号</view>
<input model:value="{{inputnumber}}" />
</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
<view style="font-size: 17px;">微信号 </view>
<input value=" 请输入微信号" style="font-size: 16px;" />
</view>
</view>
<view >
<view style="border-bottom: 1px solid black;">拼车信息</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
<view>出发地点*</view>
<input value=" 限7个字" />
</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
<view>目的地*</view>
<input value=" 限7个字" />
</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
<view>空座数*</view>
<input value=" 请输入空座数" />
</view>
</view>
</view>
在.js中代码如下
Page({
data: {
inputValue: " 请输入称呼", // 输入框
inputnumber:" 请输入手机号"
}
});
在.json中代码如下
{
"navigationBarTitleText": "西安找拼车",
"usingComponents": {
}
}
第四题生长进度条
“人生进程”是一款极简的小程序,它只有一个功能:就是计算一个人从出生到现在已经度过了多少个月,如图4-31所示。请编写程序完成此功能。
在主项目中加入图片
在app.json中代码如下
{
"pages": [
"pages/index/index",
"pages/nh/nh",
"pages/wy/wy",
"pages/qu/qu"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#666666",
"selectedColor": "#ff0000",
"borderStyle":"black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "/img/ps2.png",
"selectedIconPath": "/img/ps2.png",
"text": "首页"
},
{
"pagePath":"pages/nh/nh",
"iconPath": "/img/ps2.png",
"selectedIconPath": "/img/ps2.png",
"text": "年月日"
},
{
"pagePath": "pages/wy/wy",
"iconPath": "/img/ps2.png",
"selectedIconPath":"/img/ps2.png",
"text": "静思"
},
{
"pagePath": "pages/qu/qu",
"iconPath":"/img/ps2.png",
"selectedIconPath": "/img/ps2.png",
"text": "关于"
}]
},
"style": "v2",
"componentFramework": "glass-easel",
"lazyCodeLoading": "requiredComponents"
}
在index中
代码如下
<view style="text-align: center;">中国现阶段人均寿命900个月</view>
<view style="text-align: center;" > 2005年8月至今155个月</view>
<view style="display: flex;position: relative;">
<view style="border:1px solid black;position: absolute;top: 30px;left: 50px;">换一个日期</view>
<view style="border:1px solid black;position: absolute;top:30px;left: 160px;">清除记录</view>
</view>
<view style="position: relative;">
<image style="position:absolute;top:70px;" src="/img/bjz.png"/>
<view style="position: absolute;top:340px;font-size: 18px;left:10px;">能把后面前行行走的机会抓住的人,十有八九都会成功</view>
</view>
在nh.wxml中如下:
<view style="text-align: center;">中国现阶段人均寿命900个月</view>
<form bindsubmit="bind" style="line-height: 60px;">
<view style="display: flex; font-size: 20px;">
<input type="text" name="time" placeholder="请输入时间" class="sj"/>至今:{{people}}个月</view>
<view style="display: flex;">
<button formType="submit" class="bt">请输入后再点击此按钮</button>
<button formType="reset" style="width: 160px;font-size: 15px;">清除记录</button>
</view>
</form>
<view style="margin-top:50px;">
<image src="" class="rp" style="width: 250px;" />
</view>
<view style="width: 350px;">
<text bindtap="changetext1">{{ text1 }}</text>
</view>
在nh.js中代码如下
Page({
data:{
text1: '点击',
people:new Date().toLocaleDateString()
},
changeText1: function() {
this.setData({
text1: '能把在前面行走的机会抓住的人,十有八九都会成功。'
});
},
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
})
}
})
在.wxss中代码如下
.sj{
width: 110px;
padding-top: 18px;
padding-left: 30px;
}
.bt{
padding-right: 20px;
width: 175px;
font-size: 13px;
font-weight: bold;
}
.rp{
width: 190px;
height: 350px;
margin-left: 80px;
}
运行效果如下: