文档章节

小程序-厕所雷达

扶桑木下
 扶桑木下
发布于 2017/01/03 16:36
字数 678
阅读 55
收藏 0

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

练习区里看到一个“厕所雷达”就来做了下,主要还是为了练习小程序“控件的基本用法”和“页面间的交互”,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:

<!--index.wxml-->

<canvas canvas-id="radar">

<image class="userinfo" src="{{userInfo.avatarUrl}}"></image>



<block wx:for="{{dataArr}}">

    <navigator url="../logs/logs?title={{item.title}}&img={{item.img}}">

        <view class="toiletView" style="left:{{item.left}}rpx;top:{{item.top}}rpx" bindtap="toiletDetails" id="{{index}}">

            <image class="toiletView-image" src="{{item.img}}"></image>

            <text class="toiletView-text">{{item.title}}</text>

        </view>

   </navigator>



</block>

</canvas>

 

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

雷达的背景图是没有的,只能用画板自己手动画了一个。

© 著作权归作者所有

扶桑木下
粉丝 22
博文 21
码字总数 16778
作品 0
武汉
程序员
私信 提问
加载中

评论(4)

topface
topface
牛啊
扶桑木下
扶桑木下

引用来自“红薯”的评论

代码放到码云上啊,别扔百度云了,下载便扭
本来是直接上传包的,但是上传不了,顺手就传百度云了
BeGit
BeGit

引用来自“红薯”的评论

代码放到码云上啊,别扔百度云了,下载便扭

回复@红薯 : 百度搜代码 码云里的也能搜到吗 以前在“我分享的代码”里好像能搜到
红薯
红薯
代码放到码云上啊,别扔百度云了,下载便扭
可喜可贺!你带薪如厕 44 分钟,击败了全公司所有人

(给程序员的那些事加星标) 带薪如厕,了解一下 在五六年前,网上就这样一个段子: 的确,无论是大公司,还是小公司,都会面临这个尴尬的问题:带薪如厕。 带薪如厕是指有些员工在工作期间借...

程序员的那些事_
2018/11/22
0
0
下一页/toilet-weapp

微信小程序找厕所(小明带你找厕所) 直接扫描体验 预览 1 需求梳理 1.1 前言 v1.0虽然已经满足实际需求,但是在ios和android两个平台显示的效果还是不尽相同,特别是地图上面路径规划功能。...

下一页
2017/12/14
0
0
ThoughtWorks新一期技术雷达揭技术趋势

  【IT168 评论】新工具、新技术、新编程语言、新平台不断产生,哪些技术真的可以给企业带来增长价值,哪些华而不实?众多新技术,企业又该如何取舍?经济学里有一个很重要的观点叫预测,因为...

it168网站
2016/11/25
0
0
关于雷达类型与区域大小的定义

SC雷达:230km SB雷达:400km SA雷达:400km CD雷达:230km CC雷达:150km CB雷达:400km CA雷达:400km 关于按半径对雷达进行划分的定义: A区:0-50km B区:50-150km C区:150-230km D区:...

mqpf国平
2015/09/24
4
1
联合ADAS合作伙伴实地演示,行易道77GHz中程毫米波雷达亮相

有这么一种说法:在自动驾驶中,如果说摄像头、激光雷达和毫米波雷达技术相互融合是未来趋势,那么在这些融合技术里,毫米波雷达占据了无法替代的位置。 作为毫米波雷达领域的行家,行易道科...

新智驾
2018/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

recv send 的 MSG_DONTWAIT 、 MSG_WAITALL 参数

基本概念: 阻塞IO:: socket 的阻塞模式意味着必须要做完IO 操作(包括错误)才会返回。 非阻塞IO:: 非阻塞模式下无论操作是否完成都会立刻返回,需要通过其他方式来判断具体操作是否成功。 ...

shzwork
25分钟前
2
0
怎么给开源项目提PR?

1. Fork 你想要提交 PR 的项目 2. 下载到本地 相关步骤如下: 在你需要的文件夹下面,右键使用 git bash 命令,打开 git 命令框 执行如下指令可将项目代码下载到当前目录 1代码仓库地址为示例...

xiaomin0322
28分钟前
2
0
浅复制与深复制概念

1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。换言之,浅复制仅仅复制所考虑的对象,而不复制...

GodIsCj
28分钟前
1
0
如何在工作中快速成长?致工程师的10个简单技巧

阿里妹导读:阿里有句非常经典的土话,“今天的最好表现,是明天的最低要求。”如何挖掘潜能、发现更好的自己?今天,阿里巴巴高级无线开发专家江建明将认知升级的方法总结出来,帮助你获得快...

阿里云官方博客
51分钟前
2
0
如何 SSH 到 Linux 服务器里的特定目录及执行命令?

这种操作对于新手来讲特别常见,良许之前也是这样。在本文,老司机将带你来进行更高效的操作,只需一步即可达到你想要的效果。 而且,不仅仅是实现快速进入到 Linux 服务器特定的目录,还可以...

架构师springboot
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部