第四章作业(微信小程序）

已于 2024-03-31 17:26:38 修改
阅读量114 收藏
点赞数 3
文章标签： 微信小程序
于 2024-03-31 13:15:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_76619477/article/details/137197009
版权

操作题

1.使用canvas组件实现“五圈”的绘制。

代码：

//.wxml
<canvas canvas-id="olympic-rings" style="width: 800px; height: 500px;"></canvas>


//.js
Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('olympic-rings');
 
    // 设置五环颜色
    const colors = ['#6495ed', '#000000', '#9acd32', '#ff0000', '#ffd700'];
 
    // 绘制蓝色环
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[0]);
    ctx.stroke();
 
    // 绘制黑色环
    ctx.beginPath();
    ctx.arc(110, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[1]);
    ctx.stroke();
 
    // 绘制绿色环
    ctx.beginPath();
    ctx.arc(170, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[2]);
    ctx.stroke();
 
    // 绘制红色环
    ctx.beginPath();
    ctx.arc(80, 90, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[3]);
    ctx.stroke();
 
    // 绘制黄色环
    ctx.beginPath();
    ctx.arc(140, 90, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[4]);
    ctx.stroke();
 
    ctx.draw();
  }
});

效果图：

2.使用相应组件，完成“书单”页面。 

代码：

//.wxml
<view class="head">← 书单</view>
<view class="p1">
  <view class="p2">培养商业意识，走出生活，职场和事业的困境</view>
  <view class="p3">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条.</view>
</view>
<view class="shu">
  <view class="imgone" style="display: flex;">
   <image class="img1" src="/images/lbs.jpg"/>
    <view class="textone">
      <view class="text1">鲁滨孙漂流记</view>
      <view class="text2">丹尼尔·笛福</view>
      <view class="text3">该作主要讲述了主人公鲁滨逊·克鲁索（Robinson Crusoe）出生于一个中产阶级家庭，一生志在遨游四海的故事。</view>
    </view>
  </view>
  <view class="xian"></view>
  <view class="imgtwo" style="display: flex;">
    <image class="img2" src="/images/ltxz.jpg"/>
    <view class="texttwo">
      <view class="text1">骆驼祥子</view>
      <view class="text2">老舍</view>
      <view class="text3">以旧北平为背景，描写了一个外号“骆驼”名叫祥子的人力车夫的悲惨遭遇，反映了生活在城市最底层的广大劳动人民的痛苦，暴露了旧社会的罪恶。</view>
    </view>
  </view>
</view>

 
 
 
 
 
//.wxss
.head{
  font-size: 60rpx;
}
.p1{
  background-color: black;
}
.p2{
  color: aliceblue;
  text-align: center;
  font-size: 45rpx;
  padding: 30rpx;
}
.p3{
  color: aliceblue;
  padding: 20rpx;
}
.shu{
  margin: 50rpx;
}
.textone{
  margin-left: 50rpx;
}
.img1{
  width: 700rpx;
  height: 350rpx;
}
.img2{
  width: 700rpx;
  height: 350rpx;
}
.text1{
  font-size: 70rpx;
  font-weight: 700;
}
.text2{
  font-size: 40rpx;
  font-weight: 600;
}
.xian{
  margin-top: 50rpx;
  border-bottom: 4px solid #ccc;
}
.imgtwo{
  margin-top: 50rpx;
}
.texttwo{
  margin-left: 50rpx;
}

 效果图：

3.使用相应组件，完成“西安找拼车”小程序部分页面。 

代码：

//.wxml
<view style="background-color: black;height: 60px;"><view style="color: white;padding-top: 20px;">×西安找拼车</view>
</view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
联系方式（手机号和微信至少填一项）</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 115px;">称呼*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:115px">请输入称呼</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top:150px">手机号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:150px">请输入手机号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 195px;">微信号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:195px">请输入微信号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 23px;"></view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
拼车信息</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;">
</view>
<view>
  <view style="font-size: 20px;position: absolute;top: 290px;">出发地点*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:290px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 340px;">目的地*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:340px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 390px;">空座位*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:390px">请输入空座位</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>

效果图： 

编程题

“人生进程”是一款极简的小程序，它只有一个功能:就是计算一个人从出生到现在已经度过了多少个月，请编写程序完成此功能。

在pages建立四个文件夹：并创建wxml，wxss, js, json文件。

代码如下：

