第四章作业

最新推荐文章于 2024-09-30 12:58:13 发布

weixin_47548217

最新推荐文章于 2024-09-30 12:58:13 发布

阅读量219

点赞数 3

文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_47548217/article/details/137200538

版权

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

代码

.js

Page({
  onReady:function (e){
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.arc(100, 100, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#0000FF')
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(160, 100, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#FFFF00')
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(220, 100, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#000000')
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(130, 150, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#00FF00')
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(190, 150, 50, 0, 2 * Math.PI)
    ctx.setStrokeStyle('#FF0000')
    ctx.stroke()
    ctx.draw()
  }
})

.wxml

<canvas canvas-id="myCanvas" style="width: 100%; height: 300px;"></canvas>

执行结果

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

代码

.wxml

<view>←书单</view>
<view style="background-color: peru; width: 100%; height: 200px;">
  <view style="color: white; text-align: center; padding-top: 30px; font-size: 20px; width: 80%;margin-left: 10%;">培养商业意识，走出生活，职场和事业的困境。</view>
  <view style="color: white; text-align: center; padding-top: 30px; width: 80%;margin-left: 10%; font-size: 15px;">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条</view>
</view>
<view style="display: flex;height: 140px;border-bottom: 1px solid grey;">
  <view style="flex-grow: 1;width: 30%;"><image src="/image/sd1.png" style="width: 95px; height: 140px;"></image></view>
  <view style="display: flex;flex-direction: column;flex-grow: 1;width: 70%;">
    <view style="flex-grow: 1;font-weight: bolder;">人道大圣</view>
    <view style="flex-grow: 2;font-size: 14px;font-weight: bold;">莫默</view>
    <view style="flex-grow: 3;font-size: 10px;">弱者声嘶力竭，亦无人在乎，强者轻声细语，却能深入人心。一棵熊熊燃烧的天赋树，每一片叶子都承载着不同的灵纹，宗门被灭，沦为矿奴的陆叶凭此成为修士，搅动九州风云......</view>
  </view>
</view>
<view style="display: flex;height: 140px;border-bottom: 1px solid grey;">
  <view style="flex-grow: 1;width: 30%;"><image src="/image/sd2.png" style="width: 95px; height: 140px;"></image></view>
  <view style="display: flex;flex-direction: column;flex-grow: 1;width: 70%;">
    <view style="flex-grow: 1;font-weight: bolder;">万古神帝</view>
    <view style="flex-grow: 2;font-size: 14px;font-weight: bold;">飞天鱼</view>
    <view style="flex-grow: 3;font-size: 10px;">八百年前，明帝之子张若尘，被他的未婚妻池瑶公主杀死，一代天骄，就此陨落。　　八百年后，张若尘重新活了过来，却发现曾经杀死他的未婚妻， 已经统一......</view>
  </view>
</view>

执行结果

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

代码

.wxml

<view style="background-color: black;height: 50px;"><view style="color: white;padding-top: 15px;">×西安找拼车</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: 110px;">称呼*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 100px;top:110px">请输入称呼</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: 100px;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: 100px;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: 110px;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: 100px;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: 100px;top:390px">请输入空座位</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>

执行结果

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

代码

.js

Page({
     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
       })
     }
})

.wxml

<view style="text-align: center;">中国现阶段人均寿命900个月</view>
<form bindsubmit="bind">
<view style="display: flex;">
<input type="text" name="time" placeholder="请输入时间" style="font-size: 13px; padding-left: 25px; text-align: center;"/>至今：{{people}}个月</view>
<view style="display: flex; width: 80%; margin: 0 auto;">
<button formType="submit" style="font-size: 13px; border: 1px solid gray;">换一个日期</button>
<button formType="reset" style="font-size: 13px; border: 1px solid gray;">清除记录</button>
</view>
</form>
<view style="margin-top: 30px;">
<image src="/image/dl.png" style="width: 80%; height: 300px; margin-left: 30px;"/>
</view>
<view>能把在前面行走的机会抓住的人，十有八九都会成功。</view>

app.json

{
  "pages": [
    "pages/dszzy/rsjc/rsjc",
    "pages/dszzy/zpc/zpc",
    "pages/dszzy/aywh/aywh",
    "pages/dszzy/sd/sd",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/dszzy/rsjc/rsjc",
      "iconPath": "/image/分类.png",
      "selectedIconPath": "/image/分类.png",
      "text": "首页"
    },
    {
      "pagePath": "pages/dszzy/aywh/aywh",
      "iconPath": "/image/分类.png",
      "selectedIconPath": "/image/分类.png",
      "text": "年月日"
    },
    {
      "pagePath": "pages/dszzy/sd/sd",
      "iconPath": "/image/分类.png",
      "selectedIconPath": "/image/分类.png",
      "text": "静思"
    },
    {
      "pagePath": "pages/dszzy/zpc/zpc",
      "iconPath": "/image/分类.png",
      "selectedIconPath": "/image/分类.png",
      "text": "关于"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

执行结果