小程序-厕所雷达

CKJOKER 发布于2019-08-05 10:36 / 1129人阅读

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

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

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

下面直接上图：

JS:

//index.js
var app = getApp()
var winHeight = 0
var winWidth = 0
Page({
  data: {
      //背景图片，现在没有
      img:"/pages/image/123.png",
      //确定左边距距离，上边距距离，厕所title，头像
      dataArr:[{"left":200,"top":100,"title":"我家厕所最好","img":"/pages/image/1.png"},
      {"left":20,"top":400,"title":"amis的小屋","img":"/pages/image/2.png"},
      {"left":540,"top":440,"title":"老丁的宝盆","img":"/pages/image/3.png"},
      {"left":240,"top":800,"title":"雪姐专用坑","img":"/pages/image/4.png"}]
  },

  //进页面后获取数据
  onLoad: function () {
    console.log("onLoad")
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
              console.log(userInfo)
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })

 
    //获取数据
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        winHeight = res.windowHeight;
        winWidth = res.windowWidth;
      }
    })

    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createContext()
    context.arc(winWidth/2, winHeight/2, 50, 0, 2 * Math.PI, true)
    context.arc(winWidth/2, winHeight/2, 100, 0, 2 * Math.PI, true)
    context.arc(winWidth/2, winHeight/2, 150, 0, 2 * Math.PI, true)
    context.arc(winWidth/2, winHeight/2, 200, 0, 2 * Math.PI, true)
    context.arc(winWidth/2, winHeight/2, 250, 0, 2 * Math.PI, true)
    context.arc(winWidth/2, winHeight/2, 300, 0, 2 * Math.PI, true)

    context.setStrokeStyle("red")
    context.setLineWidth(1)
    context.stroke()

    // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
    wx.drawCanvas({
      canvasId: "radar",
      actions: context.getActions() // 获取绘图动作数组
    })
  },

  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: "厕所雷达", // 分享标题
      desc: "厕所找的快，排的才痛快", // 分享描述
      path: "path" // 分享路径
    }
  }
})

wxml:

wxss:

/**index.wxss**/
page{
  background: black;
  height: 100%;
}

canvas{
    width: 100%;
    height: 100%;
}

.userinfo {
  position:absolute;
  top: 561rpx;
  left:311rpx;
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}

.toiletView{
  position:absolute;
  width: 180rpx;
  height: 180rpx;
}

.toiletView-image{
    position:absolute;
    left: 13px;
    top: 0px;
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
}

.toiletView-text{
  position:absolute;
  bottom: 10rpx;
  font-size: 30rpx;
  color: orangered;
  width: 180rpx;
  text-align: center;
}

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

来自：微信小程序联盟

idc机房托管服务器托管中国vpswindows厕所小程序小程序小程序附近小程序门店小程序小程序

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

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

小程序-厕所雷达

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

13651657101 2019-08-21 11:28 评论0 收藏0
小程序-厕所雷达

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

lovXin 2019-08-14 17:08 评论0 收藏0
Java并发编程之线程间通讯（上）wait/notify机制

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

Lionad-Morotar 2019-08-16 16:46 评论0 收藏0
用 TFmini-Plus 实现人流、身高测量的方案

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

xbynet 2019-08-26 10:27 评论0 收藏0
小蝌蚪传记：端口转发

摘要：小蝌蚪很聪明，巧妙利用金钱的力量，智取女神，最终解救出师傅将程序员处乱不惊勇于创新的优良品质体现的淋漓尽致此次一战，成为了程序员的一段佳话，小蝌蚪也成为了夜店传说。。。。背景 2019年6月9号，星期天，晴，33度今天的bug格外的难解对面商店的小姐姐，依然是我不敢奢求的梦进入商店小蝌蚪：您好，我想买两包妹子她：嗯？小蝌蚪：错了，买两包烟她：一共20块。小蝌蚪：太贵了，23块行...

张红新 2019-08-19 11:47 评论0 收藏0