//app.json
{
  "pages": [
    "pages/if/if",
    "pages/mai/mai",
    "pages/qiao/qiao",
    "pages/yi/yi"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/if/if",
      "iconPath": "/images/pkq.png",
      "selectedIconPath": "/images/pkq.png",
      "text": "首页"
    },
    {
      "pagePath": "pages/mai/mai",
      "iconPath": "/images/pkq.png",
      "selectedIconPath": "/images/pkq.png",
      "text": "年月日"
    },
    {
      "pagePath": "pages/qiao/qiao",
      "iconPath": "/images/pkq.png",
      "selectedIconPath": "/images/pkq.png",
      "text": "静思"
    },
    {
      "pagePath": "pages/yi/yi",
      "iconPath": "/images/pkq.png",
      "selectedIconPath": "/images/pkq.png",
      "text": "关于"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}
//if.wxml
<view style="text-align: center;font-size: 16x;position: absolute;left: 120px;">中国阶段人均寿命900个月</view>
<view style="position: absolute;padding-top: 30px;font-size: 26px;left: 70px;">2005年8月至今155个月</view>
<view  style=" border:1px solid black;width: 100px;position: absolute;height: 20px;top: 92px;left: 85px;"></view>
<view style="position: absolute;padding-top: 90px;font-size: 16px;padding-left: 188px;"></view><view style="border: 5px;color: black;position: absolute;left: 240px;top: 92px;">换一个日期</view>
<view  style=" border:1px solid black;width: 100px;position: absolute;height: 20px;top: 92px;left: 230px;"></view>
<view style="position: absolute;padding-top: 90px;font-size: 16px;padding-left: 490px;"><view style="position: absolute;left: 100px;top: 92px;">清除记录</view></view>
<view><image src="/images/xiong5.png" mode="" style="position: absolute;top:140px;left: 85px;height: 370px;width: 250px;"/></view>
<view style="position: absolute;top:540px;font-size: 18px;left:10px;">宝剑锋从磨砺出，梅花香自苦寒来</view>
//if.wxss
 
 .tou{
  float: left;
  margin-top: 8px;
  width: 450px; 
  height: 220px;
}
.tu1{
  margin: 0 auto;
  float: left;
  display: block;
  width: 180px; 
  height: 160px;
}
.yi{
  margin-top: 10px;
}
.ig1{
  margin-top: 5px;
}
.ig2 {
  position: absolute; 
 
}
.ig2 image{
  position: relative;
  top: 274px;
  left: 2px;
}
 
.ig3{
  margin-top: 5px;
  position: absolute;
}
.ig3 image{
  position: relative;
  top: 390px;
}
.yi{
  margin-top: 5px;
  float: right;
}
.er{
  margin-top: 5px;
  float: right;
}
.tu2{
  margin: 0 auto;
  float: left;
  display: block;
  width: 180px; 
  height: 160px;
  margin-top: 60px;
}
.zi1{
  margin: 0 auto;
  display: block;
  font-size: 30px;
  float: none;
  display: block;
  margin-left: 200px;
  margin-top: 10px; 
}
.zi2{
  display: block;
  font-size: 15px;
 float: none;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
}
.zi3{
  display: block;
  font-size: 10px;
  float: right;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
}
//if.js

Page({
 
});
//mai.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="mm"/>至今：{{people}}个月</view>
<view style="display: flex;">
<button formType="submit" class="bt">请输入后再点击此按钮</button>
<button formType="reset" style="width: 150px;font-size: 13px;">清除记录</button>
</view>
</form>
<view style="margin-top:50px;">
<image src="/images/xiong5.jpg" class="r" style="width: 250px;" />
</view>
<view style="width: 350px;">
  <text bindtap="changeText1">{{ text1 }}</text>
</view>
//mai.wxss
.mm{
  width: 110px;
  padding-top: 18px;
  padding-left: 30px;
}
.bt{
  padding-right: 20px;
  width: 175px;
  font-size: 13px;
  font-weight: bold;
}
.r{
  width: 190px;
  height: 350px;
  margin-left: 80px;
 
}
//mai.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
       })
     }
})
//if.json
{
  "navigationBarBackgroundColor": "#87ceeb",
  "navigationBarTitleText": "微信小程序",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}


//qiao,yi,mai.json
{
}

 

效果图：

