第四章 微信小程序作业

一.操作题

1．使用canvas组件五O实现的绘制。

在js中输入代码：

//.js
Page({
    onReady:function (e){
      // 获取canvas上下文对象
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()
 
// 绘制完成，显示在canvas上
ctx.draw()
    }
})

WXML:

<canvas canvas-id="myCanvas"></canvas>

 运行结果：

2．使用相应组件，完成类似如图4-29所示的“书单”页面。

wxml：

 
 
<view style="font-size: 30px;"> ⬅书单</view>
<view>
<view class="ig1">
<image src="../img/dfg.jpg" mode="tu1" class="tou"/>
</view></view>
<view class="yi">
<view class="zi1">钢铁是怎样练成的</view>
<view class="zi2">尼·奥斯特洛夫斯基</view>
<view class="zi3"> 《钢铁是怎样练成》的作者是尼·奥斯特洛夫斯基（1904 年～1936 年），前苏联著名励志作家
布尔什维克。</view>
</view>
<view class="ig2">
<view class="ig2"><image src="../img/f80cfce8c1b3dd5e775f48f13ea8ff3.jpg" mode=""class="tu1"/></view></view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 10px;"></view>
<view class="ig3">
<view><image src="../img/aaa.jpg" mode=""class="tu2"/></view></view>
<view class="er">
<view class="zi1">斗破苍穹</view>
<view class="zi2">天蚕土豆</view>
<view class="zi3">2009年4月，创作长篇玄幻小说《斗破苍穹》，此书在起点中文网高达1亿4千多万的点击率，凭借此书的巨大人气，天蚕土豆一书成名，成为2009年起点中文网白金作家。</view>
</view>

wxss：

 
 .tou{
  float: left;
  margin-top: 8px;
  width: 450px; 
  height: 220px;
}
.tu1