小程序开发厕所雷达实例分享

紧急情况~ 找不到厕所？ 晴天霹雳 裤衩一声？ 完喽~~快来用厕所雷达吧~~~。作为一个优秀的楼主，胖子我不仅写了代码，连广告次都想好了，哇咔咔咔~~~~??“厕所找的快，排的才痛快”。
练习区里看到一个“厕所雷达”就来做了下，主要还是为了练习小程序“控件的基本用法”和“页面间的交互”，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; }
以上就是小程序开发厕所雷达实例分享的详细内容。


疏通下水道有哪些方式技巧
西马马桶喷嘴堵塞原因(马桶喷水孔堵塞)
地漏防臭、堵塞、渗水、下水慢？精维教你地漏疏通清理方法
恒洁马桶如何清洁-马桶清洗小窍门
究竟地漏什么牌子好 地漏如何选购
沙子把下水道弯脖堵了怎么办
科勒马桶传感器故障分析(科勒智能马桶角阀)
手摇伸缩通下水道的管道疏通机使用方法