麦
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序大作业，十个微信小程序项目（一）.rar
06-12
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，提供丰富的API接口和组件，使得开发者可以快速构建交互式的应用。本压缩包包含十个微信小程序项目，是针对初学者的理想学习资源，旨在...
微信小程序demo-留言板（第八章作业）
05-14
在【第八章作业】中，我们可以推测这是一个教学或自学课程的一部分，可能涉及到微信小程序开发的进阶内容。尽管【描述】提到“该demo只有部分功能完成”，但仍然可以从这个不完整的项目中学习到许多关键知识点。 1....
第四章 微信小程序作业
2201_75561769的博客
03-29 354
3.使用相应组件，完成类似如图4-30所示的“西安找拼车”小程序部分界面。
第四章 微信小程序页面组件作业
m0_73490019的博客
03-27 1370
3.使用相应组件，完成类似如图4-30所示的“西安找拼车”小程序部分界面。2．使用相应组件，完成类似如图4-29所示的“书单”页面。1．使用canvas组件实现“奥运五环”的绘制。
第二章 微信小程序基础开发作业
m0_73490019的博客
03-08 1262
本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础。首先，我们用四个编程操作题来巩固第二章所学的知识一.第一题--苏冷教学-->--对应行-->--对应列-->.con {/** 设置字体大小 **//** 设置外边距 **/.inline {
第四章微信小程序作业
weixin_74181678的博客
03-31 319
在.js输入以下代码。
微信小程序学习（第四章作业）
weixin_74181724的博客
03-29 725
【代码】微信小程序学习（第四章作业）
微信小程序第四章作业
2401_83190888的博客
03-31 547
人生进程”是一款极简的小程序，它只有一个功能:就是计算一个人从出生到现在已经度过了多少个月，请编写程序完成此功能。
第三章微信小程序作业
weixin_74181678的博客
03-15 495
步骤一：在index.wxml 下创建以下代码。步骤三：在index.scss下创建以下代码。步骤二：在app.scss下创建以下代码。分析下列代码，实现页面布局。
第二章微信小程序作业
weixin_74181678的博客
03-09 662
乘法口诀表。
第二章 微信小程序（课后作业）
weixin_73443435的博客
03-09 318
【代码】第二章 微信小程序（课后作业）
微信小程序第五章作业
2301_78346059的博客
04-07 245
第二步、将内容设置成输入内容"家禽肉蛋 有机蔬菜 鲜活水产 油粮五谷"。第四步、 点击文本输入文字'——热卖推荐——' 和'— 全部产品 ——'进行字体样式调整。第五步、设置热卖推荐里的图片显示。第一步、设置导航栏样式。第三步、添加需要的图片。第六步、编辑底部栏。
微信小程序诗词答题小程序源码.zip
05-18
2. **毕业设计**、**期末大作业**、**课程设计**：这些标签表明这个项目可能被用作教育用途，如学生在完成学业时的项目实践，可以作为学习微信小程序开发的一个实际案例。 3. **微信小程序**：表示该项目是基于微信...
【微信小程序毕业设计期末大作业】有调-小程序项目源码.zip
05-24
【微信小程序毕业设计期末大作业】有调-小程序项目源码.zip这个压缩包文件包含了一个完整的微信小程序项目，是学生进行毕业设计时可能使用的参考资源。这个项目名为“有调”，可能是一个集成了多种功能的生活服务类...
微信小程序开发(PHP Laravel MySQL)教学大纲.pdf
05-28
《微信小程序开发(PHP Laravel MySQL)教学大纲》是一份详尽的教学计划，旨在教授学生如何使用PHP、Laravel框架和MySQL数据库来开发微信小程序。以下是大纲的主要知识点： 1. **课程性质与任务**： - 作为计算机...
微信小程序 button样式设置为图片的方法
最新发布
goodboxs的博客
07-19 300
background-size与background-repeat与border:none;是button必须的。抖音小程序泛流量变现 ,直播间挂载。
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
weixin_44166849的博客
07-17 475
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
微信小程序与本地MySQL数据库通信
qq_46396470的博客
07-17 846
因此，查询语句我放在了微信小程序的后端生成，然后发起HTTP请求时，直接传到中转服务器，中转服务器直接传给MySQL服务器，最后中转服务器将数据库返回的结果直接返回到微信小程序后端即可。发起写入请求时，我们将必要的参数（表名、插入字段，字段数据）传递给中转服务器即可，服务器能够自动完成相关语句的拼接。因为本地MySQL服务器没有域名，也没有进行相应的请求操作封装，因此微信小程序没办法和数据库通信。对于数据库的查询，由于查询语句复杂多样，灵活多变如果放在服务端进行处理，我个人觉得不太方便。
微信小程序
2301_80063528的博客
07-19 943
一、使用CSS变量定制vant主题样式 二、API Promise化
微信小程序驱动的餐厅点餐系统设计与实现
本篇毕业论文主要探讨了基于微信小程序的点餐系统的设计与实现。微信作为一款广泛应用的即时通讯工具，自2011年诞生以来，其小程序功能因其便捷性与轻量化特性得到了迅速普及。本文研究的焦点在于利用微信小程序为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值