资讯专栏INFORMATION COLUMN

小程序-厕所雷达

13651657101 / 1535人阅读

摘要:紧急情况找不到厕所晴天霹雳裤衩一声完喽快来用厕所雷达吧。练习区里看到一个厕所雷达就来做了下,主要还是为了练习小程序控件的基本用法和页面间的交互,依旧让我感到头疼,不过比上次的石头剪刀布好了很多了。来自微信小程序联盟

紧急情况~ 找不到厕所? 晴天霹雳 裤衩一声? 完喽快来用厕所雷达吧~。作为一个优秀的楼主,胖子我不仅写了代码,连广告次都想好了,哇咔咔咔~~~~ “厕所找的快,排的才痛快”。

练习区里看到一个“厕所雷达”就来做了下,主要还是为了练习小程序“控件的基本用法”和“页面间的交互”,CSS依旧让我感到头疼,不过比上次的demo“石头剪刀布”好了很多了HOHO。(PS:页面有好几个,就先贴上首页的代码吧,想看的小伙伴就下载一下然后咱们互相交流哦,注释都写好了的说。哦对了,新的分享功能也加进去了,当然广告词已经写在分享里了。)

下面直接上图:

JS:

</>复制代码

  1. //index.js
  2. var app = getApp()
  3. var winHeight = 0
  4. var winWidth = 0
  5. Page({
  6. data: {
  7. //背景图片,现在没有
  8. img:"/pages/image/123.png",
  9. //确定左边距距离,上边距距离,厕所title,头像
  10. dataArr:[{"left":200,"top":100,"title":"我家厕所最好","img":"/pages/image/1.png"},
  11. {"left":20,"top":400,"title":"amis的小屋","img":"/pages/image/2.png"},
  12. {"left":540,"top":440,"title":"老丁的宝盆","img":"/pages/image/3.png"},
  13. {"left":240,"top":800,"title":"雪姐专用坑","img":"/pages/image/4.png"}]
  14. },
  15. //进页面后获取数据
  16. onLoad: function () {
  17. console.log("onLoad")
  18. var that = this
  19. //调用应用实例的方法获取全局数据
  20. app.getUserInfo(function(userInfo){
  21. console.log(userInfo)
  22. //更新数据
  23. that.setData({
  24. userInfo:userInfo
  25. })
  26. })
  27. //获取数据
  28. wx.getSystemInfo({
  29. success: function(res) {
  30. console.log(res)
  31. winHeight = res.windowHeight;
  32. winWidth = res.windowWidth;
  33. }
  34. })
  35. // 使用 wx.createContext 获取绘图上下文 context
  36. var context = wx.createContext()
  37. context.arc(winWidth/2, winHeight/2, 50, 0, 2 * Math.PI, true)
  38. context.arc(winWidth/2, winHeight/2, 100, 0, 2 * Math.PI, true)
  39. context.arc(winWidth/2, winHeight/2, 150, 0, 2 * Math.PI, true)
  40. context.arc(winWidth/2, winHeight/2, 200, 0, 2 * Math.PI, true)
  41. context.arc(winWidth/2, winHeight/2, 250, 0, 2 * Math.PI, true)
  42. context.arc(winWidth/2, winHeight/2, 300, 0, 2 * Math.PI, true)
  43. context.setStrokeStyle("red")
  44. context.setLineWidth(1)
  45. context.stroke()
  46. // 调用 wx.drawCanvas,通过 canvasId 指定在哪张画布上绘制,通过 actions 指定绘制行为
  47. wx.drawCanvas({
  48. canvasId: "radar",
  49. actions: context.getActions() // 获取绘图动作数组
  50. })
  51. },
  52. onShareAppMessage: function() {
  53. // 用户点击右上角分享
  54. return {
  55. title: "厕所雷达", // 分享标题
  56. desc: "厕所找的快,排的才痛快", // 分享描述
  57. path: "path" // 分享路径
  58. }
  59. }
  60. })

wxml:

</>复制代码

  1. {{item.title}}

wxss:

</>复制代码

  1. /**index.wxss**/
  2. page{
  3. background: black;
  4. height: 100%;
  5. }
  6. canvas{
  7. width: 100%;
  8. height: 100%;
  9. }
  10. .userinfo {
  11. position:absolute;
  12. top: 561rpx;
  13. left:311rpx;
  14. width: 128rpx;
  15. height: 128rpx;
  16. border-radius: 50%;
  17. }
  18. .toiletView{
  19. position:absolute;
  20. width: 180rpx;
  21. height: 180rpx;
  22. }
  23. .toiletView-image{
  24. position:absolute;
  25. left: 13px;
  26. top: 0px;
  27. width: 128rpx;
  28. height: 128rpx;
  29. border-radius: 50%;
  30. }
  31. .toiletView-text{
  32. position:absolute;
  33. bottom: 10rpx;
  34. font-size: 30rpx;
  35. color: orangered;
  36. width: 180rpx;
  37. text-align: center;
  38. }

Demo:http://pan.baidu.com/s/1pKUpRYV
雷达的背景图是没有的,只能用画板自己手动画了一个。

来自:微信小程序联盟

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86745.html

相关文章

  • 程序-厕所雷达

    摘要:紧急情况找不到厕所晴天霹雳裤衩一声完喽快来用厕所雷达吧。练习区里看到一个厕所雷达就来做了下,主要还是为了练习小程序控件的基本用法和页面间的交互,依旧让我感到头疼,不过比上次的石头剪刀布好了很多了。来自微信小程序联盟 紧急情况~ 找不到厕所? 晴天霹雳 裤衩一声? 完喽快来用厕所雷达吧~。作为一个优秀的楼主,胖子我不仅写了代码,连广告次都想好了,哇咔咔咔~~~~ 厕所找的快,排的才痛快...

    lovXin 评论0 收藏0
  • Java并发编程之线程间通讯(上)wait/notify机制

    摘要:用线程表示维修的过程维修结束把厕所置为可用状态维修工把厕所修好了,准备释放锁了这个维修计划的内容就是当维修工进入厕所之后,先把门锁上,然后开始维修,维修结束之后把的字段设置为,以表示厕所可用。 线程间通信 如果一个线程从头到尾执行完也不和别的线程打交道的话,那就不会有各种安全性问题了。但是协作越来越成为社会发展的大势,一个大任务拆成若干个小任务之后,各个小任务之间可能也需要相互协作最终...

    Lionad-Morotar 评论0 收藏0
  • 用 TFmini-Plus 实现人流、身高测量的方案

    摘要:人流身高测量仪说明本方案为利用北醒公司产品和板结合开发出的小设备。其作用为统计人流数量以及相应目标身高高度。人流身高测量原理雷达启动后,设置安装高度身高限度下限值。考虑人行走时身高会浮动,尽量让脚落在光斑左右,探测到最高值,减小误差。 人流身高测量仪说明 本方案为利用北醒公司产品 TFmini-Plus 和 Arduino-UNO 板结合开发出的小设备。其作用为:统计人流数量以及相应目...

    xbynet 评论0 收藏0

发表评论

0条评论

13651657101

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<