微信小程序_厕所雷达

在 “微信小程序联盟” 看到了一个小demo，今天做来试试，主要还是为了练习一下 , “控件的基础使用” 和 “页面间的交互” ，创意很好玩，我就也写的比较带劲了，因为页面有好几个所以只上第一页的代码好了，想看全部的小伙伴可以直接下demo来交流哦。（还有上个版本新加的分享功能，也使用了一下哦！）

下面先上图：

js:

[javascript] view plain copy

 print?

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.   //进页面后获取数据  
17.   onLoad: function () {  
18.     console.log('onLoad')  
19.     var that = this  
20.     //调用应用实例的方法获取全局数据  
21.     app.getUserInfo(function(userInfo){  
22.               console.log(userInfo)  
23.       //更新数据  
24.       that.setData({  
25.         userInfo:userInfo  
26.       })  
27.     })  
28.   
29.     //获取数据  
30.     wx.getSystemInfo({  
31.       success: function(res) {  
32.         console.log(res)  
33.         winHeight = res.windowHeight;  
34.         winWidth = res.windowWidth;  
35.       }  
36.     })  
37.   
38.     // 使用 wx.createContext 获取绘图上下文 context  
39.     var context = wx.createContext()  
40.     context.arc(winWidth/2, winHeight/2, 50, 0, 2 * Math.PI, true)  
41.     context.arc(winWidth/2, winHeight/2, 100, 0, 2 * Math.PI, true)  
42.     context.arc(winWidth/2, winHeight/2, 150, 0, 2 * Math.PI, true)  
43.     context.arc(winWidth/2, winHeight/2, 200, 0, 2 * Math.PI, true)  
44.     context.arc(winWidth/2, winHeight/2, 250, 0, 2 * Math.PI, true)  
45.     context.arc(winWidth/2, winHeight/2, 300, 0, 2 * Math.PI, true)  
46.   
47.     context.setStrokeStyle('red')  
48.     context.setLineWidth(1)  
49.     context.stroke()  
50.    
51.     // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为  
52.     wx.drawCanvas({  
53.       canvasId: 'radar',  
54.       actions: context.getActions() // 获取绘图动作数组  
55.     })  
56.   },  
57.   onShareAppMessage: function() {  
58.     // 用户点击右上角分享  
59.     return {  
60.       title: '厕所雷达', // 分享标题  
61.       desc: '厕所找的快，排的才痛快', // 分享描述  
62.       path: 'path' // 分享路径  
63.     }  
64.   }  
65. })  

wxml:

[html] view plain copy

 print?

1. <!--index.wxml-->  
2. <canvas canvas-id="radar">  
3.     <image class="userinfo" src="{{userInfo.avatarUrl}}"></image>  
4.   
5.     <block wx:for="{{dataArr}}">  
6.         <navigator url="../logs/logs?title={{item.title}}&img={{item.img}}">  
7.             <view class="toiletView" style="left:{{item.left}}rpx;top:{{item.top}}rpx" bindtap="toiletDetails" id="{{index}}">  
8.                 <image class="toiletView-image" src="{{item.img}}"></image>  
9.                 <text class="toiletView-text">{{item.title}}</text>  
10.             </view>  
11.     </navigator>  
12.   
13.     </block>  
14. </canvas>  

wxss:

[css] view plain copy

 print?

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

demo地址：厕所雷达  密码: 4wnf